Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    @rezonant/angulartics2
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    angulartics2

    NPM version NPM downloads devDependency Status Build Status

    MIT license Gitter Chat

    Vendor-agnostic analytics for Angular2 applications. angulartics.github.io

    Install

    npm install angulartics2 --save

    If you use SystemJS to load your files, you might have to update your config with this if you don't use defaultJSExtensions: true:

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

    Minimal setup for Google Analytics

    Add the full tracking code from Google Tag Manager to the beginning of your body tag.

    Changes in the Google Analytics snippet

    The snippet code provided by Google Analytics does an automatic pageview hit, but this is already done by Angulartics (unless you disable it) so make sure to delete the tracking line:

          ...
          ga('create', 'UA-XXXXXXXX-X', 'none'); // 'none' while you are working on localhost
          ga('send', 'pageview');  // DELETE THIS LINE!
        </script>

    Include it in your application

    Bootstrapping the application with Angulartics2 as provider and injecting Angulartics2GoogleAnalytics (or every provider you want to use) into the root component will hook into the router and send every route change to your analytics provider.

    // 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 ]
    })

    Tracking events

    To track events you can inject the directive angulartics2On into any component and use the attributes angulartics2On, angularticsEvent and angularticsCategory:

    // component
    import { Component } from '@angular/core';
     
    @Component({
      selector: 'song-download-box',
      template: `<div angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="{{ song.name }}">Click Me</div>`,
    })
    export class SongDownloadBox {}
     
    import { NgModule } from '@angular/core';
    import { Angulartics2Module } from 'angulartics2';
     
    @NgModule({
      imports: [
        Angulartics2Module.forChild()
      ],
      declarations: [
        SongDownloadBox
      ]
    })

    If you need event label, you can use

    <div angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="{{ song.name }}" [angularticsProperties]="{label: 'Fall Campaign'}">Click Me</div>

    Tracking events in the code

    Import Angulartics2

    import { Angulartics2 } from 'angulartics2';

    and inject it

    constructor(angulartics2: Angulartics2) {}

    Then you can use

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

    If you need event label, you can use

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

    Supported providers

    For other providers

    Browse the website for detailed instructions.

    If there's no Angulartics2 plugin for your analytics vendor of choice, please feel free to write yours and PR' it!

    What else?

    See more docs and samples at Wiki.

    Contributing

    Please see the CONTRIBUTING and CODE_OF_CONDUCT files for guidelines.

    License

    MIT

    Install

    npm i @rezonant/angulartics2

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar