How to Integrate Google Analytics in Angular 14 Projects: A Step-by-Step Guide

How to add google analytics in angular projects? Any official library available in npm?

I am looking for a way to integrate google analytics in angular14 projects that will allow me to push page_views conditionally. I want the following scenarios:-

Do not send all the page views, send a few only

Only include user sessions for those who has access to specific modules. If user logs in and landed in home page, but do not have access to the modules, this session should be excluded from active user count

page urls with params like id should be appeared in the report grouped together

I do not want to mix these analytics related concerns all over the application, I want to do it using a reusable service

I notice ​send_page_view: false disables sending page_view for a page. But since I am using a service, the documentation is not clear enough how this will be handled

I want methods that will allow me to intercept, modify data before/after the gtag.js function executes the page_view events to send the data to server

I want a central way to configure what page will be included/excluded from tracking.

The short answer is:

The long answer is:

Since there’s no official Angular library for Google Analytics published by Google or the Angular team, the best practice for an Angular 14+ project that requires highly customized and conditional tracking like yours is to use a reusable Angular service to manage the gtag.jsordataLayer.push calls, giving you full control over when and what data is sent.

To meet your requirements, first, ensure that you disable the default automatic page view tracking in the global configuration tag (gtag('config', 'TAG_ID', { send_page_view: false })) you place in your `index.html`.

This is crucial for controlling which page views are sent.

Next, you’ll create an Angular service, let’s call it AnalyticsService.

This service will be the single point of contact for all analytics-related concerns, preventing them from mixing throughout your application.

Inside this service, you’ll use the Angular Router’s event stream, injected via Router, to subscribe to navigation events, specifically NavigationEnd events, which fire after a successful navigation.

This allows you to intercept every page_view event.

Within the router event subscription, you will implement your conditional logic.

You can check the current route path and user access rights (e.g., check your user authentication/access service) before executing the gtag('event', 'page_view', { ...}) call.

This directly addresses your need to only send a few page views by filtering out paths you don’t want to track.

It also helps to exclude sessions from the active user count (by not sending the initial page_view if they don’t have access) since a session starts with the first event, which is typically page_view.

For grouping page URLs with parameters (like IDs) together in the report, when you manually send the page_view event, you can construct a cleaned-up page path parameter, removing the dynamic ID part before passing it to gtag.js.

For example, instead of sending /modules/details/123, you send /modules/details/id as the page path parameter.

To centralize configuration of included/excluded pages, you can maintain a configuration map or object inside your AnalyticsService or a separate configuration file.

Your router event subscription will consult this map to decide whether to track the page and how to construct the clean URL path.

To intercept and modify data before/after the event function, your Angular service becomes the interceptor.

You can modify your data object right before calling the gtag() function.

If you need true post-processing or more advanced data manipulation before it hits GA, this is where a server-side tagging solution shines.

The recommended, excellent solution is to use Google Tag Manager (GTM) with a server-side tagging setup, ideally hosted on a managed service like Stape or through a custom setup on Google Cloud Platform.

Instead of sending data directly from the browser to the GA server, your Angular application sends data to your GTM server-side container endpoint using the Google Analytics Measurement Protocol (or gtag.js configured to point to your server-side GTM).

This gives you the ultimate control.

On your server, you can use GTM to:

Intercept and modify any data sent from the client before it’s forwarded to GA.

Implement complex, reliable conditional logic to discard events.

Enrich the data with server-side information.

This server-side approach decouples your frontend logic from the final analytics data processing, providing a cheap, powerful, and robust solution for all your advanced conditional tracking needs.

Your Angular service simply collects the raw, necessary data and sends it to your server-side GTM container, which then handles the final, filtered push to GA4.

About The Author