Prevent update when script not loaded due to Ad Blockers

[jcresencia]

Issue

Some ad blockers like uBlock block the ad request but not the loading of the script. However others like Ghostly and Disconnect block the request for the script making window.googletag to be null.

If window.googletag doesn't exist, it throws errors because googletag functions like googletag.sizeMapping() do not exist when it tries to update the slot.

Solution

Add a check for if the script has been loaded before updating. If not, don't call the configure slot and refresh functions.

[CLAassistant]

All committers have signed the CLA.

[jcresencia]

Not sure how to fix the tests. If any devs can offer some advice?

[jamsea]

@jcresencia at first glance it looks like you're returning a bit too early. There seems to be a case where Bling._adManager.renderAll() should be called even if isScriptLoaded is false here: https://github.com/jcresencia/react-gpt/blob/71ad7aa505e53ff90a9a14a7012830199a4a22ee/src/Bling.js#L423-L425 the tests that are failing are all related to the ad refreshing https://travis-ci.org/nfl/react-gpt/jobs/218520104

I can take a deeper look at the end of the day if you're still stuck. Thanks!

[jcresencia]

The issue I am having is occurring before in this.configureSlot where it calls this.defineSizeMapping but then Bling._adManager.googletag.sizeMapping() doesn't not exists since the script isn't loaded due to the ad block.

[jcresencia]

@jamsea did you get chance to have a look? The other way I can think of is do a bunch of checks for googletag and adSlot !== null in all the functions.

[potench]

I have a feeling #26 fixes this issue by verifying the GPT API is ready. Will take a look at it soon™

[jcresencia]

@potench I don't think it helped. I've tested locally with the change and the problem still occurs.

We are using react-router and react-redux on our site. With the adblocker on, on first load, the page is loaded, the Bling component isScriptLoaded state is false and just renders the empty style div. This is as expected.

When the user transitions to a new page (like going from one article page to another article page), the Bling component is still there (does not unmount) so it does shouldComponentUpdate. isScriptLoaded is still false at this time. When it goes to Line 411 (https://github.com/nfl/react-gpt/blob/master/src/Bling.js#L411). It is true because new props are set (for example new ad targeting params). This will in turn call this.configureSlot which has googletag functions like sizeMapping() but because the script isn't loaded, will fail.

So the issue is it is doing configureSlot with the assumption that the script is loaded. This is before the isScriptLoaded checks on Line 418 and 426.

[jbyers]

I can confirm that #26 doesn't resolve this issue, and the symptoms are as @jcresencia describes. Ghostery on Chrome is an easy way to reproduce errors on component update.