A bridge package between Angular application and Google Analytics API (gtag.js
).
- Page view tracking
- Custom event tracking
- User timing tracking
-
[clAnalyticsOn]
directive for tracking DOM events
# install peer dependencies
$ yarn add -D @types/gtag.js
# install this package
$ yarn add @classi/ngx-google-analytics
ngx-google-analytics depends on window.gtag
variable.
Setup gtag.js following offitial guide: https://developers.google.com/analytics/devguides/collection/gtagjs
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
import { ApplicationConfig } from '@angular/core';
import { provideGoogleAnalytics } from '@classi/ngx-google-analytics';
export const appConfig: ApplicationConfig = {
providers: [
provideGoogleAnalytics({})
],
};
AnalyticsTrackerConfig
Options
-
startTrackingOnInit?: boolean
: Start tracking automatically when the application is initialized. -
disableTracking?: boolean
: Disable all tracking. Usually for development.
If you set startTrackingOnInit: true
in AnalyticsTrackerConfig
, you can skip this step.
To track all page view events with Angular router, start tracking before the initial navigation.
Typically, the best place to start tracking is the constructor of AppComponent
.
export class AppComponent {
constructor(private readonly analytics: AnalyticsTracker) {
this.analytics.startTracking();
}
}
The central API of @classi/ngx-google-analytics
.
export class AppComponent {
constructor(private readonly analytics: AnalyticsTracker) {
this.analytics.startTracking();
}
setUserId(userId: string) {
this.analytics.setUserContext({ id: userId });
this.analytics.clearUserContext();
}
}
export class AppComponent {
constructor(private readonly analytics: AnalyticsTracker) {
this.analytics.startTracking();
}
setCustomDimensions(dimensions: Record<string, string>) {
this.analytics.setCustomDimensions(dimensions);
}
}
export class AppComponent {
constructor(private readonly analytics: AnalyticsTracker) {
this.analytics.startTracking();
}
sendCustomEvent() {
this.analytics.sendEvent({
name: 'click',
// optional
params: {
event_category: 'test',
event_label: 'foobar',
value: 100,
},
});
}
}
export class AppComponent {
constructor(private readonly analytics: AnalyticsTracker) {
this.analytics.startTracking();
}
sendUserTiming() {
const before = window.performance.now();
doSomething().then(() => {
const after = window.performance.now();
this.analytics.sendUserTiming({
name: 'something',
params: {
value: Month.round(after - before), // * required
event_category: 'test',
event_label: 'foobar',
},
});
});
}
}
A directive to bind single DOM event and event tracking.
Import GoogleAnalyticsModule
to enable it.
@Component({
standalone: true,
imports: [GoogleAnalyticsModule],
template: `<button clAnalyticsOn="click" [analyticsEvent]="clickEvent">Buy</button>`,
})
export class SomeComponent {}
-
clAnalyticsOn="{{eventName}}"
: Set a DOM event to track. -
[analyticsEvent]="event"
: Set event fields. See details insendEvent
document.
- Run tests:
npm run test google-analytics