Tracking Google Analytics Page Views with AngularJS

Question

I m setting up a new app using AngularJS as the frontend  Everything on the client side is done with HTML5 pushstate and I d like to be able to track my page views in Google Analytics

User · Answer

For those of you using AngularUI Router instead of ngRoute can use the following code to track page views   app run function   rootScope         rootScope  on   stateChangeSuccess   function  event  toState  toParams  fromState  fromParams            ga  set    page   toState url           ga  send    pageview

User · Answer

I personally like to set up my analytics with the template URL instead of the current path  This is mainly because my application has many custom paths such as message  id or profile  id  If I were to send these paths  I d have so many pages being viewed within analytics  it would be too difficult to check which page users are visiting most    rootScope  on   viewContentLoaded   function event         window ga  send    pageview             page   route current templateUrl replace  views                     I now get clean page views within my analytics such as user-profile html and message html instead of many pages being profile 1  profile 2 and profile 3  I can now process reports to see how many people are viewing user profiles   If anyone has any objection to why this is bad practise within analytics  I would be more than happy to hear about it  Quite new to using Google Analytics  so not too sure if this is the best approach or not

User · Answer

Just a quick addition  If you re using the new analytics js  then   var track   function           ga  send    pageview     page    location path                           Additionally one tip is that google analytics will not fire on localhost  So if you are testing on localhost  use the following instead of the default create  full documentation   ga  create    UA-XXXX-Y     cookieDomain    none

User · Answer

I ve created a simple example on github using the above approach   https   github com isamuelson angularjs-googleanalytics

User · Answer

In your index html  copy and paste the ga snippet but remove the line ga  send    pageview      lt  -- Google Analytics  change UA-XXXXX-X to be your site s ID -- gt   lt script gt     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-XXXXXXXX-X     lt  script gt    I like to give it it s own factory file my-google-analytics js with self injection   angular module  myApp      factory  myGoogleAnalytics           rootScope     window     location        function   rootScope   window   location           var myGoogleAnalytics                           Set the page to the current location path          and then send a pageview to log path change                  myGoogleAnalytics sendPageview   function             if   window ga               window ga  set    page    location path                window ga  send    pageview                                subscribe to events        rootScope  on   viewContentLoaded   myGoogleAnalytics sendPageview          return myGoogleAnalytics                run        myGoogleAnalytics        function myGoogleAnalytics               inject self

User · Answer

I suggest using the Segment analytics library and following our Angular quickstart guide  You   ll be able to track page visits and track user behavior actions with a single API  If you have an SPA  you can allow the RouterOutlet component to handle when the page renders and use ngOnInit to invoke page calls  The example below shows one way you could do this    Component     selector   app-home     templateUrl     home component html     styleUrls      home component css      export class HomeComponent implements OnInit     ngOnInit         window analytics page  Home            I   m the maintainer of https   github com segmentio analytics-angular  With Segment  you   ll be able to switch different destinations on-and-off by the flip of a switch if you are interested in trying multiple analytics tools  we support over 250  destinations  without having to write any additional code

User · Answer

If you re using ng-view in your Angular app you can listen for the  viewContentLoaded event and push a tracking event to Google Analytics   Assuming you ve set up your tracking code in your main index html file with a name of var  gaq and MyCtrl is what you ve defined in the ng-controller directive   function MyCtrl  scope   location   window       scope  on   viewContentLoaded   function event         window  gaq push    trackPageView    location url                UPDATE   for new version of google-analytics use this one  function MyCtrl  scope   location   window       scope  on   viewContentLoaded   function event         window ga  send    pageview     page   location url

User · Answer

Use GA  set  to ensure routes are picked up for Google realtime analytics  Otherwise subsequent calls to GA will not show in the realtime panel    scope  on   routeChangeSuccess   function          window ga  set    page    location url          window ga  send    pageview          Google strongly advises this approach generally instead of passing a 3rd param in  send   https   developers google com analytics devguides collection analyticsjs single-page-applications

User · Answer

If you re using ui-router you can subscribe to the  stateChangeSuccess event like this    rootScope  on   stateChangeSuccess   function  event         window ga  send    pageview    location path           For a complete working example see this blog post

User · Answer

Developers creating Single Page Applications can use autotrack  which includes a urlChangeTracker plugin that handles all of the important considerations listed in this guide for you  See the autotrack documentation for usage and installation instructions

User · Answer

