Google Analytics is Breaking my Angularjs Application When Adblocker is on

Question

I have the following chrome plugin installed uBlock Origin , And i am using angular-google-analytics in my angular application. The adblocker is blocking angular-google-analytics.js script. Due to that i am getting injector modular error.

To solve that issue i have written it in the following way -

try {
  // Check if the below module is available
  angular.module('angular-google-analytics');
  angular.module('myApp').requires.push('angular-google-analytics');
  angular.module('myApp').config(function(AnalyticsProvider) {
    AnalyticsProvider.setAccount('API', 'KEY');
    AnalyticsProvider.trackPages(!0),
    AnalyticsProvider.setDomainName("www.test.com"),
    AnalyticsProvider.useAnalytics(!0),
    AnalyticsProvider.useECommerce(!0, !0)
    AnalyticsProvider.setCurrency('INR');
}).run(function(Analytics) {});
  console.log("GA available");
} catch(e) {
  // statements
  console.error("GA not available"+ e);
}

And to use the dependency in other controllers/ services

if ($injector.has('angular-google-analytics'))
        var Analytics = $injector.get('angular-google-analytics');

And this dependency is there in many controllers.

So my question is, is this the best way? Or is there any alternative better way that can be applicable?

Answer 1

Can you share the Google Analytics code?

You already put a try over the injector, that it's ok, but the Adbloquer sometimes stop the JS file but not the execution of GA, in that case if the injector is printed properly you're not protected from the futures error. Then when it tries to do a "create" or launch a new "pageview" the code will not found the object and crushes the entire Javascript (Angular works over JS).

you can try to surround with a try Catch over the GA code and not over the injector

<script>    
        try {
        <!-- Google Analytics -->
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXX-Y', 'auto');
        ga('send', 'pageview');
        <!-- End Google Analytics -->
    }
    catch(err) {
        ga  =  function(){return false};
    }
</script>

I added a ga object in the case you got some events or virtual page views, to avoid more errors, tell us if it works for you