A few days ago I wrote about how to integrate Google Analytics in a single page application. This post is a follow up on how to take it a step further and track events in a SPA using Google Tag Manager. Google Analytics is a really powerful tool and events are at the heart of it. If you’re using it without any events configured, you’re missing out on a ton of insightful data that can help you improve your web app.

If you haven’t read my previous post on this topic, I highly recommend you to read it first as it will give you a better understanding of some concepts that I explore in this post.

Setting Up Analytics for Single Page Applications - It's An App World

How to set up Google Analytics in SPAs with little developer support

Please note the feasibility of the methods I describe in this post depends on how large your web app is and how your GTM account is being managed. Tracking multiple events would mean you would have to configure multiple tags and hence your GTM account can end up looking pretty intimidating. It also means that if a tag is deleted by mistake, there will be unrecoverable loss of data. However with proper care and precaution, you can tag events with little, or if you’re lucky, zero developer support.

There are two ways you can tag events in a single page application using Google Tag Manager

  1. DOM Scraping
  2. Custom Events

DOM Scraping

To understand DOM scraping you need to first understand what the DOM is. CSS-Tricks’s post on the topic will give non-developers a good idea. There are also links to more detailed and technical explanations in the article that you can choose to explore.

As mentioned in the article, the visual representation of DOM is what you see in the Elements tab under Developer tools in Chrome. DOM scraping is essentially extracting elements in the DOM using Javascript. Luckily for you, tag management solutions like Google Tag Manager already have a feature that lets you do this.

First, you need to know and understand the predefined Event Listeners in GTM. An event listener is a function that waits for an event to occur. This event could be a click, a mouse-hover or a key press. The listener that concerns us in what we’re trying to accomplish is the click listener. GTM ‘listens’ for every click that occurs on your website (it fires a dataLayer event called gtm.click each time) and stores certain information related to the click in the dataLayer. This information, as you can see in the screenshot below, is essentially properties of the clicked element that it scrapes from the DOM.

Now for this method to work, your developer should have used coherent unique element IDs in his HTML code. For example, let’s say you have a form with two buttons, Back and Add to Cart, that you wish to track clicks on.

This is how the DOM looks when you right click on ‘Add to Cart’ and select ‘Inspect element’ in the Chrome browser.

This is how the dataLayer looks in the GTM preview mode when you click Add to Cart. GTM scrapes these values from the DOM.

In this case, the Add to Cart button has the element ID ‘sku-add’.

Get Aamna Khan’s stories in your inbox

Now to start tracking clicks on this button, all you need to do is

  • Create a ‘Click’ trigger in GTM with the condition Click ID = “sku-add” (gtm.elementId = Click ID). Call it ‘Add to cart’.
  • Create a tag, select GA from the list of pre-integrated tools, add the UA tracking ID. Under ‘Track Type’, select ‘Event’.

Now to understand this part you need to be familiar with the anatomy of an Event in Google Analytics. Since it’s a form on your site, you can set the event category as ‘Form’. Under Action, you can either choose to type in a string yourself or just populate the value of the Click ID if it’s descriptive enough for someone to understand (which in this case it is). You can choose to set or ignore the Label and Value fields as they’re optional parameters (Please note that you can devise multiple ways to name GA events depending on your business or your site’s content. This is just an example). Under ‘Fire On’, click on More and then select ‘Add to cart’ from the list of triggers.

  • Repeat this process with the Back button. GTM allows you to duplicate tags and then edit them. It’s quicker that way.
  • Use the Google Analytics debugger to test whether the tags are firing correctly. If they are, you’re set!

Custom Events

This method involves pushing events into the dataLayer as and when they occur and hence requires developer support. If you’ve read by previous post, you would remember how we pushed event:’virtualPageview’ into the dataLayer on every URL change and then used it as a trigger to alter GA’s perception of a pageview. Similarly, you (or your developer) need to push events into the dataLayer and then use them as triggers to fire GA event tags. Using the same example I used earlier, when the ‘Add to Cart’ button is clicked, your developer needs to call a function that does this

dataLayer.push({event: ‘add-to-cart’})

Now all that’s left to do is to create a trigger with the condition of ‘event’ contains ‘add-to-cart’. And then create a GA event tag which fires when on this trigger. Remember to test the configuration with the GA debugger!

There are pros and cons of using both these methods.

DOM Scraping

Pros: It’s really quick and easy to configure events using this method. If your developer used IDs then you don’t need any support to get this up and running.
Cons: It’s a pretty inelegant solution. If the IDs change without your knowledge, it could mess up your data pretty bad.

Custom Events

Pros: It’s a far more robust method to track events. The HTML can change but if the function is properly configured, these will continue to work as expected.
Cons: You will need a developer to configure this for you.

Some quick notes

  1. You can always directly embed the Google Analytics event tracking code. Your developer will have to write a function to call the GA function with appropriate parameters each time. The advantage of using custom events over this method is that you can use those events to trigger non-GA tags as well.
  2. Earlier in the article I mentioned how if a tag was deleted or an element ID was changed it could lead to a loss of data. While the only way to avoid this is to take proper precaution, there is a way to quickly detect this loss of data. Google Analytics allows you to set up custom alerts to detect a spike or decline in metrics. They’re called Intelligence Events.

Thanks to Manas J Saloi and Girish Kamath for reading drafts of this post and Aritra Sengupta for the image artwork.

I’d love to hear your feedback. You can hit me up on Twitter or mail me at aamnakhan28@gmail.com.

Originally published at www.linkedin.com.