google-dfpgoogle-publisher-tag

GPT Ads - refresh fails when using lazy load


I'm trying to use the newly introduced googletag.PubAdsService.enableLazyLoad option with DFP ads. It works fine during the initial page load, but when I try to refresh ads on the page, I'm getting the following error:

Exception in queued GPT command TypeError: Cannot read property 'unobserve' of null at Nt (pubads_impl_242.js:1) at pubads_impl_242.js:1 at Object._.y (pubads_impl_242.js:1) at Wt (pubads_impl_242.js:1) at pubads_impl_242.js:1 at Vt (pubads_impl_242.js:1) at _.V.$a (pubads_impl_242.js:1) at Xu (pubads_impl_242.js:1) at Cv (pubads_impl_242.js:1) at wv._.h.refresh (pubads_impl_242.js:1)

Here is my code:

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.slots = googletag.slots || {};
var mapping = googletag.sizeMapping()
  .addSize([0, 0], [1000, 1])
  .addSize([320, 0], [[320, 50], [300, 50]])
  .addSize([1025, 0], [970, 90])
  .build();
googletag.slots["push"] = googletag.defineSlot("/1234/sample/", [[970, 90], [320, 50], [300, 50]], "dfp-ad-banner")
  .addService(googletag.pubads())
  .setTargeting("pos", "banner")
  .defineSizeMapping(mapping);
googletag.cmd.push(function() {
  googletag.pubads().enableAsyncRendering();
  googletag.pubads().collapseEmptyDivs();
  googletag.pubads().disableInitialLoad();
  googletag.pubads().enableLazyLoad({fetchMarginPercent: 200,renderMarginPercent: 100,mobileScaling: 2.0});
});
googletag.enableServices();
...
googletag.cmd.push(function() {
  googletag.display("dfp-ad-banner");
});
...
googletag.cmd.push(function () {
        // add visibility helper classes
        googletag.pubads().addEventListener('slotRenderEnded', function (event) {
          var adClass = (event.size[0] > 1 && event.size[1] > 1) ? 'ad-visible' : 'ad-invisible';
          $('#' + event.slot.getSlotElementId()).addClass(adClass);
        });
        // load ads
        googletag.pubads().refresh(null, {changeCorrelator: false});
      });

Solution

  • this is because the collapseEmptyDivs so far is not compatible with enableLazyLoad. I recommend removing collapseEmptyDivs.

    Read more about this here https://developers.google.com/doubleclick-gpt/reference#googletag.PubAdsService_enableLazyLoad