developer-roadmap/src/components/Analytics/GoogleAdSlot.astro

<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>