In the ever-evolving world of digital advertising, it’s essential to stay updated with the latest technologies and platforms. One such transition was the renaming of DoubleClick for Publishers (DFP) to Google Ad Manager (GAM). This post will guide you on how to implement infinite ad loading on pages with dynamic content using the updated Google Ad Manager.
Almost any dynamic website splits content into multiple pages to enhance user engagement and ease of navigation. Some sites offer paging controls and reload the entire page upon navigation; others append new content when a user scrolls to the bottom (infinite scroll). These pages are very effective for placing ads to increase your revenue. Implementing GAM tags on each page is straightforward when it loads fully with the site’s header and footer. However, loading ads on an infinite scroll website or a site with AJAX pagination requires a special approach.
Check out the result of the tutorial here.
Prerequisites
- A website with GAM tags integrated. It’s assumed that you know how to integrate GAM on your website. If not, refer to the official documentation on implementing tags.
- Prior knowledge of JavaScript coding and HTML is assumed for this tutorial. Understanding the implementation methods will allow you to realize dynamic ad loading with other programming languages.
Implementation
To kickstart the process, create a JavaScript function that generates a new ad slot with an ad unit path for infinite loading.
In a standard implementation, you might define an ad unit like so:
googletag.defineSlot('/4991722/ad_468x60px_1', [468, 60], 'div-gpt-cont-ad').addService(googletag.pubads());
For every subsequent duplicate, create the same definition but with a different id. In the example above, the id is “div-gpt-cont-ad”. The next IDs will be “div-gpt-cont-ad-X” where X is a consequent number. Generate a unique ID with this code:
const adId = 'ad-' + Date.now();
When displaying a defined ad slot, you might use code similar to this:
<div class="gamAd" id='div-gpt-cont-ad' style='height:60px; width:468px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-cont-ad'); });
</script>
</div>
Here, the ID “div-gpt-cont-ad” is used, so for new ad slots, it’s crucial to use the newly generated ad ID.
To achieve infinite ad loading, employ the GPT function googletag.pubads().refresh(). The function googletag.display doesn’t suffice in this scenario.
Additionally, due to GAM’s correlator values among other technical reasons (not all of which are known), subsequent ad loading works for the next 4 ad requests. After that, an empty ad slot is returned. A workaround is to use the googletag.destroySlots method to destroy previously generated ad units. In this example, all generated ad units are stored in a variable, and the 1st one is removed to maintain an array of four ad units at all times. However, if a user scrolls up, they will not see the previously generated ads.
Here is a JavaScript function that generates and adds the ad unit on the next page or upon scrolling down:
const generateGAMAd = (eLastItem, slotCode, size) => {
const adId = 'ad-' + Date.now();
const eAd = document.createElement('div');
eAd.id = adId;
eAd.classList.add('gamAd');
eAd.style.height = '60px';
eAd.style.width = '468px';
if (eLastItem.nextSibling) {
eLastItem.parentNode.insertBefore(eAd, eLastItem.nextSibling);
} else {
eLastItem.parentNode.appendChild(eAd);
}
googletag.cmd.push(function() {
if (adSlots.length >= pageConf.activeInfiniteAds) {
const firstAd = adSlots.shift();
const firstAdId = firstAd.getSlotElementId();
const firstAdEl = document.getElementById(firstAdId);
googletag.destroySlots([firstAd]);
firstAdEl.parentNode.removeChild(firstAdEl);
}
const slot = googletag.defineSlot(slotCode, size, adId);
slot.addService(googletag.pubads());
adSlots.push(slot);
googletag.pubads().refresh([slot]);
});
};
The eLastItem argument is the item after which a new ad slot will be generated.
In our final example, you’ll see also a 4th argument – targetings, which allows passing targetings to a new ad slot as well.
Result
Now, you can load new ads infinitely without reloading the entire page. The primary downside is that initially loaded ads will be removed, and a user will not see them if they scroll back. This issue can be mitigated by appending some default ads, like self-campaigns or other HTML code.
Feel free to share your thoughts or ask any questions in the comments section below.