From ff5609b72253a81481c2a4b117957df006a287e4 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 20 Mar 2025 14:46:34 +0000
Subject: [PATCH] Add gam support

---
 src/components/Analytics/GoogleAdSlot.astro | 59 +++++++++++++++++++++
 src/layouts/BaseLayout.astro                | 17 +-----
 2 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Analytics/GoogleAdSlot.astro

diff --git a/src/components/Analytics/GoogleAdSlot.astro b/src/components/Analytics/GoogleAdSlot.astro
new file mode 100644
index 000000000..4556c571d
--- /dev/null
+++ b/src/components/Analytics/GoogleAdSlot.astro
@@ -0,0 +1,59 @@
+<div
+  id='div-gpt-ad-1742391132948-0'
+  class='gam-slot fixed bottom-4 right-4 z-50 h-[160px] w-[350px] cursor-pointer max-md:bottom-0 max-md:right-0 max-md:h-[106px] max-md:w-full'
+>
+  <script>
+    // @ts-nocheck
+    googletag.cmd.push(function () {
+      if (!googletag.pubads) {
+        console.log('googletag.pubads not found');
+        return;
+      }
+
+      // Configure all ad slots on the page to be expanded by default, but
+      // collapse slots that are unable to be filled with an ad.
+      googletag.pubads().collapseEmptyDivs();
+
+      // Set non-personalized ads
+      googletag.pubads().setPrivacySettings({
+        restrictDataProcessing: true,
+        nonPersonalizedAds: true,
+      });
+      googletag.display('div-gpt-ad-1742391132948-0');
+    });
+  </script>
+</div>
+
+<script>
+  const nativeAds: Window[] = [];
+
+  function sendSize(iframe: Window) {
+    const breakpoint = window.innerWidth < 768 ? 'sm' : 'lg';
+
+    iframe.postMessage(`breakpoint:${breakpoint}`, '*');
+  }
+
+  window.addEventListener(
+    'resize',
+    () => {
+      nativeAds.forEach((ad) => {
+        sendSize(ad);
+      });
+    },
+    {
+      passive: true,
+    },
+  );
+
+  window.addEventListener('message', function (e: MessageEvent<any>) {
+    if (e.data === 'initdfp') {
+      nativeAds.push(e.source as Window);
+      sendSize(e.source as Window);
+    } else if (e.data === 'close-ad') {
+      const ad = document.getElementById('div-gpt-ad-1742391132948-0');
+      if (ad) {
+        ad.remove();
+      }
+    }
+  });
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index d5802493d..de0e5946f 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -16,6 +16,7 @@ import type { ResourceType } from '../lib/resource-progress';
 import Clarity from '../components/Analytics/Clarity.astro';
 import RedditPixel from '../components/Analytics/RedditPixel.astro';
 import GoogleAd from '../components/Analytics/GoogleAd.astro';
+import GoogleAdSlot from '../components/Analytics/GoogleAdSlot.astro';
 
 export interface Props {
   title: string;
@@ -192,21 +193,7 @@ const gaPageIdentifier = Astro.url.pathname
       client:load
     />
 
-    <!-- /22873384501/roadmap -->
-    <div id='div-gpt-ad-1742391132948-0' class='fixed bottom-2 right-2'>
-      <script>
-        // @ts-nocheck
-        googletag.cmd.push(function () {
-          // Set non-personalized ads
-          googletag.pubads().setPrivacySettings({
-            restrictDataProcessing: true,
-            nonPersonalizedAds: true,
-          });
-          googletag.display('div-gpt-ad-1742391132948-0');
-        });
-      </script>
-    </div>
-
+    <GoogleAdSlot />
     <slot name='after-footer' />
 
     <PageVisit