CODEWITHSUNDEEP
javascriptsingle-page-applicationgoogle-publisher-tag
punkbit
punkbit

Reputation: 7707

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>

Upvotes: 1

Views: 5226

Answers (2)

Relis
Relis

Reputation: 138

There exists dedicated method for reloading/refreshing only advertisement without whole page, nicely working with SPA applications

googletag.cmd.push(function () {
    googletag.pubads().refresh();
});

You can wrap it into function and call it, for instance before:

googletag.cmd.push(function () {
  googletag.display('advertisement_div_id_tag_name');
})

Please remember if using refresh function that google has clause. See clause

Important: To comply with Google policy and enable your inventory to compete on Ad Exchange, you must declare which portions of your inventory refresh.

Upvotes: 0

punkbit
punkbit

Reputation: 7707

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>

Upvotes: 0

Related Questions