Initialize ads only when visible

Author: velopert

src/components/common/AdFeed.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { mediaQuery } from '../../lib/styles/media';
 import gtag from '../../lib/gtag';
 
 function AdFeed({ forPost, index }: { forPost?: boolean; index: number }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const initializedRef = useRef(false);
   // const [isMobile, setIsMobile] = useState(false);
 
   // useEffect(() => {
@@ -17,26 +19,59 @@ function AdFeed({ forPost, index }: { forPost?: boolean; index: number }) {
   //   }, 250);
   // }, []);
   useEffect(() => {
+    if (forPost) return;
     (window.adsbygoogle = window.adsbygoogle || []).push({});
-  }, []);
+  }, [forPost]);
+
+  useEffect(() => {
+    if (!forPost) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !initializedRef.current) {
+            initializedRef.current = true;
+            (window.adsbygoogle = window.adsbygoogle || []).push({});
+            console.log('initialized!');
+          }
+        });
+      },
+      {
+        rootMargin: '90px',
+        threshold: 0,
+      },
+    );
+    observer.observe(ref.current!);
+  }, [forPost]);
 
   return (
     <Block
+      ref={ref}
       forPost={forPost}
       onClick={() => {
         if (forPost) {
           gtag('event', 'ads_click', { event_label: index });
         }
       }}
     >
-      <ins
-        className="adsbygoogle"
-        style={{ display: 'block' }}
-        data-ad-format="fluid"
-        data-ad-layout-key="-6u+e7+18-4k+8t"
-        data-ad-client="ca-pub-5574866530496701"
-        data-ad-slot="3828701581"
-      ></ins>
+      {forPost ? (
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block' }}
+          data-ad-format="fluid"
+          data-ad-layout-key="-6u+e5+1a-3q+77"
+          data-ad-client="ca-pub-5574866530496701"
+          data-ad-slot="8480422066"
+        ></ins>
+      ) : (
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block' }}
+          data-ad-format="fluid"
+          data-ad-layout-key="-6u+e7+18-4k+8t"
+          data-ad-client="ca-pub-5574866530496701"
+          data-ad-slot="3828701581"
+        ></ins>
+      )}
       {/* {isMobile ? (
         <ins
           className="adsbygoogle"

src/containers/post/PostViewer.tsx

@@ -397,7 +397,16 @@ const PostViewer: React.FC<PostViewerProps> = ({
         comments={post.comments}
         postId={post.id}
       />
-      {showRecommends && userId !== null && <RelatedPost postId={post.id} />}
+      {showRecommends && userId !== null && (
+        <RelatedPost
+          postId={post.id}
+          showAds={
+            post.user.id !== userId &&
+            Date.now() - new Date(post.released_at).getTime() >
+              1000 * 60 * 60 * 24 * 30
+          }
+        />
+      )}
     </PostViewerProvider>
   );
 };

src/containers/post/RelatedPost.tsx

@@ -1,61 +1,68 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import media from '../../lib/styles/media';
 import { useQuery } from '@apollo/react-hooks';
 import {
   GetRecommendedPostResponse,
   GET_RECOMMENDED_POST,
+  PartialPost,
 } from '../../lib/graphql/post';
 import PostCardGrid from '../../components/common/PostCardGrid';
 import palette from '../../lib/styles/palette';
-// import { detectAnyAdblocker } from 'just-detect-adblock';
+import { detectAnyAdblocker } from 'just-detect-adblock';
 
-function RelatedPost({ postId }: { postId: string }) {
-  // const [adBlocked, setAdBlocked] = useState(false);
-  // useEffect(() => {
-  //   detectAnyAdblocker().then((detected: boolean) => {
-  //     if (detected) {
-  //       setAdBlocked(true);
-  //     }
-  //   });
-  // }, []);
+function RelatedPost({
+  postId,
+  showAds,
+}: {
+  postId: string;
+  showAds: boolean;
+}) {
+  const [adBlocked, setAdBlocked] = useState(false);
+  useEffect(() => {
+    detectAnyAdblocker().then((detected: boolean) => {
+      if (detected) {
+        setAdBlocked(true);
+      }
+    });
+  }, []);
 
   const { data } = useQuery<GetRecommendedPostResponse>(GET_RECOMMENDED_POST, {
     variables: {
       id: postId,
     },
   });
 
-  // const postWithAds = useMemo(() => {
-  //   if (!data?.post) return null;
-  //   if (!showAds || adBlocked) return data.post.recommended_posts;
-  //   const cloned: (PartialPost | undefined)[] = [
-  //     ...data.post.recommended_posts,
-  //   ];
-  //   // get random number between 0 and length of array
-  //   const randomIndex = () => Math.floor(Math.random() * 8);
-  //   const firstAdIndex = randomIndex();
-  //   const secondAdIndex = (() => {
-  //     let index = randomIndex();
-  //     while (index === firstAdIndex) {
-  //       index = randomIndex();
-  //     }
-  //     return index;
-  //   })();
+  const postWithAds = useMemo(() => {
+    if (!data?.post) return null;
+    if (!showAds || adBlocked) return data.post.recommended_posts;
+    const cloned: (PartialPost | undefined)[] = [
+      ...data.post.recommended_posts,
+    ];
+    // get random number between 0 and length of array
+    const randomIndex = () => Math.floor(Math.random() * 8);
+    const firstAdIndex = randomIndex();
+    const secondAdIndex = (() => {
+      let index = randomIndex();
+      while (index === firstAdIndex) {
+        index = randomIndex();
+      }
+      return index;
+    })();
 
-  //   cloned[firstAdIndex] = undefined;
-  //   cloned[secondAdIndex] = undefined;
-  //   return cloned;
-  // }, [data, showAds, adBlocked]);
+    cloned[firstAdIndex] = undefined;
+    cloned[secondAdIndex] = undefined;
+    return cloned;
+  }, [data, showAds, adBlocked]);
 
-  if (!data?.post.recommended_posts) return null;
+  if (!postWithAds) return null;
 
   return (
     <>
       <Background>
         <Title>관심 있을 만한 포스트</Title>
         <Wrapper>
-          <PostCardGrid posts={data?.post.recommended_posts} forPost />
+          <PostCardGrid posts={postWithAds} forPost />
         </Wrapper>
       </Background>
       <PullUp />