angulartics2

• Installation

• Usage

- [Exclude routes from automatic pageview tracking](#exclude-routes-from-automatic-pageview-tracking)
- [Remove IDs from url paths](#remove-ids-from-url-paths)
- [Remove Query Params from url paths](#remove-query-params-from-url-paths)
- [Remove Hash from url paths](#remove-hash-from-url-paths)

• Supported providers

• Contributing
• License

Dependencies

Installation

npm install angulartics2 --save

Include it in your application

1. Add Angulartics2Module to your root NgModule passing any options desired

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { Angulartics2Module } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2';

const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES),

    // added to imports
    Angulartics2Module.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})

Note the different imports when Using Without A Router or Using With UI-Router.

1. Required: Import your providers in the root component. Call startTracking() to start the tracking of route changes.

// component
import { Angulartics2GoogleAnalytics } from 'angulartics2';

@Component({  ...  })
export class AppComponent {
  constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {
    angulartics2GoogleAnalytics.startTracking();
  }
}

Usage

Tracking events in templates/HTML

// component
import { Component } from '@angular/core';

@Component({
  selector: 'song-download-box',
  template: `
    <div 
      angulartics2On="click" 
      angularticsAction="DownloadClick" 
      [angularticsCategory]="song.name">
      Click Me
    </div>
  `,
})
export class SongDownloadBox {}

import { NgModule } from '@angular/core';
import { Angulartics2Module } from 'angulartics2';

@NgModule({
  imports: [
    Angulartics2Module,
  ],
  declarations: [
    SongDownloadBox,
  ]
})

<div 
  angulartics2On="click" 
  angularticsAction="DownloadClick" 
  angularticsLabel="label-name" 
  angularticsValue="value" 
  [angularticsCategory]="song.name" 
  [angularticsProperties]="{'custom-property': 'Fall Campaign'}">
  Click Me
</div>

Tracking events in the code

import { Angulartics2 } from 'angulartics2';

constructor(private angulartics2: Angulartics2) {
  this.angulartics2.eventTrack.next({ 
    action: 'myAction', 
    properties: { category: 'myCategory' },
  });
}

this.angulartics2.eventTrack.next({ 
  action: 'myAction',
  properties: { 
    category: 'myCategory', 
    label: 'myLabel',
  },
});

Configuring the Module

Exclude routes from automatic pageview tracking

excludedRoutes: [
  /\/[0-9]{4}\/[0-9]{2}\/[a-zA-Z0-9|\-]*/,
  '2017/03/article-title'
],

Remove IDs from url paths

clearIds: true,

pageTracking: {
  clearIds: true,
  idsRegExp: new RegExp('^[a-z]\\d+$') /* Workaround: No NgModule metadata found for 'AppModule' */
}

Remove Query Params from url paths

clearQueryParams: true,

Remove Hash from url paths

clearHash: true,

Using Without A Router

BrowserModule,
Angulartics2RouterlessModule.forRoot(),

Using With UI-Router

BrowserModule,
Angulartics2UirouterModule.forRoot(),

SystemJS

System.config({
    packages: {
        "/angulartics2": {"defaultExtension": "js"},
    },
});

Supported providers

• Google Analytics (analytics.js)
• Google Tag Manager
• Google Enhanced Ecom
• Google Global Site Tag (gtag.js)
• Kissmetrics
• Mixpanel
• Matomo
• Segment
• Baidu Analytics
• Facebook Pixel
• Application Insights
• Hubspot
• Adobe Analytics (Omniture)
• Launch, by Adobe (works with DTM, too)
• Incendium
• Intercom
• Woopra
• Clicky
• IBM Digital Analytics
• Splunk
• Pyze

For other providers

Minimal setup for Google Analytics

• See Google Analytics if your code snippet contains analytics.js
• See Google Tag Manager if your code snippet contains gtag.js
• See Google Global Site Tag if your code snippet contains gtag.js

Contributing

License

Related Projects

• analytics-angular: Write analytics code once, collect customer data from any source, and send it to over 250+ destinations with Segment.