Member Avatar for Dani

I am using GAM as so:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {

        googletag.defineSlot('/86406173/ArticleLeaderboard', leader_size, 'div-gpt-ad-1321481451196-0').addService(googletag.pubads());
        // etc.

        googletag.pubads().collapseEmptyDivs();
        googletag.pubads().enableLazyLoad();        
        googletag.pubads().enableLazyLoad({
            fetchMarginPercent: 200,
            renderMarginPercent: 100,
            mobileScaling: 2.0
        });
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();

});
</script>

Is there a conflict of interest between enableLazyLoad() and enableSingleRequest()?

Thanks!

  • 4 Contributors
  • 9 Replies
  • 1K Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by aanchal_890

Dani AI

Generated

Short answer: there is no hard “conflict” — enableLazyLoad() and enableSingleRequest() can be used together — but the behavior changes in a way that matters. With SRA active, the first slot that crosses your lazy fetchMargin will trigger a single ad-server call that includes all defined slots, so lazy-loading becomes a batch-level trigger rather than a per-slot, on-demand fetch. (developers.google.com)

Practical options to pick the behavior you want:

  • If you need true per-slot, on-demand fetching, avoid global SRA and use a controlled flow (disable initial load, then refresh() or display() when a slot nears the viewport). (developers.google.com)
  • If you want SRA for fewer HTTP requests/auction benefits, group slots into batches so SRA fires for smaller groups at different times (GPT docs show batching patterns and slot limits). (developers.google.com)
  • Prefer the modern setConfig({ lazyLoad: { … } }) approach to set fetchMarginPercent, renderMarginPercent, and mobileScaling programmatically. (developers.google.com)

Testing and tuning tips: use the Google Publisher Console (googletag.openConsole()) to watch the page-request timeline and confirm exactly when fetches happen. (developers.google.com) For choosing margins, pick a preload distance in pixels, convert it to percent of viewport height, then A/B test viewable-impression lift vs request timing. Example snippet to compute and apply a numeric fetchMarginPercent:

// choose desired preload distance in pixels (tune per site)
const preloadPx = 1200;
const viewportH = window.innerHeight || document.documentElement.clientHeight;
const fetchMarginPercent = Math.ceil((preloadPx / viewportH) * 100);

googletag.cmd.push(function() {
  googletag.setConfig({
    lazyLoad: {
      fetchMarginPercent: fetchMarginPercent,
      renderMarginPercent: Math.max(0, Math.ceil(fetchMarginPercent / 2)),
      mobileScaling: 1.5
    }
  });
});

Thanks to for sharing the lift, and to and for the useful catches — run small experiments (device splits and time-windowed A/Bs) to find the best trade-off for your layout and header-bidding setup.

Recommended Answers

All 9 Replies

Member Avatar for Dani

I want to add that, per the above setup, lazy load is working as expected.

Member Avatar for djibnet

hello,
any reason why googletag.pubads().enableLazyLoad() is repeated twice in your code ?
thanks

Edited by djibnet because: typo
commented: Thanks for the bug catch! +34
Member Avatar for Dani

I also want to mention that since enabling it, my % viewable has increased by about 15% with no changes to ad placement.

Member Avatar for djibnet

I have a question though : how do you check enableLazyLoad works as expected ?
While I noticed a better page performance using https://developers.google.com/publisher-ads-audits/ I can't seem to find an easy option to verify ads, placed at the bottom of a page, are not loading until user scrolls down.
Thank you

Member Avatar for Dani

So what I did to test was I opened a page of my site with an ad at the bottom using Chrome. I then right clicked and selected Inspect to open the Developer Tools and I went to the Elements tab. I searched for where in the DOM the ad would be, and I found the code:

<div id="div-gpt-ad-1321481451196-0">
    <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1321481451196-0'); });
    </script>
    <div id="google_ads_iframe_/86406173/ArticleLeaderboard_0__container__" style="border: 0pt none; width: 728px; height: 90px;"></div>
</div>

You can see it looks just like the way it was initially copied/pasted from GAM, but with the following empty <div> was added:

<div id="google_ads_iframe_/86406173/ArticleLeaderboard_0__container__" style="border: 0pt none; width: 728px; height: 90px;"></div>

Then, I slowly scrolled down the page while keeping an eye out on that particular line. After about scrolling halfway down the page, that line morphed into:

<div id="div-gpt-ad-1321481451196-0" data-google-query-id="CPrnqODByukCFcYXrQYdZ0YOTA">
    <div id="google_ads_iframe_/86406173/ArticleLeaderboard_0__container__" style="border: 0pt none;"><iframe id="google_ads_iframe_/86406173/ArticleLeaderboard_0" title="3rd party ad content" name="google_ads_iframe_/86406173/ArticleLeaderboard_0" width="728" height="90" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" data-google-container-id="2" style="border: 0px; vertical-align: bottom;" data-load-complete="true"></iframe></div>
</div>

I'm just giving you the summary because the <iframe> was now populated with the full third-party ad copy.

Member Avatar for djibnet

Then, I slowly scrolled down the page while keeping an eye out on that particular line.

Thanks for the tip which helped. In the meantime, I discovered this nice Google Chrome extension "View Rendered Source". it makes it much easier to highlight code changes before/after ads lazy loading
https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob

Here is how I tested (after installing this extension)

  1. Load your homepage with Google Chrome
  2. Click View Rendered Source Extension icon (Chrome opens a new tab)
  3. (In View Rendered Source tab) Scroll down to view empty div <div id="google_adsiframe/86406173/ArticleLeaderboard_0 (advert is not loaded)
  4. (Back to your homepage tab) Scroll down to first ad leaderboard
  5. Click again View Rendered Source Extension icon

  6. In new opened tab, scroll down to the same div <div id="google_adsiframe/86406173/ArticleLeaderboard_0 . Iframe advert code is now added (and highlighted in green by the Chrome extension)

Edited by djibnet because: html code
Member Avatar for adtagmacros

googletag.pubads().enableLazyLoad(); It should be present only once,

On Google Documentation, It is added 3 times to show variant of Lazy load that can be enabled.

 A) Enable with defaults.
       googletag.pubads().enableLazyLoad();

    // B) Enable without lazy fetching. Additional calls override previous
    // ones.
    googletag.pubads().enableLazyLoad({fetchMarginPercent: -1});

    // C) Enable lazy loading with...
    googletag.pubads().enableLazyLoad({
      // Fetch slots within 5 viewports.
      fetchMarginPercent: 500,
      // Render slots within 2 viewports.
      renderMarginPercent: 200,
      // Double the above values on mobile, where viewports are smaller
      // and users tend to scroll faster.
      mobileScaling: 2.0
    });
Member Avatar for aanchal_890

how had you decided the fetchmarginpercentage and rendermarginpercent values??
please reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.