gads on master

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 && <Ads type="video" small />}
+          injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads small type={SIMPLE_SITE ? 'google' : 'video'} />}
           empty={__('No related content found')}
         />
       }

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;

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 = (
+    <div className="ads__related--google">
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-format="fluid"
+        data-ad-layout-key={G_AD_TWO_LAYOUT}
+        data-ad-client={G_AD_ID}
+        data-ad-slot={G_AD_TWO_SLOT}
+      />
+    </div>
+  );
+
   const adsSignInDriver = (
     <I18nMessage
       tokens={{
@@ -78,11 +127,7 @@ function Ads(props: Props) {
     </I18nMessage>
   );
 
-  if (!SHOW_ADS) {
-    return false;
-  }
-
-  return type === 'video' ? (
+  const videoAd = (
     <div className="ads__claim-item">
       <div id="62d1eb10-e362-4873-99ed-c64a4052b43b" />
       <div
@@ -94,7 +139,9 @@ function Ads(props: Props) {
         <p>{adsSignInDriver}</p>
       </div>
     </div>
-  ) : (
+  );
+
+  const sidebarAd = (
     <div className="ads-wrapper">
       <p>Ads</p>
       <p>{adsSignInDriver}</p>
@@ -107,6 +154,21 @@ function Ads(props: Props) {
       />
     </div>
   );
+
+  if (!SHOW_ADS) {
+    return false;
+  }
+  if (type === 'video') {
+    return videoAd;
+  }
+
+  if (type === 'google') {
+    return googleAd;
+  }
+
+  if (type === 'sidebar') {
+    return sidebarAd;
+  }
 }
 
 export default withRouter(Ads);