Vendor-agnostic analytics for Angular2 applications. angulartics.github.io
npm install angulartics2 --saveIf 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"}
}
});Add the full tracking code from Google Tag Manager to the beginning of your body tag.
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>Bootstrapping the application with Angulartics2 as provider and injecting both Angulartics2 and Angulartics2GoogleAnalytics (or any provider) into the root component will hook into the router and send every route change to your analytics provider.
// component
import {Angulartics2GoogleAnalytics} from 'angulartics2/src/providers/angulartics2-google-analytics';
import {Component} from 'angular2/angular2';
@Component({
selector: 'app',
providers: [Angulartics2GoogleAnalytics],
template: `<router-outlet></router-outlet>` // Or what your root template is.
})
export class AppComponent {
constructor(angulartics2: Angulartics2, angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {}
}
// bootstrap
import {bootstrap} from 'angular2/bootstrap';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {Angulartics2} from 'angulartics2';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
Angulartics2
]);To track events you can inject the directive angulartics2On into any component and use the attributes angulartics2On, angularticsEvent and angularticsCategory:
import {Angulartics2On} from 'angulartics2';
import {Component} from 'angular2/angular2';
@Component({
selector: 'song-download-box',
directives: [Angulartics2On],
template: `<div angulartics2On="click" angularticsEvent="DownloadClick" angularticsCategory="{{ song.name }}"></div>`,
})
export class SongDownloadBox {}- Google Analytics
- Kissmetrics
- Mixpanel
- Segment
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!
See more docs and samples at http://angulartics.github.io.