ngx-analytics

• ngx-analytics

- [Include it in your application](#include-it-in-your-application)

- [Tracking events](#tracking-events)
- [Tracking events in the code](#tracking-events-in-the-code)
- [Exclude routes from automatic pageview tracking](#exclude-routes-from-automatic-pageview-tracking)
- [Remove ID's from url paths](#remove-ids-from-url-paths)
- [Remove Query Params from url paths](#remove-query-params-from-url-paths)
- [Using Without A Router](#using-without-a-router)
- [Using With UI-Router](#using-with-ui-router)

- [For other providers](#for-other-providers)
- [Minimal setup for Google Analytics](#minimal-setup-for-google-analytics)

Installation

npm install ngx-analytics --save

Include it in your application

1. Add NgxAnalyticsModule to your root NgModule passing an array of providers to enable

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

import { NgxAnalyticsModule } from 'ngx-analytics';
import { NgxAnalyticsGoogleAnalytics } from 'ngx-analytics/ga';

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

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

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

1. Required: Import your providers in the root component. This starts the tracking of route changes.

// component
import { NgxAnalyticsGoogleAnalytics } from 'ngx-analytics/ga';

@Component({  ...  })
export class AppComponent {
  constructor(ngx-analyticsGoogleAnalytics: NgxAnalyticsGoogleAnalytics) {}
}

Usage

Tracking events

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

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

import { NgModule } from '@angular/core';
import { NgxAnalyticsModule } from 'ngx-analytics';

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

<div 
  ngx-analyticsOn="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 { NgxAnalytics } from 'ngx-analytics';
constructor(private ngx-analytics: NgxAnalytics) {
  this.ngx-analytics.eventTrack.next({
    action: 'myAction', 
    properties: { category: 'myCategory' },
  });
}

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

Exclude routes from automatic pageview tracking

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

Remove ID's from url paths

clearIds: true,

pageTracking: {
  clearIds: true,
  idsRegExp: /^[a-z]\d+$/,
}

Remove Query Params from url paths

clearQueryParams: true,

Using Without A Router

BrowserModule,
NgxAnalyticsRouterlessModule.forRoot([NgxAnalyticsGoogleAnalytics]),

Using With UI-Router

BrowserModule,
NgxAnalyticsUirouterModule.forRoot([NgxAnalyticsGoogleAnalytics]),

Supported providers

• Google Analytics
• Google Tag Manager
• Google Enhanced Ecom
• Kissmetrics
• Mixpanel
• Piwik
• Segment
• Baidu Analytics
• Facebook Pixel
• Application Insights
• Hubspot
• Adobe Analytics (Omniture)
• Intercom
• Woopra
• Clicky

For other providers

Minimal setup for Google Analytics

import {NgxAnalyticsGoogleAnalytics} from "ngx-analytics/ga";


if (environment.production) {
  // ...
  NgxAnalyticsGoogleAnalytics.prototype.createGaSession(environment.googleAnalytics);
}

export const environment = {
  production: true,
  // ...
  googleAnalytics: {
    domain: 'auto',
    trackingId: 'UA-XXXXXXXX-X' // replace with your Tracking Id
  }
};

v4 Migration and Breaking Changes

SystemJS

System.config({
    packages: {
        "/ngx-analytics": {"defaultExtension": "js"},
    },
});

Contributing

License