Setting Up Google Analytics In Angular

July 5, 2026

Google Analytics is a powerful tool that can provide valuable insights into how users are interacting with your Angular web development projects. By setting up Google Analytics in your Angular application, you can track key metrics such as user engagement, page views, and conversion rates.

To get started, the first step is to create a Google Analytics account if you don't already have one. Once you have your account set up, you'll need to create a new property for your Angular project. This property will generate a tracking ID, which is a unique code that you'll need to integrate into your Angular application.

Next, you'll want to install the `angular-ga` package, which is a library that makes it easy to incorporate Google Analytics into your Angular project. You can install this package using npm by running the following command in your project directory:

npm install angular-ga --save

After installing the package, you'll need to configure the Google Analytics tracking code in your Angular application. You can do this by adding the following code to your `app.module.ts` file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GoogleAnalyticsService } from 'angular-ga';

@NgModule({
  declarations: [
    // Your components here
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    GoogleAnalyticsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this code snippet, we're importing the `GoogleAnalyticsService` from the `angular-ga` package and adding it to the providers array in our root module. This will allow us to use the service to track events in our Angular application.

Once you've configured the tracking code, you can start tracking events in your Angular application. For example, you can track page views by adding the following code snippet to your component:

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from 'angular-ga';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private gaService: GoogleAnalyticsService) { }

  ngOnInit(): void {
    this.gaService.sendPageView('Home');
  }
}

In this code snippet, we're importing the `GoogleAnalyticsService` and using it to send a page view event with the label 'Home' when the component is initialized. This will track the page view in Google Analytics.

By setting up Google Analytics in your Angular application and tracking key events, you can gain valuable insights into how users are interacting with your project. You can use this data to make informed decisions about the user experience and optimize your application for better performance and engagement.