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 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.
Looking for Software Development Services?
Get straight to the point, jargon-free advice from a tech expert that has been building award-winning Startups for the past 10 years.
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.
