GPT Lazy Load Generator for Google Publisher Tag

<!-- Google Publisher Tag. async, so it never blocks rendering. -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {
    const slot1 = googletag
      .defineSlot("/1234567/homepage/top_leaderboard", [[728, 90], [970, 90], [320, 50]], "div-gpt-top")
      .addService(googletag.pubads());
    slot1.defineSizeMapping(
      googletag
        .sizeMapping()
        .addSize([1024, 0], [[728, 90], [970, 90]])
        .addSize([0, 0], [320, 50])
        .build()
    );

    const slot2 = googletag
      .defineSlot("/1234567/homepage/in_content", [[300, 250], [336, 280]], "div-gpt-content")
      .addService(googletag.pubads());

    googletag.setConfig({
      singleRequest: true,
      collapseDiv: "ON_NO_FILL",
      lazyLoad: {
        // Fetch slots within 2 viewports of the screen.
        fetchMarginPercent: 200,
        // Render slots within 1 viewport.
        renderMarginPercent: 100,
        // Multiply both margins on mobile, where people scroll faster.
        mobileScaling: 2,
      },
    });

    // Viewable refresh. Declare the "refresh" key-value in Ad Manager so
    // refreshed impressions can be reported on and excluded by buyers.
    const REFRESH_MS = 30000;
    const refreshable = new Set(["div-gpt-content"]);
    const slotsById = new Map();
    const refreshCount = new Map();
    const inView = new Set();
    const due = new Set();

    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          const id = entry.target.id;
          if (entry.intersectionRatio >= 0.5) {
            inView.add(id);
            if (due.has(id)) refreshIfSeen(id);
          } else {
            inView.delete(id);
          }
        }
      },
      { threshold: [0, 0.5] }
    );

    function refreshIfSeen(id) {
      if (document.visibilityState !== "visible" || !inView.has(id)) {
        due.add(id);
        return;
      }
      due.delete(id);
      const slot = slotsById.get(id);
      const count = (refreshCount.get(id) || 0) + 1;
      refreshCount.set(id, count);
      slot.setConfig({ targeting: { refresh: String(count) } });
      googletag.pubads().refresh([slot]);
    }

    document.addEventListener("visibilitychange", () => {
      due.forEach(refreshIfSeen);
    });

    googletag.pubads().addEventListener("impressionViewable", (event) => {
      const id = event.slot.getSlotElementId();
      if (!refreshable.has(id)) return;
      slotsById.set(id, event.slot);
      const el = document.getElementById(id);
      if (el) observer.observe(el);
      setTimeout(() => refreshIfSeen(id), REFRESH_MS);
    });

    googletag.enableServices();
  });
</script>

<!-- /1234567/homepage/top_leaderboard -->
<style>
  #div-gpt-top { min-height: 50px; }
  @media (min-width: 1024px) { #div-gpt-top { min-height: 90px; } }
</style>
<div id="div-gpt-top">
  <script>
    googletag.cmd.push(() => {
      googletag.display("div-gpt-top");
    });
  </script>
</div>

<!-- /1234567/homepage/in_content -->
<div id="div-gpt-content" style="min-height: 250px;">
  <script>
    googletag.cmd.push(() => {
      googletag.display("div-gpt-content");
    });
  </script>
</div>