Fails to Render DFP Ad - Githubissues

cliquenoir commented 9 years ago

I'm trying to implement Lazy Ads in a simple test environment, but can't seem to get a successfully rendered DFP ad.

Here's what I've got at the moment:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lazy Ads Test</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/lazyad-loader.min.js" async></script>
  <script>
    (function() {
    var useSSL = 'https:' == document.location.protocol;
    var src = (useSSL ? 'https:' : 'http:') +
    '//www.googletagservices.com/tag/js/gpt.js';
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    })();
  </script>
  <script>
    googletag.defineSlot('/XXXXXXXX/Homepage_Leaderboard', [728, 90], 'homepage_leaderboard').addService(googletag.pubads());
    googletag.enableServices();
  </script>
</head>
<body>
  <h1>Lazy Ads Test</h1>
  <div class="ad" data-lazyad>
    <script type="text/lazyad">
      <!--
        <script>googletag.display("homepage_leaderboard");</script>
      -->
    </script>
  </div>
</body>
</html>

And here is the rendered div:

<div class="ad" data-lazyad="" data-lazyad-loaded="true">
    <script type="text/lazyad">
      <!--
        <script>googletag.display("homepage_leaderboard");</script>
      -->
    </script>
  <script>googletag.display("homepage_leaderboard");</script>
</div>

If I update the div to include an ID of "homepage_leaderboard", the ad renders but does so inline without any reduction in page load time.

It seems to me that the HTML comments don't fully wrap the googletag script as it seems to be closing the opening lazy ads script.

Any thoughts? Thanks very much in advance.

kristian-b commented 9 years ago

I have had problems with Google DFP too. I am not sure, if my problem was the same as yours, but I will post it anyway. On my website, I think the problem was, that googletag.enableServices(); was executed before lazy-ads and at the time googletag.enableServices(); was executed, the lazy ads hasn't finished to place the ad slots.

I have solved the problem in the following way:

1) Disable initial load of Google DFP with inserting googletag.pubads().disableInitialLoad(); before googletag.enableServices();

2) Defining a Google DFP refresh after full page load is done and lazy-ads is finished: jQuery(window).load(function () { googletag.pubads().refresh(); });

Now Google DFP is working together with lazy-ads.

jameswragg commented 9 years ago

Thanks @kristian-b, very much appreciated! I've not had the opportunity to investigate this yet.

jsit commented 8 years ago

In addition to the changes mentioned by @kristian-b, I've noticed two other things that can help:

Move the defineSlot code into the lazyad block itself, above the googletag.display line
Make sure enableSingleRequest is not enabled.

My working code looks something like this:

<script type='text/javascript'>

  var gptadslots=[];
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
  (function(){ var gads = document.createElement('script');
    gads.async = true; gads.type = 'text/javascript';
    var useSSL = 'https:' == document.location.protocol;
    gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
  })();

  googletag.cmd.push(function() {
    googletag.pubads().enableAsyncRendering();
    googletag.pubads().disableInitialLoad();
    googletag.enableServices();
  });

  jQuery(window).load(function () {
     googletag.pubads().refresh();
  });

</script>

<div class='ad' data-lazyad data-matchmedia='only screen and (min-width: 728px)'>
  <script type='text/lazyad'>
    <!--
      <script>
        googletag.defineSlot('/XXXXXXX/my-ad-spot', [728, 90], 'div-gpt-ad-XXXXXXXXXXXXX-0').addService(googletag.pubads());
        googletag.cmd.push(function() { googletag.display("div-gpt-ad-XXXXXXXXXXXXX-0"); });
      </script>
    -->
  </script>
</div>

kristian-b commented 8 years ago

Hi @jsit,

that is a nice idea. I will try that.

I had problems with the Internet Explorer 11 and also my own solution I posted before. I noticed that the IE 11 sometimes fires the jQuery(window).load() event at the same time as jQuery(document).ready(). And as I mentioned above, lazy-ads hasn't finished placing the ads at this time. I have solved this issue by placing a div box in a lazy-ads slot and then setting an interval with setInterval(). The interval function checks whether the div box exists and if the box exists, I know that lazy-ads has finished. And if lazy-ads has finished, I can start Google DFP.

But your solution is smarter. :-)

ppc1337 commented 8 years ago

Hey guys,

first thanks for your suggestions, I used them and everything works fine except one thing: the collapsing of the containers when they are empty seems to be broken. Has anyone a solutions for this?

The code I'm using in the header looks like this

<script>
  googletag.cmd.push(function() {
    googletag.defineSlot('/xxxxxxx/xxxxx', [xxx, xxx], 'div-gpt-ad-xxxxxxxxxx-0').addService(googletag.pubads());
googletag.defineSlot('/xxxxx/xxxxxx', [[xxx, xxx], 'div-gpt-ad-xxxxxxxx-0').addService(googletag.pubads());
googletag.pubads().disableInitialLoad();
googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });

jQuery(window).load(function () {
     googletag.pubads().refresh();
  });
</script>

And the placed ad-code looks like this:

<div class='ad' data-lazyad data-matchmedia='only screen and (min-width: 728px)'>
  <script type='text/lazyad'>
    <!--
<div id='div-gpt-ad-xxxx-0'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-xxxx-0'); });
</script>
</div>
    -->
  </script>
</div>

wiley / madgex-lazy-ads

Fails to Render DFP Ad #11