Deploying Google Analytics (Via Tag Manager) In An Angular Application
May 2, 2018 -
Single-page applications often pose a challenge for the deployment of a web analytics tool: if there’s only ever one ‘real’ page loaded, how do you track the views of multiple screens within it? Fortunately, Google Tag Manager has a nice feature that makes this very easy. This post will outline how to use that feature to track an Angular 5 application in Google Analytics.
(Aside: I mention here that these instructions work for Angular 5 in particular because that’s the current version. However, the basic deployment works for any version of Angular — including the AngularJS framework.)
Create a GTM Container
The first step is, of course, to create a container in Google Tag Manager for your application.
Be sure to choose “Web” under “Where to Use Container”.
Once you create your container, you’ll be given the instructions for installing it. You can follow them by putting the code provided in the proper locations within your application’s index.html file.
Create a Google Analytics Variable
In the “Variables” section, click the “New” button under “User-Defined Variables”. Give it a useful name that follows your tag management naming conventions. We’ll call ours “GA Settings – Production”. Click the “Variable Configuration” area to choose a variable type, and choose “Google Analytics Settings” in the “Utilities” section. This is a relatively new feature that lets you define a set of Google Analytics tag settings as a variable for use in multiple GA tags.
Enter the property ID (e.g., UA-123456-1) of the Google Analytics property you want to track data in under the “Tracking ID” section. We’ll leave the default configuration in place for now, but having this single variable means we can make changes to our entire deployment of Google Analytics quite easily in the future.
Click “Save” to save your variable.
Define a New Trigger
Navigate to the “Triggers” section, and click “New” to start making a new trigger. Give it a name, once again following your tag management naming conventions. We’ll call ours “History Change – All Route Changes”.
Click the “Trigger Configuration” area to choose the type of trigger to create. Under “Other”, choose “History Change”.
The History Change trigger type is what we need for any single-page website or application. This will track any change to the URL displayed in the browser window, rather than the actual loading of a new page. Since Angular 5, AngularJS and most other single-page frameworks keep the URL up to date on route changes, this is sufficient to trigger our tracking.
We’ll leave the firing conditions alone: our trigger will fire on all history changes. You may change this if you want to only fire on specific routes or hostnames, for example.
Once you have the trigger configured, save it by clicking the “Save” button.
Configure a Google Universal Analytics Tag
Next, we need to configure our Google Analytics pageviews tag to fire whenever there’s a history change. This will track our Angular 5 route changes as if they were pages. To do so, navigate to the “Tags” section and click the “New” button to set up a new tag. Give it a name, again following your conventions. We’ll go with “GUA.page – All Routes” for our example.
Click on the “Tag Configuration” area to choose the tag type, and choose “Google Analytics – Universal Analytics”. Leave the “Track Type” as “Page View”, and choose the “GA Settings – Production” variable we defined above as the “Google Analytics Settings” option.
Next, click the “Triggering” area and choose the “History Changes – All Route Changes” trigger we previously defined.
Click “Save” to save the tag.
Create (and Publish) a Version
Finally, the last step is to publish all our changes so that the tags actually fire in the application. Click the “Submit” button and configure your submission. Give the version you’re creating a useful name that describes what’s been implemented, and then add a description that provides more detail. Once you create and publish your version, you’ll get a summary of what was created, and the tags will start firing in your application.
See the Results in Google Analytics
Once you’ve started collecting some data, you’ll see the results show up in Google Analytics soon. To verify that your routes are showing up as expected, have a look at the Behavior > Site Content > All Pages report. This will show you the list of routes that have been visited, as if they were individual pages on a site.
In a future post, I’ll go over some interaction with the GTM data layer from within Angular 5 components, so we can begin triggering events, populating user IDs, and making use of other GA features within our Angular application.