Adding Google Analytics in Angular 8

As we all know, Google Analytics is the most used site analytics tool. It helps developers and site admins to keep track of user activities in their website and also it offers many features for us to evaluate our site's performance.

An Angular app is a Single Page Application (SPA) and Google Analytics isn't designed to work with Single Page Applications.

Let's see how we can add Google Analytics in Angular Application.

Step 1 : Create and Configure an Angular App

Create an Angular App by running the command

ng new SampleApp

Type y when it prompts whether routing should be enabled or not and choose your preferred style format.

This will create an Angular App "SampleApp" and install all the dependencies in it.

Now let's add some pages and set routing in our app. We are creating 2 components, home and test. 

Type the following command to create 2 components

ng g c home && ng g c test

This will create 2 components home and test and also it'll update app.module.ts.

Now let's make some edits in app-routing.module.ts

Open the project in editor and update the contents of app-routing.module.ts to the following

We've successfully created an Angular app, added 2 components and set up routing.

Step 2 : Set up Firebase Hosting

Run the following command to Initialize Firebase

firebase init

And select the following options

CLI Features you want to use : Hosting

Public Directory : dist/SampleApp

Configure as Single Page App : Yes

Now we initialized Firebase in our project.

Step 3 : Sign up for Google Analytics

1. Go to https://analytics.google.com and click on Admin at the bottom on left sidebar.

2. Click on Create property, choose Web and click on Continue.

3. Fill out the form, copy the url from firebase dashboard.

4. Click on Create

Step 4 : Set up Google Analytics in Our Project

Copy the code from Analytics and place it just above the closing body tag of your index.html. So the index.html will become

Step 5 : Build and Deploy to Firebase

Run the following command to Build and Deploy our App to Firebase

ng build --prod --aot && firebase deploy

Now when someone visits the  Firebase App url ({namespace}.firebaseapp.com), we can track the visits in Analytics dashboard.

So What's the problem here?

Angular is a Single Page Application. When navigating between routes, the page won't reload. Hence Google Analytics Script won't detect the change and send the page view.

How to Fix it?

We need to send the page views programmatically. For that, we need to make some changes in our app.component.ts

Step 6 : Configuring SPA to work with Google Analytics

1. Import Router and NavigationEnd from @angular/router

2. Declare gtag as a function. gtag is the function used by Google Analytics and the function definition is loaded from the remote script located at https://www.googletagmanager.com/gtag/js. Typescript can't detect it. So we need to declare it as a function.

3. Subscribe to NavigationEnd event of Router and send the page view to Google.

So the contents of app.component.ts will become

Now Build and Deploy the App to Firebase by running the following command.

ng build --prod --aot && firebase deploy

When people navigate via routes, our app will send a page view event to Google and we can keep track of them in Analytics Dashboard.

That's it. we've successfully Added Analytics in Angular Single Page Application.