ldippo / angulartics2

angulartics2

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

import {Angulartics2, Angulartics2On} from 'angulartics2';
import {Angulartics2GoogleAnalytics} from 'angulartics2/providers/angulartics2-google-analytics';

bootstrap(AppComponent, [
    Angulartics2
]);


import {Component, View, Injectable} from 'angular2/angular2';

@Injectable()
@Component({
    selector: 'app',
    providers: [Angulartics2GoogleAnalytics]
})
@View({
    template: `<div [angulartics2On]="'click'" [angularticsEvent]="'InitiateSearch'" [angularticsCategory]="'Search'"></div>`,
    directives: [Angulartics2On]
})
export class AppComponent {
    constructor(angulartics2: Angulartics2, angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {
    }
}

for other providers

Browse the website for detailed instructions.

Supported providers

• Google Analytics
• Kissmetrics
• Mixpanel
• Segment

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 http://angulartics.github.io.

License

MIT