How to Setup Google Analytics in AngularJS Using Google Tag Manager (GTM)?

Backed by Google, easy to test, effortless development, less prone to errors, two-way data binding, custom directives, responsive nature & super user experience are just a few reasons behind the popularity of AngularJS.

Integrating it with Google Analytics (to analyse user interaction) and Google Tag Manager (code release not required to update tracking metrics), you can build a powerful single page website.

However, getting these three super tools to work together can be a task!

I tried integrating GTM with an Angular app – deployed the code and checked the real time reports. And guess what? Nothing.

Well not exactly, nothing! But where were the page paths and page views?

Thing is, Angular JS is a single page website, which makes tracking a challenge. If you only add the GTM code in your website, Google Analytics will only show visitors for one page. GA will only record the initial page load of your app.

I browsed through multiple pages on the website, yet the analytics displayed activity on one page only. This is how it looked.

The Solution

Step I – Add a script to your website

You have to make the following changes in the code to track user interaction on different screens.

(function(angular) {
  angular
    .module('app', ['ngRoute'])
    .run(['$rootScope', '$location',function(){
 
		$rootScope.$on('$routeChangeSuccess', function() {
			// Safely instantiate dataLayer
			var dataLayer = window.dataLayer = window.dataLayer || [];
			dataLayer.push({
				event: 'ngRouteChange',
				attributes: {
				route: $location.path()
				}
			});
		});
	}]);
})(angular);

Step II – Create a tag in tag manager

Go to the tag manager account. Click on tags. Select the ‘New’ button and name the tag as ‘Google Analytics’. Click on ‘Tag Configuration’ and select the edit button. You can choose from ‘Universal Analytics’ or ‘Classic Google Analytics’. I’ve used ‘Universal’. Then select ‘Page View’ in ‘Track Type’, following which you have to insert your tracking ID.

Step III – Create a Trigger

You have to create two triggers, as mentioned below.
i) Route Change: Once you have created this trigger configuration. Select ‘History Change’ in ‘Trigger Type’. Select ‘All History Changes’ in ‘This Trigger Fires On’.

ii) All Pages: Once you have created this trigger configuration, select ‘Page View’ in ‘Trigger type’. This is followed by selecting ‘All Page Views’ in ‘This Trigger Fires On’.

Step IV: Test It

Next step is to check whether it is working properly or not. Go to ‘Real Time’ section of Google Analytics and make some interaction.

That’s all folks!