Search
Clear search
Close search
Google apps
Main menu

Reload ads without a page refresh

You can use the refresh functionality of an asynchronous Google Publisher Tag to dynamically reload ads without having to refresh the entire contents of your page.

The refresh functionality only works in asynchronous mode. Calling the refresh() function will request a new ad with an updated correlator value. Learn more the correlator value and Cache-busting with GPT.

In order to implement this functionality, you'll need to generate an asynchronous GPT tag and apply some modifications. The sample implementation shown below will request a new ad from the ad server every 30 seconds. The part of the code you'll need to modify is highlighted.

Sample implementation
<html>
<head>

 <script>
 
    // Load GPT asynchronously
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
    (function() {
      var gads = document.createElement("script");
      gads.async = true;
      gads.type = "text/javascript";
      var useSSL = "https:" == document.location.protocol;
      gads.src = (useSSL ? "https:" : "http:") +
      "//www.googletagservices.com/tag/js/gpt.js";
      var node = document.getElementsByTagName("script")[0];
      node.parentNode.insertBefore(gads, node);
    })();

 </script>

 <script>

   googletag.cmd.push(function() {

    // Define the ad slot
    var slot1 = googletag.defineSlot("/6355419/Travel", [728, 90], "leaderboard").
     setTargeting("test", "refresh").
     addService(googletag.pubads());

   // Start ad fetching
   googletag.enableServices();
   googletag.display("leaderboard");

   // Set timer to refresh slot every 30 seconds
   setInterval(function(){googletag.pubads().refresh([slot1]);}, 30000);
   });

 </script> 

</head>

<body>

<!-- Ad slot to refresh -->
<div id="leaderboard" style="width:728px; height:90px;"></div>

</body>
</html>

Manually testing the refresh() function

To manually test the refresh() function, you can temporarily add a refresh button to your web page by pasting the following code snippet immediately before the </body> tag. When you click the button, all ad slots on the page are refreshed but the page itself is not.

<form onsubmit="googletag.pubads().refresh();return false;">
  <input type="submit" value="refresh" />
</form>
 

Learn more about the way the refresh function works with GPT in the Google Publisher Tag API reference guide. To see another example, see the "Refreshing specific ad slots" section in the Advanced GPT samples.

Was this article helpful?
How can we improve it?