Add Google Analytics to an Angular app
Here's how you can add Google Analytics to an Angular app using Google's Tag Manager.
Environment variable
We'll start by adding the Google Analytics Property ID to the Angular application's environment variables.
Open the environment.ts
and add the following.
export const environment = {
production: false,
googleAnalyticsId: undefined,
};
Now, open the environment.prod.ts
and add the following.
export const environment = {
production: true,
googleAnalyticsId: '[G-YOUR-KEY-HERE]',
};
Make sure to replace [G-YOUR-KEY-HERE]
with your actual Google Analytics ID.
Service class
Let's create a GoogleAnalyticsService
in a file called googleAnalytics.service.ts
. This file can be placed in an analytics
folder within the Angular app
folder. Add the following code to this new file.
import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { environment } from '../../environments/environment';
declare var gtag: Function;
@Injectable({
providedIn: 'root',
})
export class GoogleAnalyticsService {
constructor(private router: Router) {}
public initialize() {
this.onRouteChange();
// dynamically add analytics scripts to document head
try {
const url = 'https://www.googletagmanager.com/gtag/js?id=';
const gTagScript = document.createElement('script');
gTagScript.async = true;
gTagScript.src = `${url}${environment.googleAnalyticsId}`;
document.head.appendChild(gTagScript);
const dataLayerScript = document.createElement('script');
dataLayerScript.innerHTML = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${environment.googleAnalyticsId}', {'send_page_view': false});`;
document.head.appendChild(dataLayerScript);
} catch (e) {
console.error('Error adding Google Analytics', e);
}
}
// track visited routes
private onRouteChange() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
gtag('config', environment.googleAnalyticsId, {
page_path: event.urlAfterRedirects,
});
}
});
}
// use gtag.js to send Google Analytics Events
public event(action: string, eventCategory?: string, eventLabel?: string, value?: string) {
gtag('event', action, {
...(eventCategory && { event_category: eventCategory }),
...(eventLabel && { event_label: eventLabel }),
...(value && { value: value }),
});
}
}
Invoke the service
We'll now modify the AppComponent
in the app.component.ts
file. We'll assume that AppComponent
is the component in the application that contains the <router-outlet>
tag in its template. If that's not the case, then you can modify the corresponding component and template instead.
import { Component, OnInit } from '@angular/core';
import { environment } from '../environments/environment';
import { GoogleAnalyticsService } from './analytics/google-analytics.service';
@Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
})
export class AppComponent implements OnInit {
constructor(private readonly googleAnalyticsService: GoogleAnalyticsService) {}
ngOnInit() {
if (environment.production) {
this.googleAnalyticsService.initialize();
}
}
}
In this component, we are calling the initialize
function as early as possible within ngOnInit
. In this example, we make sure to add analytics tracking only to the production
environment of the application.
Testing it out
To test that Google Analytics has been added properly, we can add console.log
statements in the GoogleAnalyticsService
class.
private onRouteChange() {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
gtag('config', environment.googleAnalyticsKey, {
'page_path': event.urlAfterRedirects,
});
console.log('Sending Google Analytics tracking for: ', event.urlAfterRedirects);
console.log('Google Analytics property ID: ', environment.googleAnalyticsKey);
}
});
}
We should now see the two statements being logged to our console every time that we navigate to a new route within the Angular application.