I found the gtag   function worked  instead of the ga   function   In the index html file  within the  lt head gt  section    lt script async src  https   www googletagmanager com gtag js id TrackingId  gt  lt  script gt   lt script gt    window dataLayer   window dataLayer          function gtag   dataLayer push arguments      gtag  js   new Date       gtag  config    TrackingId     lt  script gt    In the AngularJS code   app run function   rootScope   location       rootScope  on   routeChangeSuccess   function         gtag  config    TrackingId     page path    location path                  Replace TrackingId with your own Tracking Id

User · Answer

Merging even more with Pedro Lopez s answer   I added this to my ngGoogleAnalytis module which I reuse in many apps    var base      base   attr  href   replace               in this case  I have a  tag in my index link      lt base href   store   gt    it s useful when using html5 mode on angular js v1 3    remove the replace   function call if your base tag doesn t finish with a slash     angular module  ngGoogleAnalytics       run    rootScope     location     window       function  rootScope   location   window           rootScope  on   routeChangeSuccess           function event              if    window ga    return              var base      base   attr  href   replace                         window ga  send    pageview                 page  base    location path

User · Answer

The best way to do this is using Google Tag Manager to fire your Google Analytics tags based on history listeners  These are built in to the GTM interface and easily allow tracking on client side HTML5 interactions     Enable the built in History variables and create a trigger to fire an event based on history changes

User · Answer

Merging the answers by wynnwu and dpineda was what worked for me   angular module  app          run    rootScope     location     window       function  rootScope   location   window           rootScope  on   routeChangeSuccess           function event              if    window ga                return                         window ga  send    pageview                 page   location path                                           Setting the third parameter as an object  instead of just  location path    and using  routeChangeSuccess instead of  stateChangeSuccess did the trick   Hope this helps

User · Answer

I am using AngluarJS in html5 mode  I found following solution as most reliable   Use angular-google-analytics library  Initialize it with something like     Do this in module that is always initialized on your webapp     angular module  core   config   AnalyticsProvider     function  AnalyticsProvider        AnalyticsProvider setAccount YOUR GOOGLE ANALYTICS TRACKING CODE          Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event     AnalyticsProvider ignoreFirstPageLoad true             After that  add listener on  stateChangeSuccess  and send trackPage event   angular module  core   run    rootScope     location    Analytics        function  rootScope   location  Analytics             rootScope  on   stateChangeSuccess   function event  toState  toParams  fromState  fromParams  options                try                   Analytics trackPage  location url                               catch err                    user browser is disabling tracking                                       At any moment  when you have your user initalized you can inject Analytics there and make call   Analytics set   amp uid   user id

User · Answer

I am using ui-router and my code looks like this    rootScope  on   stateChangeSuccess   function event  toState  toParams        Google analytics      var path   toState url    for var i in toParams       path   path replace       i  toParams i             global ga      ga  send    pageview   path         This way I can track different states  Maybe someone will find it usefull

User · Answer

app run function   rootScope   location         rootScope  on   routeChangeSuccess   function            ga  send    pageview    location path

User · Answer

When a new view is loaded in AngularJS  Google Analytics does not count it as a new page load  Fortunately there is a way to manually tell GA to log a url as a new pageview    gaq push    trackPageview     lt url gt      would do the job  but how to bind that with AngularJS   Here is a service which you could use    function angular        angular module  analytics     ng    service  analytics           rootScope     window     location   function  rootScope   window   location          var track   function              window  gaq push    trackPageview    location path                      rootScope  on   viewContentLoaded   track                  window angular      When you define your angular module  include the analytics module like so   angular module  myappname     analytics       UPDATE   You should use the new Universal Google Analytics tracking code with    window ga  send    pageview    page   location url

User · Answer

If you are looking for full control of Google Analytics s new tracking code  you could use my very own Angular-GA    It makes ga available through injection  so it s easy to test  It doesn t do any magic  apart from setting the path on every routeChange  You still have to send the pageview like here   app run function   rootScope   location  ga         rootScope  on   routeChangeSuccess   function            ga  send    pageview                  Additionaly there is a directive ga which allows to bind multiple analytics functions to events  like this    lt a href     ga     set    metric1   10     send    event    player    play   video id    gt  lt  a gt

User · Answer

I ve created a service   filter that could help you guys with this  and maybe also with some other providers if you choose to add them in the future   Check out https   github com mgonto angularytics and let me know how this works out for you

User · Answer

If someone wants to implement using directives then  identify  or create  a div in the index html  just under the body tag  or at same DOM level    lt div class  google-analytics   gt    and then add the following code in the directive  myApp directive  googleAnalytics   function    location   window       return       scope  true      link  function  scope          scope  on    routeChangeSuccess   function               window  gaq push    trackPageview    location path

[google-analytics] Tracking Google Analytics Page Views with AngularJS

Examples related to google-analytics

Examples related to angularjs