Name: angulartics2
Owner: angulartics
Description: Vendor-agnostic analytics for Angular2 applications.
Created: 2015-12-30 19:56:55.0
Updated: 2018-01-16 13:28:32.0
Pushed: 2018-01-19 18:00:25.0
Size: 1478
Language: TypeScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Vendor-agnostic Analytics for Angular Applications. angulartics.github.io/angulartics2
install angulartics2 --save
Angulartics2Module to your root NgModule passing an array of providers to enablert { NgModule } from '@angular/core';
rt { BrowserModule } from '@angular/platform-browser';
rt { RouterModule, Routes } from '@angular/router';
import { Angulartics2Module } from 'angulartics2'; import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
const ROUTES: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, ];
@NgModule({ imports: [
BrowserModule,
RouterModule.forRoot(ROUTES),
// added to imports
Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
], declarations: [AppComponent], bootstrap: [AppComponent], })
te the different imports when [Using Without A Router](#using-without-a-router) or [Using With UI-Router](#using-with-ui-router).
_Required__: Import your providers in the root component. This starts the tracking of route changes.
// component import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
@Component({ … }) export class AppComponent { constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {} }
sage
Tracking events in templates/HTML
rack events you can inject the directive ```angulartics2On``` into any component and use the attributes ```angulartics2On```, ```angularticsAction``` and ```angularticsCategory```:
// component import { Component } from '@angular/core';
@Component({ selector: 'song-download-box', template: `
<div
angulartics2On="click"
angularticsAction="DownloadClick"
[angularticsCategory]="song.name">
Click Me
</div>`,
}) export class SongDownloadBox {}
import { NgModule } from '@angular/core'; import { Angulartics2Module } from 'angulartics2';
@NgModule({ imports: [
Angulartics2Module,
], declarations: [
SongDownloadBox,
] })
ou need event label, you can use
<div angulartics2On=“click” angularticsAction=“DownloadClick” angularticsLabel=“label-name” angularticsValue=“value” [angularticsCategory]=“song.name” [angularticsProperties]=“{'custom-property': 'Fall Campaign'}“> Click Me
Tracking events in the code
import { Angulartics2 } from 'angulartics2';
constructor(private angulartics2: Angulartics2) { this.angulartics2.eventTrack.next({
action: 'myAction',
properties: { category: 'myCategory' },
}); }
ou need event label, you can use
this.angulartics2.eventTrack.next({ action: 'myAction', properties: {
category: 'myCategory',
label: 'myLabel',
}, });
Configuring the Module
Exclude routes from automatic pageview tracking
string literals or regular expressions to exclude routes from automatic pageview tracking.
Angulartics2Module.forRoot([providers], { pageTracking: {
excludedRoutes: [
/\/[0-9]{4}\/[0-9]{2}\/[a-zA-Z0-9|\-]*/,
'2017/03/article-title'
],
} }),
Remove IDs from url paths
oject/12981/feature` becomes `/project/feature`
Angulartics2Module.forRoot([providers], { pageTracking: {
clearIds: true,
} }),
efault, it removes IDs matching this pattern (ie. either all numeric or UUID) : `^\d+$|^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$`.
can set your own regexp if you need to :
roject/a01/feature` becomes `/project/feature`
Angulartics2Module.forRoot([providers], { pageTracking: {
clearIds: true,
idsRegExp: /^[a-z]\d+$/,
} }),
Remove Query Params from url paths
can be combined with clearIds and idsRegExp
oject/12981/feature?param=12` becomes `/project/12981/feature`
Angulartics2Module.forRoot([providers], { pageTracking: {
clearQueryParams: true,
} }),
Using Without A Router
rning:__ this support is still experiemental
gular/router` must still be installed! However, it will not be used.
import { Angulartics2RouterlessModule } from 'angulartics2/routerlessmodule'; @NgModule({ // … imports: [
BrowserModule,
Angulartics2RouterlessModule.forRoot([Angulartics2GoogleAnalytics]),
], })
Using With UI-Router
rning:__ this support is still experiemental
gular/router` must still be installed! However, it will not be used.
import { Angulartics2UirouterModule } from 'angulartics2/uiroutermodule'; @NgModule({ // … imports: [
BrowserModule,
Angulartics2UirouterModule.forRoot([Angulartics2GoogleAnalytics]),
], })
SystemJS
g SystemJS? If you aren't using `defaultJSExtensions: true` you may need to use:
System.config({
packages: {
"/angulartics2": {"defaultExtension": "js"},
},
});
upported providers
oogle Analytics](/src/lib/providers/ga) (`analytics.js`)
oogle Tag Manager](/src/lib/providers/gtm) (`gtag.js`)
oogle Enhanced Ecom](/src/lib/providers/ga-enhanced-ecom)
issmetrics](/src/lib/providers/kissmetrics)
ixpanel](/src/lib/providers/mixpanel)
iwik](/src/lib/providers/piwik)
egment](/src/lib/providers/segment)
aidu Analytics](/src/lib/providers/baidu)
acebook Pixel](/src/lib/providers/facebook)
pplication Insights](/src/lib/providers/appinsights)
ubspot](/src/lib/providers/hubspot)
dobe Analytics (Omniture)](/src/lib/providers/adobeanalytics)
ntercom](/src/lib/providers/intercom)
oopra](/src/lib/providers/woopra)
licky](/src/lib/providers/clicky)
For other providers
here's no Angulartics2 plugin for your analytics vendor of choice, please feel free to write yours and PR it!
Minimal setup for Google Analytics
e [Google Analytics](/src/lib/providers/ga) if your code snippet contains `analytics.js`
e [Google Tag Manager](/src/lib/providers/gtm) if your code snippet contains `gtag.js`
4 Migration and Breaking Changes
[Release Notes](https://github.com/angulartics/angulartics2/releases/tag/v4.0.0)
ontributing
se see the [CONTRIBUTING](https://github.com/angulartics/angulartics2/blob/master/.github/CONTRIBUTING.md) and [CODE_OF_CONDUCT](https://github.com/angulartics/angulartics2/blob/master/.github/CODE_OF_CONDUCT.md) files for guidelines.
icense
](LICENSE)