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 }}"></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' }});