By default, Angular does not work very well with Google Analytics. It will only announce a page-view event when refreshing the page. This makes the router in Angular somewhat useless.

Luckily, there is an npm package called angular-gtag that hooks into the root app component of your Angular project and sends views upon router navigation.

However, I found that the README had a few implicit steps that I needed to do some searching for. To save others time, I’ve compiled my steps into this article.

Getting Started

Install and configure the package according to the README.md for angular-gtag on GitHub. Ensure that the steps you take match the steps outlined here as well as the ones on the README.

In app.module.ts, add the import at the top, and include it in the imports section:

// ... other imports
import { GtagModule } from 'angular-gtag';

@NgModule({
    declarations: [
        AppComponent
        // other declarations
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        GtagModule.forRoot({ trackingId: 'UA-100102030-1', trackPageviews: true })
        // other imports
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

In app.component.ts, add the import at the top for Gtag, and add it to the constructor:

import { Component } from '@angular/core';
import { DataService } from './data.service';
import { Gtag } from 'angular-gtag';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    constructor(public data: DataService, gtag: Gtag) {
        this.data.getArticles();
        this.data.getArticleList();
        this.data.getCategories();
    }
    // ... other things

Finally, modify the script for Google Analytics to ignore running the site from localhost so that the package works properly locally - edit the <head> section of index.html:

<script>
    var host = window.location.hostname; // add this
    if (host !== "localhost") { // add  this
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-100102030-1', { 'send_page_view': false }); // added the 'send_page_view' parameter as instructed by angular-gtag's readme
    } else { // add this
        function gtag() {} // add this
    } // add this
</script>

Credit for some of these methods goes to a few users in this GitHub issue thread.

Validate

Build your site and validate that it works using Google Analytics' realtime interface.