Event tracking via Google Tag Manager and UX findings

Posted on - UX

Event tracking via Google Tag Manager and UX findings

Introduction

Google Tag Manager, a brief intro

Google Tag Manager is, as the name suggests, a place where tags are managed. A tag is a piece of code that tracks user data and behaviour. These tags include AdWords conversion tracking, Google Analytics, tracking pixels, Hotjar and many other datas. Before the launch of Google Tag Manager (GTM) these tags had to be custom hard-coded into the web page HTML code by your (already busy) developers. The tags would be scattered throughout pages, templates, JavaScript files… This approach was messy, inconsistent, and often times prone to errors.

Enter the era of GTM

Google Tag Manager (GTM for short), is a tool that groups all the tags into one place. No more bothering your developer to add yet another tag, event, or waiting for the next sprint to see the actual results. Additionally, there are other advantages to using GTM such as:

  • a sandboxed testing environment
  • version control ( A – B testing )
  • reduced page load times

Adding tags can be done through the GTM auto-event tracking feature or via the DataLayer. The DataLayer is an object that collects all the information needed for tracking and can be used for more complex tracking. For our use case we will focus on simple click events, which are easily added by the auto-event feature.

Via the GTM console we made event triggers. These triggers cause certain event tags to be fired. Examples of these are page loads, clicks, form submits, timers and many more. To add these triggers only a minimal amount of knowledge of code is required. Triggers can also be attached to any existing HTML/DOM elements, classes, attributes and so on.

Combined with the default Google Analytics data, demographics, bounce rate, devices, user flows… events can give you important information on how users are using your site. This information greatly helps in your UX choices.

Google Tag Manager in practice: De Lage Landenlijst

With a basic knowledge in hand, tags were added to the voting web app of De Lage Landenlijst.

De Lage Landenlijst is an annual chart of top songs originating from Belgium (http://lagelandenlijst.radio1.be) and the Netherlands (http://lagelandenlijst.radio5.nl).

The voting app included a list of 100 suggested songs in random order and a top 3 to be completed by the user. After completing the top 3 and submitting the form, the user could share a custom (based on the #1 selected song) OG image on Facebook. Here are our most interesting findings.

To “back to top” or not to “back to top”, that is the question

A lot of UX experts argue that back to top links are unnecessary or even harmful. The original design of De Lage Landenlijst didn’t include a back to top button either. However, as we were testing the website with real data that included a list of 100 songs, it was apparent that some things were missing:

  1. The user could scroll down the friendly list of suggested songs and add them to their top 3. The only feedback after adding songs to the top 3 was the change of the button from ‘add’ to ‘remove’. This was not informative.
  2. Once the user completed their top 3, they would then have to scroll all the way up to the submit form.
Add/remove songs

No feedback about the state of top 3 was given by the add/remove button.

These two problems were combined into one solution: add a back to top button with a progress indication of the user’s top 3.

The progress indicator alerts the user when their top 3 is full and thus when the back to top button could be used to jump back to the form.

The result:

30% of all desktop users actually used the back to top button!

Thanks to a simple tag added in the GTM console, it is now known how often and in what scenarios the back to top button is used.

The tracked data: 

  • 9,204 total click events on the back to top button (between 3rd and 12th of October)
  • 7,634 unique events → 30,27% of all desktop users (25,216)
  • Back to 3/3 → 5,594 (60.78%)
  • Back to 0/3 → 1,858 (20,19%)
  • Back to 1/3 → 1,004 (10,91%)
  • Back to 2/3 →  748 (8,13%)

30% of all targeted back to top users (desktop users) were actually using that debated button. Not too surprising either was that the button was mostly used when the top 3 was completed (3/3). So in this use case we can conclude that the back to top button was a useful addition.

Back to top

Our solution: a back to top button combined with the top 3 progress indication.

The order that matters

The top 3 could be rearranged using the move up/down buttons.

  • Move song up the top 3 list: 9,268 total events → 4,679 unique events
  • Move song down the top 3 list: 5,429 total events → 3,092 unique events

For the people who actually used the reorder buttons: the move up button was used almost twice as often as the move down button. This leads to the possible scenario: “as the user scrolls down the suggestion list he randomly adds songs to his top 3, when his top 3 is full, he wants to rearrange his favorites.” The same goal can be achieved by both the up as the down buttons. However, most users preferred to move their songs up rather than down.

We weren’t sure what we wanted to know but we tracked it anyway!

When adding events to the app, we weren’t sure what we wanted to know by tracking clicks on the reorder buttons, but we tracked it anyway! The results were interesting to say the least. The data suggests that the move up button is more used than the move down button. So just in case you have to prioritize or omit one of the buttons, the down button should be the first to go… Of course this is just a hypothesis relying on the acquired numbers 😉

Sharing is caring

What was remarkable during De Lage Landenlijst campaign was the engagement on social media. If we look at the acquisition numbers, social networks (mainly Facebook) account for 20% of all traffic. 42% of all sharers were actually referred to the website through Facebook as well. This can partly be accounted to the highly recognizable and personalized OG sharing image that was provided at the end of the voting flow.

  • 5,911 shares
  • 1,495 sharers arrived from direct source
  • 2,467 sharers arrived from Facebook
Sharing of OG image, tracked with Google Tag Manager

The OG image was personalized and easily recognizable which added to the high sharing numbers.

Conclusion

By adding a couple of simple event-tracking tags via Google Tag Manager we were able to extract some interesting results that will help us improve the UX of our next projects. To sum it up:

  • One shouldn’t blindly follow every UX rule or best practice out there (carousels anyone?). Look at what works best for your use case. If you’re building a single-page application with important info at the top, a back to top button could add an extra convenience for the user. Also, test with real data!
  • Even if you’re not sure for what purpose you should track some events, track it anyway! The data can later help you validate some possible theories or show you something you haven’t thought of yet.
  • Don’t forget the importance of a distinct OG image.

The Google Tag Manager is extremely powerful. The implementation of adding tags can be as simple (via auto-events) or as extensive (via DataLayer) as you need it to be. Combining data from Google Analytics and custom events can give you interesting insights about your past and future UX choices.

Svetlana Pak

Svetlana Pak

interface designer - UX developer & frontend engineer at Wieni since 2016

Menu