4

私は現在、ページ遷移に pushstateを使用するサイトの開発者です。

サイトはGoogle DFP Adsを使用しており、ページ遷移/ルートごとに更新されます

Internet Explorerに問題があることに気付きました

私はWindows 7、IE10を使用しています。

googletag.pubads().refresh(GOOGLE_ADS);

window.history スタックのエントリを削除するため、戻るボタンを使用すると誤ったエントリが表示されます。

簡単な例

エントリを履歴スタックに追加する

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

window.history.pushState({}, 'タイトル', '/page_1');
window.history.pushState({}, 'タイトル', '/page_2');
window.history.pushState({}, 'タイトル', '/page_3');
window.history.pushState({}, 'タイトル', '/page_4');

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

広告を更新

googletag.pubads().refresh(GOOGLE_ADS);

履歴の長さを再度確認する

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

戻るボタンを押すと、ランディング ページの前のページに移動します。

IE でこの問題に気付いた人はいますか? DFP ソースを見ると、window.history が数回参照されています。

4

4 に答える 4

2

まったく同じ問題がありました。IE10 および IE11 では、DFP を使用している場合、pushstate はほとんど役に立ちません。

しかし、私たちは解決策を思いつきました。きれいではありませんが、機能します。

広告を読み込む代わりに、iframe を挿入します。その iframe 内で、広告は通常どおり読み込まれます。ただし、その iframe 内で refresh() メソッドを使用することはできず、同じ問題が引き続き発生します。ただし、広告が iframe に読み込まれているときにできることは、iframe 全体を更新することです。そうすることで、広告が更新され、プッシュステート機能はそのまま残ります。

かなり厄介ですが、機能します。iframe への広告の読み込みはいくつかの理由で不適切であるため、これは IE10 と IE11 でのみ行います。

于 2014-11-05T15:57:34.060 に答える
2

まったく同じ問題があります。別のドメインの iframe で広告を実行しても、履歴が失われます。iframe src の変更を履歴イベントとして処理する IE と関係があると思いますが、基本的に Google 広告を使用すると IE のプッシュステートが完全に壊れます。私が見つけた唯一の修正方法は、Google 広告を使用しないことでした。

于 2013-06-04T13:27:34.357 に答える
1

IE10 と IE11 で同じ問題が発生し、非常に残念です。

その価値のために、私はここで見ることができるマイクロソフトにバグを提起しました:

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

時間があれば、バグに追加して、希望に満ちた修正に向けて重みを付けてください。

アダム

于 2014-09-23T05:23:56.640 に答える
0

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 に送信することです。

于 2015-09-29T07:05:59.630 に答える