GPT 在同一 div 元素中重新加载广告

Question

对于单页应用程序，我想知道是否可以请求新广告来替换 div 容器中的现有广告

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())

我目前找到的示例，确认可以刷新现有 slots，但我的用例不同 (https://support.google.com/dfp_premium/answer/2694377?hl=en&ref_topic=4390040)

我的目标是为通用模板页面和分类法不同的每个 pageTransition 提供一个通用广告容器元素请求新广告。

到目前为止我所做的当前测试，尝试只更改 slotName 然后调用 refresh() 但它似乎不起作用！例如（比下面的例子复杂得多，但只是为了说明这一点）：

<!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>

Answer 1

这可能对以后的其他人有用。不确定这是否是最佳方法，但它确实有效。

我正在使用 gpt 提供的方法销毁槽，同时清除容器元素和 data-google-query-id 属性！

<!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>

Answer 2

存在专门的方法 reloading/refreshing 只有广告而不是整个页面，很好地与 SPA 应用程序一起工作

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

你可以把它包装成函数调用它，例如之前：

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

如果使用刷新功能请记住google有子句。参见 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.

GPT 在同一 div 元素中重新加载广告

GPT reload ad in the same div element

javascript

single-page-application

gpt

google-publisher-tag