Google DFP Refresh Ads 删除了 Internet Explorer 10 中的 window.history 堆栈

Question

我目前是一个使用 pushstate 进行页面转换的网站的开发人员。

该网站使用 Google DFP 广告，它在每个页面转换/路线上刷新

我注意到 Internet Explorer 出现问题

我使用的是 Windows 7、IE10。

googletag.pubads().refresh(GOOGLE_ADS);

将删除 window.history 堆栈上的条目，从而导致使用后退按钮的条目不正确。

快速示例

将条目添加到历史堆栈

console.log(window.history.length) // 3

window.history.pushState({}, 'title', '/page_1');
window.history.pushState({}, 'title', '/page_2');
window.history.pushState({}, 'title', '/page_3');
window.history.pushState({}, 'title', '/page_4');

console.log(window.history.length) // 7

刷新广告

googletag.pubads().refresh(GOOGLE_ADS);

再次检查历史长度

console.log(window.history.length) // 3

如果我按下后退按钮，它将转到着陆页之前的页面。

还有其他人在 IE 中注意到这个问题吗？ 查看 DFP 源代码，它多次引用 window.history。

Answer 1

我遇到了完全相同的问题，即使在具有不同域的 iframe 中运行广告仍然会导致历史记录丢失。我相信这与 IE 将 iframe src 更改作为历史事件处理有关，但基本上使用谷歌广告完全破坏了 IE 中的 pushstate。我发现解决的唯一方法是不使用 Google 广告。

Answer 2

我们遇到了完全相同的问题。在 IE10 和 IE11 中，如果您使用的是 DFP，则 pushstate 几乎没用。

但是，我们确实想出了一个解决方案。它不漂亮，但它有效。

我们插入一个 iframe，而不是加载广告。在该 iframe 中，广告照常加载。但是，不能在该 iframe 中使用 refresh() 方法，仍然会出现同样的问题。但是当广告加载到 iframe 中时，您可以做的是刷新整个 iframe。通过这样做，广告将被刷新，并且 pushstate 功能将保持不变。

非常讨厌，但它有效。由于几个原因在 iframe 中加载广告不好，我们只在 IE10 和 IE11 中这样做。

Answer 3

我在使用 IE10 和 IE11 时遇到了同样的问题 - 非常令人失望。

为了它的价值，我向微软提出了一个错误，可以在这里看到：

https://connect.microsoft.com/IE/feedbackdetail/view/979564/ie-pushstate-history-is-corrupted-by-google-adsense-google-dpf-doubleclick-for-publishers-advertising

如果您有时间，请添加您对错误的关注，以使其更加重视有希望的修复。

亚当

Answer 4

正如我在 DFP 帮助论坛上发布的那样：https://productforums.google.com/forum/#!topic/dfp/9BsgVtKTU9A

我有工作解决方案，我使用 jQuery。

if(typeof googletag !== 'undefined' && typeof googletag.pubads !== 'undefined') {
   if(adsCloned === false) {
      var $dfpIframe = $('#div-gpt-ad-1477269112222-0').find('iframe'); // this is ad id that you use in googletag.defineSlot()

      $dfpIframe.each(function (i, v) {
         var $clone = $(v).clone();
         $(v).replaceWith($clone);
      });
      adsCloned = true;
   }
   googletag.pubads().refresh();
}

在此之前你必须定义var adsCloned = false; 它起作用的原因是，当您刷新页面加载后插入的 iframe（在本例中为克隆 iframe）时，历史记录条目不会添加到 IE。

编辑： 如果它对您不起作用，请尝试删除 if statememt：

if(typeof googletag !== 'undefined' && typeof googletag.pubads !== 'undefined') {
       var $dfpIframe = $('#div-gpt-ad-1477269112222-0').find('iframe'); // this is ad id that you use in googletag.defineSlot()

       $dfpIframe.each(function (i, v) {
          var $clone = $(v).clone();
          $(v).replaceWith($clone);
       });
       googletag.pubads().refresh();
    }

上面的代码不起作用 - 我的错误。 但对我来说可行的解决方案是销毁整个 googletag 变量并再次调用整个代码。

dfp 脚本的第一次调用如下所示（注意 googletag.pubads().disableInitialLoad(); 和 gads.id = 'dfpHeadScript';）：

// Doubleclick
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.id = 'dfpHeadScript';
    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);
})();

googletag.cmd.push(function() {
    enovatis.dfpSlots.push( googletag.defineSlot('...', [240, 400], 'div-gpt-ad-1').addService(googletag.pubads()) );
    enovatis.dfpSlots.push( googletag.defineSlot('...', [[960, 100], [750, 100]], 'div-gpt-ad-2').addService(googletag.pubads()) );

    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.pubads().disableInitialLoad();
    googletag.enableServices();
});

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

而刷新广告的方法是：

var dfpInterval = null;
var $dfpTop = $('#div-gpt-ad-1');
var $dfpLeft = $('#div-gpt-ad-2');

function refreshDfp() {

    $dfpTop.empty();
    $dfpLeft.empty();

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

    $('#dfpHeadScript').remove();

    (function() {
        var gads = document.createElement('script');
        gads.async = true;
        gads.id = 'dfpHeadScript';
        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);
    })();

    googletag.cmd.push(function() {
        enovatis.dfpSlots.push( googletag.defineSlot('...', [240, 400], 'div-gpt-ad-1').addService(googletag.pubads()) );
        enovatis.dfpSlots.push( googletag.defineSlot('...', [[960, 100], [750, 100]], 'div-gpt-ad-2').addService(googletag.pubads()) );
        googletag.pubads().enableSingleRequest();
        googletag.pubads().collapseEmptyDivs();
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();

        window.clearInterval(dfpInterval);
        dfpInterval = window.setInterval(function(){
            if(typeof googletag.pubads !== 'undefined'){
                window.setTimeout(function(){
                    googletag.pubads().refresh();
                }, 75);
                window.clearInterval(dfpInterval);
            }
        }, 75);
    });
}

我称之为：refreshDfp.apply(window);，一切正常。 这种方法的唯一缺点是我们每次都向 google 发送更多请求。