Integrating Google Analytics with an Angular application enables you to gather valuable data about your app's performance. Don't worry if this sounds complicated: our blog will guide you through the steps you need to take.
Let's dive in!
Before we dig in I want to show you something. I promise it's worth it...
Google Analytics is great, but also complex and a bit clunky. If you just want a straightforward dashboard with the insights you need, GA is not a great place to start. Additionally, Google doesn't care about privacy and GA requires an annoying cookie banner.
That's why I built Simple Analytics, a privacy-friendly and simple analytics tool - no personal data, no cookies, just the insights you need in a straightforward dashboard.
Here is how it looks vs GA. Feel free to check our live analytics to get an idea for your project. (It is free btw!)
All right, enough about us. Now let's get into answering your question!
Step-by-step integration
Set Up a Google Analytics Property
If you haven't already, create a GA property. Once set up, you'll receive a "Measurement ID" (like 'G-XXXXXXXXXX').
Install Angular Google Analytics Library
There are several libraries available for integrating GA with Angular, such as angular-gtag. Install it using npm:
npm install angular-gtagConfigure the Angular Module
In your Angular app, import the library in the app.module.ts and add it to the imports array:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GtagModule } from 'angular-gtag';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GtagModule.forRoot({ trackingId: 'YOUR_MEASUREMENT_ID', trackPageviews: true })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Replace 'YOUR_MEASUREMENT_ID' with your actual GA Measurement ID.
Implement Tracking in Components
You can now use the Gtag service in your components to track page views or specific events:
import { Component } from '@angular/core';
import { Gtag } from 'angular-gtag';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
constructor(private gtag: Gtag) {
this.gtag.event('screen_view', {
'app_name': 'myApp',
'screen_name': 'Home'
});
}
}Testing and Deployment
After implementing the tracking code, deploy your application. Use the Google Analytics dashboard to verify that data is being received. You can also use browser extensions like the Google Analytics Debugger for Chrome to debug and verify the tracking.
After Implementation
After adding GA to your Angular project, you may want to identify key user interactions in your app that you wish to track with GA's custom event tracking feature. Also, make sure that you do all you need to stay compliant with applicable laws, including collecting cookies consent for GDPR compliance.
(Optional) Create New Properties
To track multiple apps, create more GA properties and use the corresponding Measurement IDs. This prevents GA from conflating the data.
Final Thoughts
Adding Google Analytics to your Angular project can give you great insight. However, ask yourself: is Google Analytics the right tool for you?
GA is an overpowered solution for straightforward analytics. If you're looking for a simple and intuitive dashboard with the insights you need, there are better alternatives. Yes, I’m talking about my own product (Simple Analytics), but there are others out there as well.
I hated using Google Analytics for my projects. It's clunky, there are hundreds of dashboards and it doesn't look appealing. Also Google doesn't care about privacy or ethics. That's why I decided to build my own and more intuitive web analytics tool.
If this resonates with you, feel free to give Simple Analytics a spin. You just need to add the script to your app and off you go. This takes about one minute- and there is a free version as well!
Enjoy!