CODEWITHSUNDEEP
javascriptangularjsgoogle-analyticsangularjs-scope
netbrain
netbrain

Reputation: 9304

AngularJS and google analytics with site id stored as a constant in root scope

I've just created a new application using the yeoman generator for angular, and i can see that google analytics is inserted into index.html.

I have added a config constant to my application and made it available to the rootscope through:

angular.module(... ['config',...])
    .run(function ($rootScope,config) {
        $rootScope.config = config
    });

Where my config module looks like this

angular.module('config', [])
    .constant('config', {analytics:{siteId:'UA-12345-1'}})

Now can I change the code to the following such that the analytics site id is inserted and used? Or will the javascript code be evaluated before the contents between the handlebars {{config.analytics.siteId}} ?

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
 <script>
   (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', '{{config.analytics.siteId}}');
   ga('send', 'pageview');
</script>

I can't seem to detect any calls towards the analytics service, i'm guessing there would be an ajax request? but that might be because my app is accessed through localhost?

How can i achieve the desired behavior in this case? Cheers!

Upvotes: 0

Views: 359

Answers (2)

noypi
noypi

Reputation: 991

use $injector.get().

and the answer to your question is no, and your guess is right, the javascript evaluates the ga() function and use the string parameter with the brackets in it.

updates

if i were you, i would use module.run().

run(function(constValue){

   (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', constValue);
   ga('send', 'pageview');

})

Upvotes: 4

Mathieu Bertin
Mathieu Bertin

Reputation: 1624

You should use this module angular-google-analytics

It's perfectly working with angular and really easy to use.

Upvotes: 1

Related Questions