1

The Angular app I am working on has to read the Google Analytics ID from Angular to pass it to ga('create', 'UA-XXXXX-Y') in standard JavaScript on my index.html

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
   !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
   (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
   r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
   }(window,document,'script','//www.google-analytics.com/analytics.js','ga');

   ga('create', $rootScope.googleAnalytics );
   // ga('send', 'pageview');
</script>

The app will serve more then one website and so the Google Analytics code will be change according to the website being served.

The code ga('create', $rootScope.googleAnalytics ); isn't working, throwing an Uncaught ReferenceError: $rootScope is not defined.

The Google Analytics ID is also in a cookie, so I could read it from the cookie in my JavaScript, but isn't there an easier way to do this?

UPDATE: I've gone the route of not putting the GA id in the $rootScope but only in a cookie and calling ga('create', gaFromCookie) in the controller after the cookie is set and not on index.html.

dhuyvetter
  • 544
  • 1
  • 7
  • 19
  • [`angular.element(...).scope()`](https://docs.angularjs.org/api/ng/function/angular.element#methods) return scope for selected element – Grundy Oct 21 '15 at 12:51
  • 1
    Possible duplicate of [AngularJS : How to access the $scope variable in browser's console?](http://stackoverflow.com/questions/13743058/angularjs-how-to-access-the-scope-variable-in-browsers-console) – Grundy Oct 21 '15 at 12:54
  • 1
    Chances are this code is being run before angular has loaded. I would put the `ga` call in a controller somewhere and just run the setup code at load time – Simon H Oct 21 '15 at 13:03
  • there are already modules available for using analytics in angular. Suggest using one of those – charlietfl Oct 21 '15 at 13:08
  • Running Analytics in Angular is working fine, it's just the part of getting the right ID where I'm stuck. The quickest way will probably be to read the ID from cookie where it is already stored. Cleanest way would be to put everything in a module. – dhuyvetter Oct 21 '15 at 13:24
  • I am checking out [angulartics](https://luisfarzati.github.io/angulartics/) but that still relies on `ga('create', 'UA-XXXXX-X')` which doesn't bring me closer to adding the UA code dynamically. [angular-google-analytics](https://github.com/revolunet/angular-google-analytics) seems to be a better option for adding multiple IDs within Angular – dhuyvetter Oct 21 '15 at 14:32
  • Hey @dhuyvetter was my suggestion able to help you in any ways? Please share your findings – scniro Oct 23 '15 at 22:39
  • Sorry, I've had to move on to another project and haven't had time to test this out. I'll post my findings here once I have time to look into it. – dhuyvetter Oct 28 '15 at 08:45

1 Answers1

1

The error you are receiving is because this script is running before your angular app is bootstrapped - so we have no idea what a $rootScope is at this point. You could instead call ga() after your app is initialized, or depending on whenever you define $rootScope.googleAnalytics. Observe the following example, where we call a "plain old" function in our module run phase. This would likely be a good place to then call ga(). Observe the following example...

function init(value) {
    ga('create', value);
}

angular.module('app', []).run(function($rootScope) {

    $rootScope.googleAnalytics = 'something'
    init($rootScope.googleAnalytics);
});

JSFiddle Link - simple demo

scniro
  • 16,844
  • 8
  • 62
  • 106