angulartics2-housing
v0.1.4
Published
Vendor-agnostic web analytics for Angular2 applications
Downloads
3
Maintainers
Readme
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
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
- Google Analytics
- Google Tag Manager
- Kissmetrics
- Mixpanel
- Piwik
- Segment
- Baidu Analytics
- Facebook Pixel
- Application Insights
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.