Member Avatar for usaidr20

So I want to lazy load ads to improve my site performance. I tried but ads are not appearing. I must be doing some mistake. I am using this code given by Google. This is how I tried to do it:

Pasted below code in head and just replaced googletag.defineSlot('/6355419/Travel' with ad unit id and name of ad.

<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('/6355419/Travel', [728, 90], 'div-1') .setTargeting('test', 'lazyload') .addService(googletag.pubads()); googletag.defineSlot('/6355419/Travel', [728, 90], 'div-2') .setTargeting('test', 'lazyload') .addService(googletag.pubads()); googletag.defineSlot('/6355419/Travel', [728, 90], 'div-3') .setTargeting('test', 'lazyload') .addService(googletag.pubads()); // Some examples of ways to enable lazy loading below. // Normally, only one of these methods should be used. // 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 }); // Register event handlers to observe lazy loading behavior. googletag.pubads().addEventListener('slotRequested', function(event) { updateSlotStatus(event.slot.getSlotElementId(), 'fetched'); }); googletag.pubads().addEventListener('slotOnload', function(event) { updateSlotStatus(event.slot.getSlotElementId(), 'rendered'); }); googletag.enableServices(); }); function updateSlotStatus(slotId, state) { var elem = document.getElementById(slotId + '-' + state); elem.className = 'activated'; elem.innerText = 'Yes'; } </script>

Other than that added given CSS and in body below code

<div id="div-2" class="ad-slot" style="height: 90px; width: 728px;">
<script> googletag.cmd.push(function() { googletag.display('div-2'); }); </script> </div>.

As I told you I have made just one change by replacing defineslot with AD UNIT ID and Unit Name.
Kindly Guide Me. Would Really Help Me. THANKS!

  • 3 Contributors
  • 2 Replies
  • 609 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by Ichrak
Mikekelvin commented: Same problem, if the solutions has been found then kinldy let us know here, so that we can also resolve the problem. +0

Recommended Answers

All 2 Replies

Member Avatar for Ichrak

Google's percentages are already based on viewport heights, so they'll take the screens height in consideration. I do however think Google's defaults are way too optimistic. We're about to move to Google's native lazyload solution as well, but in my own testing I had to severely lower the percentages to keep the viewability at a high level.

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.