Intermediate Google Tag Manager — Tracking Engagement
I started with Intermediate Google Tag Manager on CXL, and my tutor is Chris Mercer from measurementmarketing.io.
Introduction to the Course:
This course contains some advanced features of Google Tag Manger that includes tracking Third-party videos, different page elements, advanced tracking to the ecommerce data using GTM, Custom dimensions, different types of variables, using cookies in GTM and much more.
Now we discussed importing the container into the GTM workspace. Exporting and importing containers is really a cool feature and it exports those in json format known as GTM recipes. The import feature is really important because there’s a lot of different steps there and we need to be very, very aware of what we’re doing, specifically with the overwrite feature because remember it’s default. It defaults to overwrite. And that’s not necessarily most of the time what we’re going to want to do, sometimes it is, but most of the time it’s probably not, you’re going to want to merge the container that we’re importing, the recipe that we’re importing into a container.
Lesson Resources
Advanced Video Tracking
The next lesson, we have is Tracking videos from third-party platforms like Vimeo, Wistia and JW player.
During the lessons, we discussed about Tracking Video Engagement from different platforms like Vimeo, Wisita and any other third-party video tracking. For the Youtube Videos tracking, we already have built-in variables available in Google Tag Manager however for any third-party platforms we don’t have any built-in tags.
#Vimeo Tracking:
So the first step here is identify the Video Platform website is using, to do so simply go the video and use inspect element to find out the platform website is using. For example, in the case of Video the Video url will be like videoplayer.vimeo.com/XXXX.
Now, we used GTM recipes from bounteous, they have created GTM recipe for the Vimeo Video Tracking which can be downloaded from https://www.bounteous.com/insights/2017/04/07/vimeo-tracking-gtm/ , we can simply save the file as json script and then import it into the GTM container.
The recipe contains a folder that has following ingredients:
Tags
- GA — Event — Vimeo Tracking
- CU — Vimeo Tracking — LunaMetrics Plugin
Triggers
- Event — Vimeo Tracking
Variables
- Debug Mode
- DLV — Video Name
- DLV — Video Name
Here is the step by step process:
Step 1: Download Container File — Download the container JSON file.
Step 2: Import the Jason file into the container
Step 3: Before Publishing it directly, we just need to make sure the Tags and Triggers are configured as per our requirements. For example: We will need to update Google Analytics Tracking code with our own tracking code
The recipe includes a custom HTML code that has information about events, Playing, pausing and watching the video till end. That way we will be able to track the video events easily.
Similar to that we checked out the Wistia tracking, we used the a new recipe that can be found here: https://www.bounteous.com/insights/2018/11/04/wistia-video-tracking-gtm/
Next, we discussed about the JW Player, for JW Player we used the recipe from Analytics Mania: https://www.analyticsmania.com/google-tag-manager-recipes/jw-player/
So far we discussed, about the Vimeo, Wista and JW Player, all of those have pre-built recipes that can be easily configured by some editings into the tags but make sure don’t make any changes in the custom HTML tag, Event and Variables as it may impact the tracking.
Lesson Resources
Tracking Engagement: Page Elements
During the lesson, we discussed some advanced ways to track the page elements using element visibility. We discussed form submissions and automated error-reports.
Element Visibility:
We have situations where we have forms that don’t redirect to any thank you page and pop-up a thank you message in the browser without changing the URL. Sometimes, we use event tracking on the submit button, however that’s not accurate because the normal event tracking code will fire every time when someone clicks on the submit button. To track the thank you message. So you just hover over the element that we want, we hit Inspect, and then it sort of just takes us to it, right? So we can see that it’s right there. So that’s what we want. we want this element to fire.
We’ve built in a variable known as “Element Visibility” When configuring the trigger, we will use CSS Selector as it’s the easier one. Here is an example of Element Visibility Trigger for a Page:
So Suppose we have a form that has a Thank You Message after successful submission instead of redirecting to a Thank You or Confirmation page. On the Thank You message, we will use Inspect Element and In the inspect element will select the Copy Selector , then will go the GTM trigger and will create a trigger in the configuration we will select the CSS Selector and will paste the CSS we selected, then we will want to trigger that event once per page, then Minimum Visibility of that section, we would go here with a value between 1 to 100 so we will take it as 100 as this Specify how much of the selected element must be visible on screen before the trigger fires then we will go with the Observe DOM changes as there will be a javascript running when we will submit the form and it we will want to Track matching elements that appear as the DOM changes, then if we have multiple pages using the same form and if we want to track that form submission only a single page, we can select some visibility element and then select the page. Similarly, we can track the errors whenever someone tries to submit the form.
Additionally, Here are each of the options and when to use those
- Once per page — this trigger will only fire once on the current page. The moment is when the first element that matches the ID or the selector string enters the viewport. Thus if you’ve specified multiple selectors or there are multiple elements with the same ID, this trigger setting will make the trigger fire only once — when the first matched element enters the viewport.
- Once per element — this trigger will fire just once if an element with a specific ID appears in the viewport (even if multiple elements share the same ID, in which case it will fire just for the first one). However, when using CSS selectors, this setting will fire once for each element matched by the selector(s). In other words, this would be the setting to use if you wanted to create a trigger that fires when different parts of the page enter the viewport!
- Every time an element appears on-screen — this trigger fires whenever any matched element appears in the viewport, and will do so each time the element reappears.
Here are some of the references that can be checked out:
