@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.