API Reference

This page details the public API of Angulartics2, including the core service and the declarative directive.

Angulartics2 Service

The core service that provides the Observables (Subjects) for tracking different types of events. You inject this service into your components or services to programmatically trigger tracking events.

import { Angulartics2 } from 'angulartics2';

constructor(private angulartics2: Angulartics2) { ... }

Properties

All tracking properties are ReplaySubject instances from RxJS. You emit a new value to these subjects to trigger a tracking event.

  • pageTrack: ReplaySubject<Partial<PageTrack>>

    Sends a page view event. This is usually handled automatically by the router integration, but can be called manually for virtual page views. 

    this.angulartics2.pageTrack.next({ path: '/virtual/page' });

  • eventTrack: ReplaySubject<Partial<EventTrack>>

    Sends a custom event. 

    this.angulartics2.eventTrack.next({
  action: 'PlayVideo',
  properties: { category: 'Media', label: 'Product Intro' }
});

  • exceptionTrack: ReplaySubject<any>

    Tracks an error or exception. The payload can be an error object or a descriptive string. 

    this.angulartics2.exceptionTrack.next('Failed to load resource');

  • setUsername: ReplaySubject<string>

    Associates subsequent events with a user ID. 

    this.angulartics2.setUsername.next('user-123');

  • setAlias: ReplaySubject<string>

    Sets an alias for the user. Useful for providers like Mixpanel or Segment. 

    this.angulartics2.setAlias.next('new-user-alias');

  • setUserProperties: ReplaySubject<any>

    Sets properties on the current user's profile. 

    this.angulartics2.setUserProperties.next({ plan: 'premium', logins: 27 });

  • setUserPropertiesOnce: ReplaySubject<any>

    Sets properties on the current user's profile, but only if they haven't been set before. 

    this.angulartics2.setUserPropertiesOnce.next({ signUpDate: '2023-01-01' });

  • setSuperProperties: ReplaySubject<any>

    Sets super properties that are sent with every subsequent event. 

    this.angulartics2.setSuperProperties.next({ appVersion: '2.5.0' });

  • setSuperPropertiesOnce: ReplaySubject<any>

    Sets super properties only if they haven't been set before. 

    this.angulartics2.setSuperPropertiesOnce.next({ initialReferrer: 'google' });

  • userTimings: ReplaySubject<UserTimings>

    Tracks user timing events (e.g., resource load times). 

    this.angulartics2.userTimings.next({
  timingCategory: 'resources',
  timingVar: 'load-large-image',
  timingValue: 1230
});

angulartics2On Directive

A directive for declaratively tracking DOM events in your HTML templates.

Selector

[angulartics2On]

Inputs

  • @Input('angulartics2On') angulartics2On: string; The name of the DOM event to listen to (e.g., 'click', 'submit', 'mouseover').

  • @Input() angularticsAction: string; Required. The name of the event to track (e.g., 'ButtonClick').

  • @Input() angularticsCategory: string; The category for the event.

  • @Input() angularticsLabel: string; The label for the event.

  • @Input() angularticsValue: string; A numeric value for the event.

  • @Input() angularticsProperties: any = {}; An object of additional custom properties to send with the event.

Example

<button
  angulartics2On="click"
  angularticsAction="SignUp"
  angularticsCategory="Authentication"
  angularticsLabel="Header Button"
  [angularticsProperties]="{ 'location': 'homepage-header' }"
>
  Sign Up
</button>

Data Interfaces

  • PageTrack

    interface PageTrack {
  path: string;
}

  • EventTrack

    interface EventTrack {
  action: string;
  properties: any;
}

  • UserTimings

    interface UserTimings {
  timingCategory: string;
  timingVar: string;
  timingValue: number;
  timingLabel?: string;
}