javascript single-page-application google-publisher-tag

GPT reload ad in the same div element

For single page apps, I'd like to know if it's possible to request a new ad, to replace existing ad in a div container

var slotName = '/blogs/peter/recentPosts' // this changes according to route
var adContainer = 'div-common-container' // this never changes
window.googletag.defineSlot(slotName), ['fluid'], adContainer).addService(this.googletag.pubads())

The example I found so far, confirm that is possible to refresh existing slots, but my use case is different ( https://support.google.com/dfp_premium/answer/2694377?hl=en&ref_topic=4390040 )

My goal is to have a common ad container element for common template pages, and for each pageTransition where the taxonomy is different request a new advert.

The current tests I did so far, try to just change the slotName and then call refresh() but it doesn't seem to work! For example (was way more complex than the following example, but just to expose the point):

<!DOCTYPE html>
<html>
<head>
  <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
  <script>
    var myAddSlot
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
  </script>

  <script>
    googletag.cmd.push(function() {
      myAddSlot = googletag.defineSlot('/6355419/Travel/Europe/France/Paris', ['fluid'], 'div-common-ad-container')
                  .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>
<body>
  <div id='div-common-ad-container' />
  <button id="refresh">refresh</button>
  <script>
  googletag.cmd.push(function() { googletag.display('div-common-ad-container'); });
  document.querySelector('#refresh').addEventListener('click', function () {
    googletag.destroySlots()
    googletag.cmd.push(function() {
      myAddSlot = googletag.defineSlot('/6355419/Travel', ['fluid'], 'div-common-ad-container')
                  .addService(googletag.pubads());
      googletag.enableServices();
    });
  })
  </script>
</body>
</html>

Solution

This may be useful for someone else in the future. Not sure if it's the best approach, but it works.

I'm destroying the slot with the method provided by gpt and also clearing the container element and the data-google-query-id attribute!

<!DOCTYPE html>
<html>
<head>
  <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
  <script>
    var myAddSlot
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
  </script>

  <script>
    googletag.cmd.push(function() {
      myAddSlot = googletag.defineSlot('/6355419/Travel/Europe/France/Paris', ['fluid'], 'div-common-ad-container')
                  .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>
<body>
  <div id='div-common-ad-container'></div>
  <button id="refresh">refresh</button>
  <script>
  googletag.cmd.push(function() { googletag.display('div-common-ad-container'); });
  document.querySelector('#refresh').addEventListener('click', function () {
    googletag.destroySlots()
    document.querySelector('#div-common-ad-container').setAttribute('data-google-query-id', '')
    document.querySelector('#div-common-ad-container').innerHTML = ''
    googletag.cmd.push(function() {
      myAddSlot = googletag.defineSlot('/6355419/Travel/Europe', ['fluid'], 'div-common-ad-container')
                  .addService(googletag.pubads());
      googletag.enableServices();
      googletag.display('div-common-ad-container');
    });
  })
  </script>
</body>
</html>