Search

11 . 3 . 15

Anatomy of Event Tracking Using Universal Analytics and Google Tagmanager


For some, the conversion funnel doesn’t just end on the website, it may take a few more steps before the online convert turns into an actual customer, therefore only focusing on primary website conversions is insufficient. What happens before and after the point of conversion on the website is just as important – and can yield important clues on how users behave and interact with your content in their journey towards that sale completion.

Here, I’ll be walking-through what happens post-“conversion”, (ie. what happens in the steps after the user has completed the desired goal on the website) and how this may help positively change internal business processes like the one explored in the scenario below.

Tools Required

This walkthrough assumes that you already have Tagmanager and Universal Analytics configured and installed and have basic knowledge of jQuery and understand Tagmanager requirements.

Scenario

For websites that require users to book an appointment slot in a virtual diary, (think holiday / travel consultants, personal trainers, bank account managers, hospital consultants) understanding booking times can lead to interesting insights on appointment activity. For example, the business might want to discover popular booking times in the diary and work to add more advisors to meet the demand for those particular dates or times.

In this walkthrough example, we’ll explore how to set up the necessary tags in Google Tagmanager so that you can start receiving this data in Universal Analytics. I’ll be sticking to the earlier version the tagmanager UI for the sake of readers who are still using the old UI.

The GA Event Tag

Construct the event you want and then work backwards. I find that this is a better way of working as it keeps the end objective always in sight, even when other parts in the scenario might change.

event-tracking-tagmanager-custom-dimension

  • Category: Advisor Bookings
  • Action: {{department}}
  • Label: {{advisorName}}

Custom Dimension: {{selectedDate}}. Refer to this resource on how to create Custom Dimensions.

Firing Rule: Appointment Chosen {{event}} = diaryBooked indicating when user has booked date and advisor.

Deconstructing the Event

{{department}} is a macro with the department value taken from the dataLayer based on the location of the booking form. Eg. If the booking form is on /finance/ then the output will be ‘/finance/’

If you already have a dataLayer implemented with the variable ‘department’, and its value is dynamically generated based on the CMS template the form is on, then you can simply create a new dataLayer variable macro in GTM to look for this dataLayer variable name eg:

macro

 


{{advisorName}} is the name of your advisor. Again, this can already be dynamically generated if your developer is able to push to the dataLayer  from the website.

The only thing you will need to do then is just specify the macro {{advisorName}}:

macro2


{{selectedDate}} is a macro generated from the appointment date that the user has selected. Much like the above, if your developer has already implemented the dataLayer that dynamically populates the value for the variable “selectedDate” then you only need to specify this macro in Google tagmanager:

macro3


Mechanics of the virtual diary

In this example, the  virtual diary mechanics are as such:

  • The user has already converted online. This is the stage afterwards where they are prompted to meet their advisor and to choose a suitable slot.
  • The user clicks on a button to select the preferred date
  • The user then clicks on another button to select the preferred advisor
  • Finally, the user clicks the CONFIRM button where they get a confirmation / thank-you screen with the selected dates and advisor details. The confirmation screen isn’t on a new URL, it lives on the same page, hidden until the confirmation button is clicked.

In the background, upon clicking the CONFIRM button, the selected date and selected advisor choices are appended into a div in the Thank You screen and we send an {{event}} = confirmClick to let Google Tagmanager know this has happened.


Consolidate

Now all we need to do is collect all this information in one CUSTOM HTML tag:

<script>
// collect the appointment date and advisor after CONFIRM
var preferredDate = $('#date').text(); // div where the value of the preferred date is inserted into
var preferredAdvisor = $('#advisor').text();  // div where the value of the preferred advisor is inserted into

// then push to the dataLayer
dataLayer.push({
  'selectedDate' : preferredDate,
  'advisorName' : preferredAdvisor,
  'department' : {{url path}},
  'event': 'diaryBooked'

});

</script>

Firing Rule: this tag should fire on {{event}} = confirmClick (ie. when the CONFIRM button is clicked)

Notes:

  • Notice we have used a tagmanager macro {{url path}} inside a Custom HTML tag.
  • You can specify {{department}} in other ways – it doesn’t have to be from the url path.
  • Finally, we’re pushing a datalayer event called “diaryBooked” – the auto event tracking we have set up at the beginning of the walkthrough needs this to fire

Sequence

Visualizing the sequence of interactions before the endpoint is crucial – helps to minimise complications. This usually works best at the define / design stage of the functionalities on the page and the page template itself, and, I find that when the teams from analytics, front-end and back-end flesh this out at the start, we can account for / avoid pain points pretty easily:

TAGMANAGER-ANALYTICS-TRACKING-EVENTS-SEQUENCE

Notes:

  • We’re using dataLayer events like traffic lights to signal the sequence of firing tags.
  • It’s important to bear in mind that once the user clicks “CONFIRM” moving from Step 1 to 2 and 3 happens very quickly, to the user it appears instantaneous in the browser.
  • Here we can see that there is no need for us worry about how tagmanager is going to collect the values for “date” and “advisor”. The event “confirmClick” has inferred that this has already happened. Therefore, all the developer team needs to do is send this event to the dataLayer once the selected date and time have been added to the Thank You wrapper.

How This Will Appear in Analytics

Here’s how it will look in Universal Analytics. Of course you can view under the usual Behaviour > Events in Universal Analytics. But you may prefer the custom report version:

universal analytics custom report

Notes:

  • This is a very basic example. You can start to get really granular by pulling out “preferred appointment time” if that is an option available on the virtual booking diary for users to select, and reference numbers and “appointment status” too.

Conclusion

Some summarized points to round this off:

  • Even though it may be possible to do this in silo, it really works best as part of a process that includes your wider team
  • Careful mapping of the tracking journey from A to B helps visualize and simplify the implementation.
  • How future-proof is the implementation, what if the website updates, how can this be done better, if the sequence doesn’t make sense is there probably a usability issue to account for as well? – example points to consider during implementation review, because there is always room to improve.

Hope that was a useful read! :)

Want to find out more about what Analytics & CRO can do for your business? Contact us here.

Trent Y. is Head of Analytics and Conversion at twentysix. Analytics, usability and conversion strategies. Loves coffee, interested in how data and technology can positively impact our lives. “Learn fast, learn often.”


Comments