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!
Leave A Comment