Skip to main content

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.

Angulartics2 - A Powerful Analytics tool for Angular Applications - Script Editor

 

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.

Related: Explore Our Open Source Projects That Are Used Worldwide

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 you 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.

Do you have a brilliant idea that you want to bring to life?

From the product and business reasoning to streamlining your MVP to the most important features, our team of product experts and ex-startup founders can help you bring your vision to life.

LET'S TALK

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 with 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.

Building a Startup?

Get a straight to the point opinion from someone that has been building award-winning Products for the past 10 years

Wondering how much it will cost you?

Use our pricing simulator to understand how cost can vary depending on your project's size and complexity. Book a call with a product expert to evaluate your project.