Auto-Event Variable In GTM: Upgrade Your Web Analytics With 2 Simple But Powerful Examples

Google Tag Manager offers a lot of awesome features when it comes to website tracking. If you have already tried using GTM for more than basic Google Analytics pageview tracking, you have probably seen the list of 15+ variable types. That’s a pretty decent list, huh? I bet it raises more questions than answers – e.g. what is DOM element? What is Auto-Event Variable? etc. In this blog post, I’m going to show how you can add an auto-event variable to your web analytics arsenal + two examples of use from my experience.

What is an Auto-Event variable?

Auto-Event Variables are used to access the target element of an auto-event action (e.g. Click, Error, Form Submit). For example:

• When you click an image, you can access image’s URL or target link.
• When you submit a form, you can access form’s ID, etc.

Sounds a bit familiar? Google Tag Manager already offers a lot of predefined (built-in) variables, for example, Click ID, Form Text, etc. All of them are actually auto-event variables (note: most of the built-in variables are stored as Data Layer variables, Simo has described it in detail.)

Auto-event variable checks the website’s element that a user interacted with and adds some particular data to Variables tab of GTM Preview and Debug mode.

What problem does it solve?

I’ll illustrate it with an example – imagine your website’s homepage contains three clickable images. Each one of them opens a different Youtube video (in a pop-up). You want to track which image your visitors are clicking the most.

What will you do? Your answer will probably be to use Google Tag Manager Click Trigger. Good choice. However, there’s one “but”. All images contain the same CSS class, have no IDs, so default GTM Click variables are not useful in this situation – you cannot simply identify which image was clicked.

What do you do? Research. Use “Inspect element” feature of your browser to find other possible solutions. Usually, it works by clicking mouse right button on website element (e.g. an image) and then Inspect element (see more thorough instructions for Chrome, Firefox, Internet Explorer, Edge).

Once you open developer tools (by inspecting element) you’ll see an HTML code. A sample could look like this:

As it was mentioned before, no click class or click ID are available for this element. But there are other attributes that I could make use of – alt and data-video-id. That’s where the Auto-Event variable comes in handy – I can turn alt or data-video-id into variables in Google Tag Manager and use their values in triggers or tags.

What do all those settings mean?

Disclaimer: This chapter is a bit more technical, so in case you’ll feel a bit confused feel free to skip to the next chapter – a practical example. If you are still willing to find out more technical details, let’s dive in.

In order to create an Auto-Event Variable, complete the following actions:

• Go to Variables
• Under User-Defined Variables click New
• Click Variable Configuration and then Auto-Event Variable

Expand Variable Type dropdown and you’ll see 12 options.

#1. Element – Accesses the website element (a.k.a. DOM Element) itself that was the target of the auto-event action. I.e. if you click an image, the auto-event variable will return value [object HTMLImageElement] (I have to admit I have never used such type of auto-event variable in practice). This is stored in Data Layer under gtm.element name. Note: There are Built-In Variables for this – Click Element and Form Element.

#2. Element Attribute  – Returns the value of a particular attribute of the auto-event element. You need to define the name of the attribute you are interested in. All examples in this blog posts are dedicated for this type of auto-event variable.

#3. Element Classes – Returns the value of the class attribute of the auto-event element. Stored in the Data Layer under the key gtm.elementClasses. Note: There are Built-In Variables for this – Click Class and Form Class.

#4. Element ID – Returns the value of the id attribute of the auto-event element. Stored in the Data Layer under the key gtm.elementId. Note: There are Built-In Variables for this – Click ID and Form ID.

#5. Element Target – Returns the value of the target attribute of the auto-event element. Stored in the Data Layer under the key gtm.elementTarget. Note: There are Built-In Variables for this (Click Target and Form Target).

#6. Element Text – Returns the value of either the text (textContent or innerText property) of the auto-event element. Note: There are Built-In Variables for this – Click Text and Form Text.

#7. Element URL – Returns the value of either the href or the action attribute of the auto-event element. Stored in the Data Layer under the key gtm.elementUrl. Note: There are Built-In Variables for this – Click URL and Form URL.

#8. History New URL Fragment – Returns the new URL fragment set with a browser history event. Stored in Data Layer under the key gtm.newUrlFragment. URL fragment is the part of web address after the # symbol (e.g. www.example.com/#contact-us). This is especially popular among one-page sites where URL fragment changes when you scroll). Note: There is a Built-In Variable for this – New History Fragment. If you’re interested in URL fragments and tracking in GTM, check Simo Ahava’s blog post.

#9. History Old URL Fragment – Returns the old URL fragment replaced in the browser history event. Stored in Data Layer under the key gtm.oldUrlFragment. Note: There is a Built-In Variable for this – Old History Fragment.

#10. History New State – Returns the new state object set with a browser history event. Stored in Data Layer under the key gtm.newHistoryState. Note: There is a Built-In Variable for this – New History State.

#11. History Old State – Returns the old state object replaced in the browser history event. Stored in Data Layer under the key gtm.oldHistoryState. Note: There is a Built-In Variable for this – Old History State.

