Lazy Loading GAM

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

[Dani]

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

[djibnet]

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

[Dani]

Ah, thanks so much for the catch! I copied the code from the sample code at https://developers.google.com/doubleclick-gpt/samples/lazy-loading and didn't realize that they were repeating it multiple times for clarity and not for production. I'll fix it right now. Thanks!

[Dani]

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

[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

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

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

[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
    });

[aanchal_890]

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