revert: setupad

Author: velopert

src/components/common/AdFeed.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { mediaQuery } from '../../lib/styles/media';
 import gtag from '../../lib/gtag';

src/components/common/PostCardGrid.tsx

@@ -6,7 +6,6 @@ import { mediaQuery } from '../../lib/styles/media';
 import AdFeed from './AdFeed';
 import { detectAnyAdblocker } from 'just-detect-adblock';
 import useUser from '../../lib/hooks/useUser';
-import SetupAdFeed from './SetupAdFeed';
 
 export type PostCardGridProps = {
   posts: (PartialPost | undefined)[];
@@ -17,14 +16,8 @@ export type PostCardGridProps = {
 
 function PostCardGrid({ posts, loading, forHome, forPost }: PostCardGridProps) {
   const [adBlocked, setAdBlocked] = useState(false);
-  const [mode, setMode] = useState<'google' | 'setupad'>('setupad');
-  const user = useUser();
 
-  useEffect(() => {
-    if (window.innerWidth < 768) {
-      setMode('google');
-    }
-  }, []);
+  const user = useUser();
 
   useEffect(() => {
     detectAnyAdblocker().then((detected: boolean) => {
@@ -69,11 +62,7 @@ function PostCardGrid({ posts, loading, forHome, forPost }: PostCardGridProps) {
             />
           );
 
-        return mode === 'google' ? (
-          <AdFeed key={i} index={i} forPost={forPost} />
-        ) : (
-          <SetupAdFeed key={i} />
-        );
+        return <AdFeed key={i} index={i} forPost={forPost} />;
       })}
       {loading &&
         Array.from({ length: 8 }).map((_, i) => (

src/containers/post/HorizontalAd.tsx

@@ -1,92 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import VelogResponsive from '../../components/velog/VelogResponsive';
-import media from '../../lib/styles/media';
-
 interface Props {}
 
-function initDesktopAd() {
-  if (window.innerWidth < 768) return;
-  (function () {
-    var size = '728x90',
-      adunit = 'velog.io_728x90_leaderboard_DFP',
-      childNetworkId = '22738196472',
-      xmlhttp = new XMLHttpRequest();
-    xmlhttp.onreadystatechange = function () {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        var es = document.querySelectorAll("[data-id='" + adunit + "']");
-        var e = Array.from(es).filter(function (e) {
-          return !e.hasAttribute('data-rendered');
-        });
-        if (e.length > 0) {
-          e.forEach(function (el: any) {
-            var iframe = el.contentWindow.document;
-            iframe.open();
-            iframe.write(xmlhttp.responseText);
-            iframe.close();
-            el.setAttribute('data-rendered', true as any);
-          });
-        }
-      }
-    };
-    var child = childNetworkId.trim() ? ',' + childNetworkId.trim() : '';
-    xmlhttp.open(
-      'GET',
-      'https://pubads.g.doubleclick.net/gampad/adx?iu=/147246189' +
-        child +
-        '/' +
-        adunit +
-        '&sz=' +
-        encodeURI(size) +
-        '&t=Placement_type%3Dserving&' +
-        Date.now(),
-      true,
-    );
-    xmlhttp.send();
-  })();
-}
-
-function initMobileAd() {
-  (function () {
-    if (window.innerWidth > 580) return;
-    var size = '320x100',
-      adunit = 'velog.io_320x100_leaderboard_DFP',
-      childNetworkId = '22738196472',
-      xmlhttp = new XMLHttpRequest();
-    xmlhttp.onreadystatechange = function () {
-      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-        var es = document.querySelectorAll("[data-id='" + adunit + "']");
-        var e = Array.from(es).filter(function (e) {
-          return !e.hasAttribute('data-rendered');
-        });
-        if (e.length > 0) {
-          e.forEach(function (el: any) {
-            var iframe = el.contentWindow.document;
-            iframe.open();
-            iframe.write(xmlhttp.responseText);
-            iframe.close();
-            el.setAttribute('data-rendered', true);
-          });
-        }
-      }
-    };
-    var child = childNetworkId.trim() ? ',' + childNetworkId.trim() : '';
-    xmlhttp.open(
-      'GET',
-      'https://pubads.g.doubleclick.net/gampad/adx?iu=/147246189' +
-        child +
-        '/' +
-        adunit +
-        '&sz=' +
-        encodeURI(size) +
-        '&t=Placement_type%3Dserving&' +
-        Date.now(),
-      true,
-    );
-    xmlhttp.send();
-  })();
-}
-
 function HorizontalAd({}: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const initializedRef = useRef(false);
@@ -97,8 +13,7 @@ function HorizontalAd({}: Props) {
         entries.forEach((entry) => {
           if (entry.isIntersecting && !initializedRef.current) {
             initializedRef.current = true;
-            initDesktopAd();
-            initMobileAd();
+            (window.adsbygoogle = window.adsbygoogle || []).push({});
             console.log('initialized!');
           }
         });
@@ -118,30 +33,14 @@ function HorizontalAd({}: Props) {
   return (
     <VelogResponsive>
       <Wrapper ref={ref}>
-        <Desktop>
-          <iframe
-            title="desktop-horizontal"
-            data-id="velog.io_728x90_leaderboard_DFP"
-            frameBorder="0"
-            scrolling="no"
-            marginHeight={0}
-            marginWidth={0}
-            width="1"
-            height="1"
-          ></iframe>
-        </Desktop>
-        <Mobile>
-          <iframe
-            title="mobile-horizontal"
-            data-id="velog.io_320x100_leaderboard_DFP"
-            frameBorder="0"
-            scrolling="no"
-            marginHeight={0}
-            marginWidth={0}
-            width="1"
-            height="1"
-          ></iframe>
-        </Mobile>
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block', maxHeight: 400, width: '100%' }}
+          data-ad-client="ca-pub-5574866530496701"
+          data-ad-slot="8809887603"
+          data-ad-format="auto"
+          data-full-width-responsive="true"
+        />
       </Wrapper>
     </VelogResponsive>
   );
@@ -153,24 +52,4 @@ const Wrapper = styled.div`
   margin-bottom: 1.5rem;
 `;
 
-const Desktop = styled.div`
-  display: flex;
-  justify-content: center;
-  iframe {
-    width: 728px;
-    height: 90px;
-  }
-  ${media.small} {
-    display: none;
-  }
-`;
-
-const Mobile = styled.div`
-  display: none;
-  justify-content: center;
-  ${media.custom(580)} {
-    display: flex;
-  }
-`;
-
 export default HorizontalAd;