Hello everyone,

PROBLEM

I have been using the forge component Google Analytics Reactive and have been getting the error "Error adding script 'https://www.google-analytics.com/analytics.js' to document 'https://xxx-xxxx.xxxx.xx/? ".

I saw that this question has come up before and people were pointing to ad blockers as a cause for this problem. 

CAUSE

After taking some time to explore this issue, and with help of fellow developers, we found out that it can be ad blockers or the browser privacy settings blocking the script. As an example, here are Edge's privacy settings:

You can see that a strict setting blocks a majority of trackers. Google Analytics (GA) is part of that list. Ad blockers do the same, they also block GA.

ISSUES

The forge component, in its Initialize action ('Init'), uses the OutSystems action 'RequireScript' to add the GA script to the page head. It is in this moment that the error occurs "Error adding script 'https://www.google-analytics.com/analytics.js'" because the browser and the ad blockers do not allow to have that call.

When blocking GA every browser can react differently:

1. it can raise an error log in the console, without the user knowing about it unless they look at it;
2. it can show an error message on the screen, displaying the error to the user;
3. or it can crash the page.

As we were exploring this problem and searching for workarounds we saw all three, with 2 and 3 being the worst scenarios.

SOLUTION BRAINSTORM

We thought of:

• importing the google analytics JS to the module and set it as a required JS with the screen
  -> but this would cause the code to not be up to date and using the new features. Also, when we call for a google event or screen track we will do a POST to google analytics, which will also be blocked and the error will show up;
  
  
• adding some javascript to detect if the browser has an ad block on or strict privacy configurations and avoid requiring the google analytics JS
  -> but such JS (although in some stackoverflow responses) seems to be becoming deprecated. Also, it is very complex to implement since we would need to check which browser we were in and get JS that works for that browser to give us the information about having ad blockers or strict privacy settings on (which does not seem to be very easy to achieve).
  Also we cannot and should not try to change user's privacy settings or unplug their ad blocker.
  
  
• we cannot be the only app that uses GA... other websites should have the same issue, and they did. And this is where the solution started to unravel.
  -> We went to a website that also uses GA with the ad block and strict policies on and saw that error: but silently handled in the console - what we wanted! Took a look in how they were setting their script and found out that they set the script to run asynchronously, a difference to what we had in our script.

Our script

Website working with GA

It is this asynchronous and synchronous call that makes the difference, and it was the synchronous call that was making the error showing on the screen (2) or the page crashing (3):

POSSIBLE SOLUTION

As mentioned before, the forge component, in its Initialize action ('Init'), uses the OutSystems action 'RequireScript'. By default this action adds the required JS to the header as synchronous script. 

So what we did was:

• Cloned the GA forge component initialize action and replaced the Require JavaScript with a script that appends the GA JS to the header as asynchronous function.

var head1 = document.getElementsByTagName('head')[0];
var new_script1 = document.createElement('script');
new_script1.type = 'text/javascript';
new_script1.charset = "utf-8";
new_script1.async = true;
new_script1.src = "https://www.google-analytics.com/analytics.js";
head1.appendChild(new_script1);

RESULTS

When the strict policy and the ad blocker is on:

• No error was shown on the screen and the page no longer crashed (there is still one exception that we are trying to figure out, but for now this change has improved the error handling);
• Google events and track screen are not showing as errors in the console;
• No google analytics data is generated (as it is supposed to since it has been blocked).

When the ad blocker is not on and the privacy policy is standard:

• Google analytics works just fine (YEY!).

GOAL OF THIS POST

• Share the problems we had;
• Share a possible workaround;
• Share with the google analytics forge component team a potential improvement to the component;

ALSO

From this we also learned that it would be nice to have a lot more control of the 'Require Script' action. As such I have given the idea to allow controlling if the required script is sync or async: https://www.outsystems.com/ideas/11797/upgrade-require-script-system-client-action/

THANK YOU

If you were able to read through all this... thank you for reading until the end. A big thank you to my fellow developers that helped with this.

FEEDBACK

What do you think of what we just shared? Any thoughts or improvement ideas?

We look forward to get your feedback.

____________________________________________________________________________________________________________________________

(previous forum posts) 

https://www.outsystems.com/forums/discussion/75476/errorscreen-error-adding-script/

https://www.outsystems.com/forums/discussion/72827/google-analytics-reactive-google-analytics-reactive-javascript-is-being-blocked/