Angulartics2 — A Powerful Analytics tool for Angular Applications

We’ve created the open-source library Angulartics2 to plug into your Angular single page app (SPA) for analytics integration. It allows you to do event tracking and it is ready to integrate with Google Analytics, Google Tag Manager, Kissmetrics, Mixpanel, Piwik, Segment, Baidu Analytics and Facebook Pixel.

Problem

Most analytics providers do not automatically track the browser’s navigation history, making it difficult to track Single Page Applications (SPAs) like Angular applications.

Simple Solution

To tackle this problem we developed a simple open-source library called Angulartics2. By plugging Angulartics2 in your Angular apps it will automatically track navigation events and send them to your plugged-in Provider, such as Google Analytics.

Angulartics2 also comes with easy ways to send custom events to your providers enabling you to easily send any kind of event such as when your users buy an article or download a file. This is mostly useful for tracking conversion within your apps.

Diving into some simple code snippets

Plugging Angulartics2 into your Angular app is simple and similar to any other module:

// main component
import { Angulartics2GoogleAnalytics } from 'angulartics2';
import { Component } from '@angular/core';
@Component({
  selector: 'app',
  template: `<router-outlet></router-outlet>` // Or what your root template is.
})
export class AppComponent {
  constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}
// bootstrap
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { Angulartics2Module, Angulartics2GoogleAnalytics } from 'angulartics2';
const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'about', component: AboutComponent }
];
@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES),
    Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ])
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

You have to import Angulartics2Module.forRoot() into your main module and pass an array with the providers you are using.

Then, in your main component, you need to pass each provider to the component constructor function. And that’s it, you now have automatic page tracking.

Make sure you also import the RouterModule into your main module. Angulartics2 uses Router to track your app’s current state.

Tracking Custom Events

After setting up Angulartics2 you can then easily trigger custom events:

// component
import { Component } from '@angular/core';
@Component({
  selector: 'song-download-box',
  template: `
<div angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="{{ song.name }}" [angularticsProperties]="{label: 'Fall Campaign'}">Download</div>
`,
})
export class SongDownloadBox {
  private song:any = {
    name: 'Genesis by Justice'
  }
}
import { NgModule } from '@angular/core';
import { Angulartics2Module } from 'angulartics2';
@NgModule({
  imports: [
    Angulartics2Module.forChild()
  ],
  declarations: [
    SongDownloadBox
  ]
})

You just need to import Angulartics2Module.forChild() in your modules and use angulartics2On directive in your templates.

You can also trigger custom events programmatically, by injecting Angulartics2 service in your components.

// component
import { Component } from '@angular/core';
import { Angulartics2 } from 'angulartics2';
@Component({
  selector: 'my component',
  template: ``,
})
export class MyComponent {
  constructor(angulartics2: Angulartics2) {
    this.angulartics2.eventTrack.next({ action: 'myAction', properties: { category: 'myCategory', label: 'myLabel' }});
  }
}

Angulartics2 is under active development and maintenance and we will be adding new providers based on community’s requests.

We currently support providers for:
– Google Analytics
– Google Tag Manager
– Kissmetrics
– Mixpanel
– Piwik
– Segment
– Baidu Analytics
– Facebook Pixel

As most good work, this could not be done without the help of great contributors. Many thanks for all the help to Nathan Walker, Jonathan Reyes, Niels Kristian, Roland Oldengarm, kris, Tim Elfelt, Matthew Daniels, Adam S. Kirschner, Hongbo Miao, Smithi and Júlio César.

And By The Way,

I’m the Co-Founder of Altar.io — a team of experienced second-time founders & world-class developers and product talents based in London and Lisbon. We help startups and corporates to build great tech products.

If you have a brilliant idea that you want to bring to life — drop me a few lines in a private message and let’s chat! Moreover, consult my profile and access the libraries I’m a contributor for on GitHub.

Thanks for reading,
João