diff --git a/ui/component/recommendedContent/view.jsx b/ui/component/recommendedContent/view.jsx
index 6a15d561e..714b61dbf 100644
--- a/ui/component/recommendedContent/view.jsx
+++ b/ui/component/recommendedContent/view.jsx
@@ -1,5 +1,5 @@
// @flow
-import { SHOW_ADS } from 'config';
+import { SHOW_ADS, SIMPLE_SITE } from 'config';
import React from 'react';
import ClaimList from 'component/claimList';
import Ads from 'web/component/ads';
@@ -58,7 +58,7 @@ export default function RecommendedContent(props: Props) {
type="small"
loading={isSearching}
uris={recommendedContent}
- injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && }
+ injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && }
empty={__('No related content found')}
/>
}
diff --git a/ui/scss/component/_ads.scss b/ui/scss/component/_ads.scss
index 2b31158b5..e206a1da8 100644
--- a/ui/scss/component/_ads.scss
+++ b/ui/scss/component/_ads.scss
@@ -25,7 +25,8 @@
flex-wrap: wrap;
width: 100%;
- > div {
+ > div,
+ ins {
width: 100%;
position: relative !important;
max-width: 30rem;
@@ -45,6 +46,34 @@
}
}
+// Related list ads
+.ads__related--google {
+ border-bottom: 1px solid var(--color-border);
+ //padding: var(--spacing-s);
+ background-color: var(--color-card-background);
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ width: 100%;
+
+ > div,
+ ins {
+ width: 100%;
+ position: relative !important;
+ max-width: 30rem;
+ min-width: 15rem;
+ margin: var(--spacing-s);
+ }
+
+ @media (max-width: $breakpoint-small) {
+ flex-direction: column;
+
+ > div {
+ width: 100%;
+ }
+ }
+}
+
.ads__claim-text {
display: flex;
flex-direction: column;
diff --git a/web/component/ads.jsx b/web/component/ads.jsx
index 366219eb5..8abc9ba24 100644
--- a/web/component/ads.jsx
+++ b/web/component/ads.jsx
@@ -9,7 +9,12 @@ import classnames from 'classnames';
const ADS_URL = '//assets.revcontent.com/master/delivery.js';
const IS_MOBILE = typeof window.orientation !== 'undefined';
+const G_AD_ID = 'ca-pub-7102138296475003';
+// const G_AD_ONE_LAYOUT = '-gv+p-3a-8r+sd';
+// const G_AD_ONE_SLOT = '6052061397';
+const G_AD_TWO_LAYOUT = '-hl-o+3s-6c+33'; // dark mode, related
+const G_AD_TWO_SLOT = '1498002046';
type Props = {
location: { pathname: string },
type: string,
@@ -22,21 +27,21 @@ function Ads(props: Props) {
type = 'sidebar',
small,
} = props;
+ let googleInit;
useEffect(() => {
if (SHOW_ADS && type === 'video') {
+ let script;
try {
const d = document;
const s = 'script';
const n = 'playbuzz-stream';
-
- let js;
let fjs = d.getElementsByTagName(s)[0];
- js = d.createElement(s);
- js.className = n;
- js.src = 'https://stream.playbuzz.com/player/62d1eb10-e362-4873-99ed-c64a4052b43b';
+ script = d.createElement(s);
+ script.className = n;
+ script.src = 'https://stream.playbuzz.com/player/62d1eb10-e362-4873-99ed-c64a4052b43b';
// $FlowFixMe
- fjs.parentNode.insertBefore(js, fjs);
+ fjs.parentNode.insertBefore(script, fjs);
} catch (e) {}
}
}, [type]);
@@ -61,6 +66,50 @@ function Ads(props: Props) {
}
}, [type]);
+ useEffect(() => {
+ let script;
+
+ if (SHOW_ADS && type === 'google') {
+ const d = document;
+ if (!d.getElementById('googleadscriptid')) {
+ try {
+ const s = 'script';
+ let fjs = d.getElementsByTagName(s)[0];
+ script = d.createElement(s);
+ script.id = 'googleadscriptid';
+ script.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
+ script.setAttribute('async', 'async');
+ script.setAttribute('data-ad-client', 'ca-pub-7102138296475003');
+ // $FlowFixMe
+ fjs.parentNode.insertBefore(script, fjs);
+ } catch (e) {}
+ }
+ googleInit = setTimeout(() => {
+ if (typeof window !== 'undefined') {
+ (window.adsbygoogle = window.adsbygoogle || []).push({});
+ }
+ }, 1000);
+ }
+ return () => {
+ if (googleInit) {
+ clearTimeout(googleInit);
+ }
+ };
+ }, [type]);
+
+ const googleAd = (
+
+
+
+ );
+
const adsSignInDriver = (
);
- if (!SHOW_ADS) {
- return false;
- }
-
- return type === 'video' ? (
+ const videoAd = (
- ) : (
+ );
+
+ const sidebarAd = (
Ads
{adsSignInDriver}
@@ -107,6 +154,21 @@ function Ads(props: Props) {
/>
);
+
+ if (!SHOW_ADS) {
+ return false;
+ }
+ if (type === 'video') {
+ return videoAd;
+ }
+
+ if (type === 'google') {
+ return googleAd;
+ }
+
+ if (type === 'sidebar') {
+ return sidebarAd;
+ }
}
export default withRouter(Ads);