Tracking Events

João Ribeiro edited this page Nov 24, 2016 · 2 revisions

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 }}"></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'}"></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' }});
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.