Angular (or react or whatever) and Google Analytics

Pieterjan De Clippel

4 min readSep 1, 2021

Angular

Install @angular/cli

Open an administrator command prompt
Run npm install --global @angular/cli@latest

Create an angular workspace

Open a command prompt at the location you keep your projects (%USERPROFILE%/source/repos)

Create a new angular workspace

ng new google-analytics --style=scss --routing
cd google-analytics
code .

Build the project

ng build --configuration production

You can now upload the files in dist/google-analytics to your webserver

Setup Google Analytics

Go to analytics.google.com, login with your account, and create a new property. Expand the Advanced options and turn on the switch Create a Universal Analytics property.

After filling out the forms, you end up on the following page

Now follow the instructions on the screen to add the global site tag to your website.

Copy the global site tag, go to the index.html file in VS Code, and paste it at the bottom inside the <head>

Setup Google Tag Manager

Go to tagmanager.google.com
Click on Create account
Fill out the form as shown in the picture

Instructions pop up to install the Google Tag manager. Apply these instructions on the index.html file

Paste the code for the Google Tag Manager above the Global site tag

Paste the noscript tag in the top of the body

These are the only code changes required.

Update the angular app

We can’t test the app without having multiple pages. So now we’ll create some pages as recommended by angular

Go to the app folder and generate the PagesModule

cd src\app
ng g module pages --module app --route .

Now you have to correct the app-routing.module by replacing the '.’ with just an empty string '’

Now go to the PagesModule and create some pages

cd pages
ng g module home --module pages --route home
ng g module about --module pages --route about
ng g module contact --module pages --route contact

Now put some routerLinks on your app.component.html

<body>
<h1>Google Analytics - Google Tag Manager</h1>
<a [routerLink]='["/home"]'>Home</a>
<a [routerLink]='["/about"]'>About</a>
<a [routerLink]='["/contact"]'>Contact</a>
<hr>
<router-outlet></router-outlet>
</body>

Do a quick test on the app by running ng serve --open , exit with ctrl+C .

Now you can publish the app by running ng build --configuration=production and uploading the dist/google-analytics/* files to the webserver.

Configure Tag Manager

Now we need to configure our Tag to publish updates on the historyChange event.

Go to tagmanager.google.com
Navigate to your container and under Tags create a new tag
Under Tag Configuration pick Google Analytics — Universal Analytics
Now you need to point to your Google Analytics registration

Under Google Analytics Settings, open the dropdown and pick New variable
Here you need to enter your Google Analytics Tracking ID. You can copy this from Google Analytics under Property settings