Google Analytics Pageview and Angular 2

Posted on by Andrew

There are NPM packages for implementing various analytics providers in Angular 2 but for simpler requirements there isn’t always a reason to include Yet Another Dependency.

At it’s most basic implementation what we usually need to do is track pageviews. To do so we need to watch the Angular 2 router (or your router of choice) and trigger a Google Analytics event.

In your index.html include the Google Analytics script but remove ga('send', 'pageview' ... ):

<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-XX', 'auto');
</script>

Next, in one of our application files (I would recommend the application root but not the application bootstrap file) we need to cachethe current route,add a router subscription and trigger an event if the route changes.

In app.component.ts:

import ...
declare var ga:Function;
export class AppComponent {
  currentRoute: string = '';
  constructor(router: Router) {
    router.subscribe((route) => {
      var newRoute = route || '/';
      if(newRoute !== this.currentRoute) {
        ga('send', 'pageview', newRoute);
        this.currentRoute = newRoute;
    });
  }
}

The above is all pseudo code and needs modification for most use cases, but in general we need to:

  1. Include Google Analytics script in index.html but remove ga('send', 'pageview', ...);
  2. Add declare var ga:Function; to app.component.ts
  3. In app.component.ts cache a version of the previous route.
  4. In the constructor in app.component.ts add a router subscription and if the route changes, use ga('send', 'pageview', ...); to send the update to Google Analytics.

16 thoughts on “Google Analytics Pageview and Angular 2”

      1. router.subscribe(route => {
        let newRoute = route || ‘/’;
        if (newRoute !== this.currentRoute) {
        ga(‘send’, ‘pageview’, newRoute);
        this.currentRoute = newRoute;
        }
        });

      1. router.subscribe(route => {
        let newRoute = route || ‘/’;
        if (newRoute !== this.currentRoute) {
        ga(‘send’, ‘pageview’, newRoute);
        this.currentRoute = newRoute;
        }
        });

    1. This was written when Angular 2 was still in RC so I’m not too surprised. The concepts should remain constant though.

    1. This was written when Angular 2 was still in RC so I’m not too surprised. The concepts should remain constant though.

  5. Is there any way we can pull configure the UA-XXXXXXXX-XX account for dev and prod. Sorry I am new angular2.

    1. Hey Kabs, you certainly could! There are a few ways to handle this, one would be to set environment variables for each depending on the environment you were currently in.

  6. Is there any way we can pull configure the UA-XXXXXXXX-XX account for dev and prod. Sorry I am new angular2.

    1. Hey Kabs, you certainly could! There are a few ways to handle this, one would be to set environment variables for each depending on the environment you were currently in.

Leave a Reply

Your email address will not be published.