Individual Ad Unit Refresh / Infinite Scroll

About this example:

  • Demonstrates the ability to refresh individual ad units. This is useful for infinite scrolling ad slots.
  • Keep in mind that when auto-refreshing is done incorrectly, it could cause the same bids to be rendered repeatedly. For instance, when googletag.pubads.refresh() is called directly without removing the PBJS targeting, the same hb_ variables get re-sent to GAM, re-chosen, and re-rendered over and over without ever asking PBJS for updated targeting variables. See Auction Options for more info.

Individual Ad Unit Refresh / Infinite Scroll

Div-1
<h5>Div-1</h5>
<button class="btn btn-primary mb-3" onclick="refreshBid()">Refresh Ad Unit</button>
<div id='div-1'>
  <script type='text/javascript'>
    googletag.cmd.push(function() {
      googletag.display('div-1');
    });
  </script>
</div>

var sizes = [
    [300, 250]
];
var PREBID_TIMEOUT = 1000;

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

var adUnits = [{
    code: '/19968336/header-bid-tag-0',
    mediaTypes: {
        banner: {
            sizes: sizes
        }
    },
    bids: [{
        bidder: 'appnexus',
        params: {
            placementId: 13144370
        }
    }]
}];

pbjs.que.push(function() {
    pbjs.addAdUnits(adUnits);
});

var slot1;
googletag.cmd.push(function() {
    slot1 = googletag.defineSlot('/19968336/header-bid-tag-0', [[300, 250]], 'div-1')
        .addService(googletag.pubads());
    googletag.pubads().disableInitialLoad();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});

function refreshBid() {
    pbjs.que.push(function() {
        pbjs.requestBids({
            timeout: PREBID_TIMEOUT,
            adUnitCodes: ['/19968336/header-bid-tag-0'],
            bidsBackHandler: function() {
                pbjs.setTargetingForGPTAsync(['/19968336/header-bid-tag-0']);
                googletag.pubads().refresh([slot1]);
            }
        });
    });
}

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Individual Ad Unit Refresh / Infinite Scroll</title>

    <!-- required scripts -->
    <script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  </head>
  <body>
  
  <!-- javascript -->
  <script>var sizes = [
    [300, 250]
];
var PREBID_TIMEOUT = 1000;

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

var adUnits = [{
    code: '/19968336/header-bid-tag-0',
    mediaTypes: {
        banner: {
            sizes: sizes
        }
    },
    bids: [{
        bidder: 'appnexus',
        params: {
            placementId: 13144370
        }
    }]
}];

pbjs.que.push(function() {
    pbjs.addAdUnits(adUnits);
});

var slot1;
googletag.cmd.push(function() {
    slot1 = googletag.defineSlot('/19968336/header-bid-tag-0', [[300, 250]], 'div-1')
        .addService(googletag.pubads());
    googletag.pubads().disableInitialLoad();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});

function refreshBid() {
    pbjs.que.push(function() {
        pbjs.requestBids({
            timeout: PREBID_TIMEOUT,
            adUnitCodes: ['/19968336/header-bid-tag-0'],
            bidsBackHandler: function() {
                pbjs.setTargetingForGPTAsync(['/19968336/header-bid-tag-0']);
                googletag.pubads().refresh([slot1]);
            }
        });
    });
}
</script>

  <!-- html -->
  <h5>Div-1</h5>
<button class="btn btn-primary mb-3" onclick="refreshBid()">Refresh Ad Unit</button>
<div id='div-1'>
  <script type='text/javascript'>
    googletag.cmd.push(function() {
      googletag.display('div-1');
    });
  </script>
</div>

  </body>
</html>
This example includes all available adapters and modules. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters and modules are included.

Further Reading