@acpaas-ui/ngx-analytics

@acpaas-ui/ngx-analytics

This service adds an Angular layer on top of the Google Analytics ga() function.

Usage

import { AnalyticsModule } from '@acpaas-ui/ngx-analytics';

Documentation

Visit our documentation site for full how-to docs and guidelines

Analytics service

Methods

Method	Description
setDimension(key: string, value: string)	Send a custom dimension. More info on dimensions and its parameters can be found in the Google Analytics documentation.
triggerPageView(title?: string, location?: string, page?: string)	Trigger a page view with optional custom parameters. More info on page tracking and its parameters can be found in the Google Analytics documentation.
triggerEvent(category: string, action: string, label?: string, value?: any)	Trigger an event with optional custom parameters. Usually the category is the tagname of the element. More info on event tracking and its parameters can be found in the Google Analytics documentation.

Example

import { AnalyticsModule } from '@acpaas-ui/ngx-analytics';

@NgModule({
    imports: [
        AnalyticsModule
    ]
});

export class AppModule {};

By default there is a page trigger for each route change. To disable this feature for a specific route, add doNotTrack: true to your route's data in app-routing.module.ts.

{
    path: 'home',
    component: HomePage,
    data: {
        doNotTrack: true
    }
}

import { GAService } from '@acpaas-ui/ngx-analytics';

constructor(
    private gaService: GAService
) {}

Set dimension

this.gaService.setDimension('some-dimension', 'some-value');

Trigger page view

Use default parameters:

this.gaService.triggerPageView();

Or use custom parameters:

this.gaService.triggerPageView('custom title', 'custom location', 'custom page');

Trigger event

Trigger an event from the controller:

this.gaService.triggerEvent('button', 'click');

Or trigger an event from the view with the gaEvent directive. This directive sends a click event to GA with the tagname of the element as category, click as action, the inner text as label and the directive input as value.

Trigger event without value:

<button type="button" gaEvent>Switch gender to male with directive</button>

Trigger event with value:

<button type="button" [gaEvent]="activeGender">Switch gender to male with directive</button>

Contributing

Visit our Contribution Guidelines for more information on how to contribute.