#12. History Change Source – Returns a string denoting the event that triggered the history change event (popstate, pushState, replaceState, or polling). Stored in Data Layer under the key gtm.historyChangeSource. Note: There is a Built-In Variable for this – History Source. P.S.

Example No.1 – Auto-Event Variable in GA Tag

I work at a startup, called Omnisend (previously Soundest). We offer an email marketing solution which can be easily integrated with popular e-commerce platforms (Shopify, Bigcommerce, etc.). In our website (older version of it), we had various places where logos of e-commerce vendors are displayed (we call them platforms internally). Some logos redirected to app stores (where visitors can install Omnisend) other logos redirect users to a signup form, etc.

So I was interested which vendors are the most popular among our website visitors. Luckily each logo contained an attribute with vendor’s title – data-platform (I was able to see it by using Inspect element feature).

My idea here was to catch all link clicks of vendor logos and push that data to Google Analytics as events where event label is a platform (vendor) name. In order to achieve this I completed the following steps:

1. Create an Auto-Event Variable in GTM
2. Set up a Click trigger (Just links) which fires only when any of the logos is clicked
3. Created a Google Analytics Event tag which pushes the data GA.

Step 1: Create an Auto-Event Variable

Variable’s settings:

• Type Auto-Event Variable
• Title – aev – data-platform
• Variable Type – Element Attribute
• Attribute name – data-platform 

Step 2: Create a Click Trigger

Set up a Click trigger (Just links) with the following settings:

• Title: Click – Clicked Platform Logo
• This trigger fires on some link clicks
• Click classes contains section-platform (because all vendor logos in that particular website section have CSS class reuse-utms section-platform).

Step 3: Create Google Analytics Tag

Now, let’s create a Google Analytics tag which fires an event when someone clicks a vendor logo:

• Go to Tags
• Click New and choose a predefined template – Universal Analytics.
  • Title: GA Event – Clicked Platform Logo
  • Enter Tracking ID (I recommend adding it as a Constant variable)
  • Track type – Event
  • Category – Click
  • Action – Platform logo
  • Label – {{aev – data-platform}}

P.S. you can choose any other values for the event category, action and label. All I wanted to show was the possibility of getting value of data-platform and passing that data to Google Analytics.

Example No.2 – Auto-event Variable in Trigger

In this example, I’ll show you how to use an auto-event variable in triggers. One day (more than a year ago) I was talking with my colleague Karolina and she complained that the bounce rate of our blog was a bit too high. Karolina raised some doubts that due to lack of interactions being tracked with Google Analytics, bounce rate is actually higher than it should be.

First, let’s remember how bounce rate is calculated. According to Google, Bounce Rate is the percentage of single-page sessions (i.e. sessions in which the person left your site from the entrance page without interacting with the page). Page views are not the only way of interactions. Other events (such as form submissions or certain clicks) are also counted as interaction.

Karolina’s hypothesis was: although visitors do not read more than one blog post per session, they still interact with it. So we needed to track more relevant interactions. Her blog posts contain a lot of images, charts, etc. that can be viewed in greater detail when clicked upon (here’s an example – try clicking on any image (except the main one)). So I decided to start tracking clicks of images in blog posts.

I was interested only in those images which are the part of blog posts, not all images that are displayed on the entire page. After inspecting, I noticed that all content images contained links with attribute rel=”lightbox-5″ or rel=”lightbox-6″, etc. Each number represents the ID of the image.

The best way to track those images was to create an auto-event variable rel and use it in the Link Click trigger.

Step 1: Create a variable

Auto-event variable’s settings:

• Title: aev – rel
• Variable type: Auto-Event Variable
• Type: Element Attribute
• Attribute name: rel

Step 2: Create a trigger

Trigger’s settings:

• Title: Click –  Image In Blog Post
• Trigger type: Just links
• This trigger fires on Some Link Clicks
• Condition: rel contains “lightbox” (without quotation marks)

Step 3: Create a GA Tag

Google Analytics Tag’s settings:

• Tag type – Universal Analytics
• Add Tracking ID
• Track Type – Event
• Category – Click
• Action – Image in blog post
• Label – {{Page Path}}
• Triggering – Choose previously created Click –  Image In Blog Post

The result

Karolina’s guess was right – some visitors indeed interacted with her content by clicking images. Some of them opened a blog post, read it, clicked at least one chart or image (if there’s one) and only left the page. Bounce rate decreased by almost 5 percent and average time per session increased by 15 seconds. Of course, her long-term objective always is to increase number of pages per session, but more accurate metrics was a good start.

Conclusion

The auto-event variable is a pretty easy way to get more data from a website and utilize it in your tags or triggers. In this blog post, I described how you can easily fetch custom data from your website and push it to Google Analytics. In another example, I demonstrated how you can track clicks of only certain website elements with the help of AEV. This technique is useful when Click Classes variable is not unique (and no Click ID is available).

Here is another idea where you can use Auto-Event variables:

• You can track outbound link clicks as Google Analytics events and see which links are nofollow. All you need to do is create Auto-Event Variable (Type: Element Attribute, Attribute name: rel) and push it as an Event Label to GA.

If you have questions related to Auto-Event variables or Google Tag Manager in general, feel free to post a comment and maybe we’ll come up with a solution.