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');
  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()
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    renderAllSlots();
  });
} else {
  renderAllSlots();
}