Setting up in-content Google ads for Archive
Pugpig Archive allows you to insert ads served by Google Ad Manager inside your content. This utilises Google Tag Manager to serve the GAM scripts, and insert the placements.
Doing this requires a published GTM container to be live on your Archive. This is something you'll set up and manage, and then just send us the Container ID via a support ticket to initialise on your site.
Below is some sample code you can use to inject these ads, the elements you'd need to change to fit your configuration and needs are highlighted and explained. This code should be easily adaptable to your specific needs.
This then needs to be added to a custom js tag in your container, set to trigger on all pages and published.
Highlighted terms
adsize: this is the dimensions of the ad unit. The standard MPU size of 300 x 250 is used in the sample, but this can be swapped out or added to.
Ad unit: this is the ad unit as provided by Google Ad Manager
var googletag = googletag || {};
var cachedAdvertPugpigUpdate = window.pugpigUpdate || undefined
googletag.cmd = googletag.cmd || [];
(function () {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
gads.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node)
})()
googletag.cmd.push(function () {
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.pubads().collapseEmptyDivs();
googletag.pubads().enableLazyLoad({
fetchMarginPercent: 500,
renderMarginPercent: 2,
mobileScaling: 2.0
})
googletag.enableServices();
})
function renderAdverts() {
var containers = document.querySelectorAll('.ad-container');
console.log(containers)
containers.forEach((container, index) => {
googletag.cmd.push(function () {
var targetName = container.id === 'dfp-top-banner' ? 'Top Banner' : 'In Article'
var dataAdsize = container.dataset.adsize
var adsize = dataAdsize ? JSON.parse(dataAdsize) :
[300, 250]
var slot = googletag.defineSlot(container.dataset.adunit, adsize, container.id)
.addService(googletag.pubads())
.setTargeting('position', targetName)
let tags = JSON.parse(document.body.dataset.tags || '{}')
for (var taxonomy in tags) {
slot.setTargeting(taxonomy, tags[taxonomy])
}
googletag.display(container.id);
googletag.pubads().refresh([slot]);
})
})
}
function injectParagraphs() {
// Get the container element
var contentContainer = document.querySelector('.bndwgt__article_body.bndwgt__inline_text');
var paragraphs = contentContainer.getElementsByTagName('p');
// insert placeholder divs
for (var i = 9; i < paragraphs.length; i += 10) {
var adDiv = document.createElement('div');
adDiv.setAttribute('id', 'advert-' + i)
adDiv.className = 'ad-container';
adDiv.dataset.adunit =
‘[AD UNIT GOES HERE]’
paragraphs[i].insertAdjacentElement('afterend', adDiv);
}
}
function renderAllSlots() {
injectParagraphs()
renderAdverts()
}
window.addEventListener('DOMContentLoaded', () => {
renderAllSlots()
})