Google DFP Refresh Ads removes window.history stack in Internet Explorer 10

Question

I am currently a developer on a site that uses pushstate for page transitions.

The site uses Google DFP Ads , refresh on each transition / route page

I see a problem in Internet Explorer

I am on Windows 7, IE10 .

googletag.pubads().refresh(GOOGLE_ADS); 

It will delete entries in the window.history stack, as a result of which the use of the return button will have invalid entries.

Quick example

Add entries to the history stack

 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 

Update Ads

 googletag.pubads().refresh(GOOGLE_ADS); 

Check the length of the story again

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

If I clicked the back button, it would go to the page to the landing page.

Does anyone else notice this problem in IE? Looking at the source of DFP, it refers to window.history a couple of times.

Answer 1

I have exactly the same problem, even running ads in an iframe with a different domain still leads to a loss of history. I believe this is because IE treats iframe src as history events, but basically using google ads completely breaks pushstate in IE. The only way I found to fix it was to not use Google ads.

Answer 2

We had the same problem. In IE10 and IE11, pushstate is almost useless if you use DFP.

However, we came up with a solution. This is not very, but it works.

Instead of loading an ad, we insert an iframe. Inside the iframe, the ad loads as usual. However, the refresh () method cannot be used inside an iframe; the same problem will still occur. But what you can do when ads load in the iframe is to update the whole iframe. Thus, the advertisement will be updated and the pushstate functionality will remain untouched.

Pretty nasty, but it works. Since loading ads in iframes is bad for several reasons, we only do this in IE10 and IE11.

Answer 3

I am experiencing the same issue with IE10 and IE11 - very disappointing.

What is its value, I raised a mistake with Microsoft, which can be seen here:

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

If you have time, add that you have come to an error in order to give it more weight for a reliable fix.

Adam

Answer 4

As I posted on the DFP Help Forum: https://productforums.google.com/forum/#!topic/dfp/9BsgVtKTU9A

I have a working solution where I use 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(); } 

before that you need to define var adsCloned = false; The reason it works is when you update the iframe, the inserted post after the page loads (in this case the cloned iframe) the history record is not added to IE.

edit: if this does not work for you, try deleting 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(); } 

The above code does not work - my mistake. But the working solution for me is to destroy the whole googletag variable and call all the code again.

The first call to the dfp script is as follows (note googletag.pubads (). DisableInitialLoad () and 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(); }); 

and the method for updating ads:

 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); }); } 

I call this with refreshDfp.apply(window); and everything works well. The only drawback of this approach is that each time we send more requests to google.