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!
