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 = (
{adsSignInDriver}

- ) : ( + ); + + 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);