fix: ad logic

Author: velopert

src/containers/post/HorizontalBanner.tsx

@@ -3,7 +3,11 @@ import styled from 'styled-components';
 import VelogResponsive from '../../components/velog/VelogResponsive';
 import gtag from '../../lib/gtag';
 
-function HorizontalBanner() {
+type Props = {
+  isDisplayAd?: boolean;
+};
+
+function HorizontalBanner({ isDisplayAd = false }: Props) {
   useEffect(() => {
     (window.adsbygoogle = window.adsbygoogle || []).push({});
   }, []);
@@ -14,14 +18,25 @@ function HorizontalBanner() {
 
   return (
     <StyledResponsive onClick={onClick}>
-      <ins
-        className="adsbygoogle"
-        style={{ display: 'block', textAlign: 'center' }}
-        data-ad-layout="in-article"
-        data-ad-format="fluid"
-        data-ad-client="ca-pub-9161852896103498"
-        data-ad-slot="6869845586"
-      ></ins>
+      {isDisplayAd ? (
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block', textAlign: 'center' }}
+          data-ad-client="ca-pub-9161852896103498"
+          data-ad-slot="5950320973"
+          data-ad-format="auto"
+          data-full-width-responsive="true"
+        ></ins>
+      ) : (
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block', textAlign: 'center' }}
+          data-ad-layout="in-article"
+          data-ad-format="fluid"
+          data-ad-client="ca-pub-9161852896103498"
+          data-ad-slot="6869845586"
+        ></ins>
+      )}
     </StyledResponsive>
   );
 }

src/containers/post/PostViewer.tsx

@@ -208,14 +208,24 @@ const PostViewer: React.FC<PostViewerProps> = ({
     if (isOwnPost) return false;
     if (!isVeryOld) return false;
     return true;
-  }, [data?.post]);
+  }, [data?.post, userId]);
+
+  const shouldShowFooterBanner = useMemo(() => {
+    if (shouldShowBanner) return false;
+    if (!data?.post) return false;
+    if (userId) return false;
+    return true;
+  }, [userId, data?.post]);
 
   useEffect(() => {
     if (!data?.post?.id) return;
     if (!shouldShowBanner) return;
     gtag('event', 'banner_view');
     console.log('banner_view');
-  }, [data?.post?.id, shouldShowBanner]);
+    if (userId) {
+      gtag('event', 'banner_view_user');
+    }
+  }, [data?.post?.id, shouldShowBanner, userId]);
 
   const onRemove = async () => {
     if (!data || !data.post) return;
@@ -426,37 +436,14 @@ const PostViewer: React.FC<PostViewerProps> = ({
         />
       </UserProfileWrapper>
       <LinkedPostList linkedPosts={post.linked_posts} />
-      {/* {showRecommends && userId === null && !isVeryOld && (
-        <RelatedPostsForGuest
-          postId={post.id}
-          showAds={
-            false
-            // !isVeryOld &&
-            // Date.now() - new Date(post.released_at).getTime() >
-            //   1000 * 60 * 60 * 24 * 21
-          }
-        />
-      )} */}
       {shouldShowBanner && isContentLongEnough ? <HorizontalBanner /> : null}
-
+      {shouldShowFooterBanner ? <HorizontalBanner isDisplayAd /> : null}
       <PostComments
         count={post.comments_count}
         comments={post.comments}
         postId={post.id}
         ownPost={post.user.id === userId}
       />
-      {/* {showRecommends && (userId !== null || isVeryOld) && (
-        <RelatedPost
-          postId={post.id}
-          showAds={
-            false
-            // !isVeryOld &&
-            // post.user.id !== userId &&
-            // Date.now() - new Date(post.released_at).getTime() >
-            //   1000 * 60 * 60 * 24 * 30
-          }
-        />
-      )} */}
       {showRecommends ? (
         <RelatedPost postId={post.id} showAds={post?.user.id !== userId} />
       ) : null}

src/containers/post/RelatedPost.tsx

@@ -39,19 +39,12 @@ function RelatedPost({
     const cloned: (PartialPost | undefined)[] = [
       ...data.post.recommended_posts,
     ];
-    // get random number between 0 and length of array
-    const randomIndex = () => Math.floor(Math.random() * 8);
+    // get random number between 0 and 3
+    const randomIndex = () => Math.floor(Math.random() * 3);
     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]);