• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

May 8, 2021

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

Updated: May 8th, 2021. 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 the DOM element? What is the 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.

 

Before we continue: this topic is also explained in my Intermediate GTM course

The auto-event variable is often overlooked in the variety of Google Tag Manager features. In fact, there are many more of such underutilized functionalities that can take your GTM implementation skills to another level. That’s why I have created an Intermediate Google Tag Manager course that can help you do that.

Enroll in Intermediate Google Tag Manager course

 

If you prefer videos

By the way, I have also recorded a video about this variable. It will give show you a quick example of where this variable is useful. If you really want to learn more about this variable, I recommend watching the video AND reading this blog post.

 

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 the image’s URL or target link.
  • When you submit a form, you can access the 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.)

The auto-event variable checks the website’s element that a user interacted with and adds some particular data to the 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 the “Inspect element” feature of your browser to find other possible solutions. Usually, it works by clicking the mouse right button on the 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:

Inspect element - first example

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.

Auto-event variable - variable types

#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 post are dedicated to 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 a 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 used to work at a startup, called Omnisend (previously Soundest). We offer an email marketing solution that 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 in 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).

Inspect shopify logo

My idea here was to catch all link clicks of vendor logos and push that data to Google Analytics as events where the 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 that pushes the data GA.

Note: the following example uses Universal Analytics, a.k.a. GA3.

 

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 

auto-event variable in google tag manager

 

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).

Trigger - Clicked Platform Logo

 

Step 3: Create a Universa Analytics Tag

Now, let’s create a Universal Analytics tag that 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
    • Track type – Event
    • Category – Click
    • Action – Platform logo
    • Label – {{aev – data-platform}}
    • Select the GA Settings Variable
    • Add the click trigger you have previously created

auto event variable in google tag manager

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 the 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. When I was working at Omnisend, 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 the lack of interactions being tracked with Google Analytics, the bounce rate is actually higher than it should be.

First, let’s remember how the 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). Pageviews 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. So I decided to start tracking clicks of images in blog posts.

I was interested only in those images that are 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
  • Track Type – Event
  • Category – Click
  • Action – Image in blog post
  • Label – {{Page Path}}
  • Select the GA Settings Variable
  • 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.

The bounce rate decreased by almost 5 percent and the average time per session increased by 15 seconds. Of course, her long-term objective always is to increase the number of pages per session, but more accurate metrics were a good start.

 

Bonus: Outbound Link Click Tracking with auto-event variable

On October 30th, 2019, Google Tag Manager developers added a new way how to track outbound links with Google Tag Manager. This time, it’s possible with the help of the Auto-event variable. Read this guide to learn more.

 

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 the 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.

Julius Fedorovicius
In Google Tag Manager Tips
20 COMMENTS
Bhushan
  • Jan 25 2019
  • Reply

hi Julius, great article, thanks for sharing such useful posts. I am trying to send an event when a user moves from one fragment url (# URL) to another. In GTM preview mode, I see the built-in variable old history state and new history state contains that info as a data layer variable. I was wondering if I can pass that info as an event into GA. However, I am not able to get it.

    Julius Fedorovicius
    • Jan 25 2019
    • Reply

    Hey, use history change trigger for that. When the fragment changes, the trigger will be activated and you will be able to send an event to GA.

Darren
  • Jan 29 2019
  • Reply

Hi Julius,

Great article and thanks for sharing! I'm trying to figure out how to get the value from outer HTML. The code looks as follow:


...
save
...

Each product on the product listing page has a save button, once clicked, the text will change to "Saved" but it stays on the same page. If click other part of the product item, it goes to the product page.

I'm trying to track which product is saved with event tracking. The product ID in the outer tag is the only identifier that can be used as the event label.

Do you have any suggestions on how to track in this scenario?

Thank you so much!
Darren

    Julius Fedorovicius
    • Jan 29 2019
    • Reply

    Can you share a link to a page where I try it myself?

    Darren
    • Jan 29 2019
    • Reply

    Sorry for the glitch, hope this works.

    Code:
    <a href="product-id-001" >
    ...
    <span class="no-save" >save</span>
    ...
    </a>

Darren
  • Jan 29 2019
  • Reply

Here it is, thank you!

https://www.machinefinder.com/ww/en-US/categories/used-compact-tractors

    Julius Fedorovicius
    • Feb 1 2019
    • Reply

    Hey, you will need to follow this guide https://www.simoahava.com/analytics/capturing-the-correct-element-in-google-tag-manager/

      Darren Huang
      • Feb 1 2019
      • Reply

      Hey Julius,

      It works!! Thank you so much for the help and direction. It makes my day. :D

      Cheers,
      Darren

Lianne
  • Jul 19 2019
  • Reply

Hi Julius - I just wanted to let you know how immensely helpful your articles have been to me this past month as I was forced to take my GTM knowledge to a new level. Your articles are so clearly written that I can actually follow them. Thank you and all the best with your aspirations!

    Julius Fedorovicius
    • Jul 19 2019
    • Reply

    Thank you very much!

Alvin
  • Sep 22 2019
  • Reply

Hi Julius,

Your article is super helpful! A question to ask:
1. For the aev in trigger,
using the same example above, could I achieve the same effect by
click - just links - some link clicks
click element - matches CSS selector - img[rel*="lightbox"]
?
And - if both methods can achieve the same result, which one would you suggest to use and why?
Thanks!

    Julius Fedorovicius
    • Sep 23 2019
    • Reply

    It depends on the situation. If you use Link clicks trigger, then the < a > element of the HTML (link) must contain that "rel" attribute.

Ashish
  • Aug 23 2020
  • Reply

1. I created an Auto-Event-Variable(named aev-text) with type Element Text.
2. Added Element Visibility trigger with css selector and condition 'aev-text' equals "some text".
3. Created a Tag with event category as Validation, event Action as 'aev-text' and event Value as 'aev-text' but when my website fire tag it sends data to GA with event action as "some text" but event value is blank even I am using same variable for action and value.

What could be the issue.

Vlad
  • Apr 21 2021
  • Reply

Txs!!!

Leonardo Bigardi
  • Jun 21 2021
  • Reply

Hi, Julius! It worked good to me but I noticed that I just can pull the parameters I want when I click on a specific part of the button, not the entire button.

My GA4 tag is firing correctly. I used the WildCard CSS Selector technique you taught in another video and I'm tracking clicks perfectly.

But using the Auto-Event Variable I just can pull the data when I click on the "html parent element". If I click on "html childrens" of my button, the parameters are not assigned to the click.

So, how can I pull the data using the Auto-Event Variable even when the click occurs on the "html childrens" of the button? Like on the text, description or on a image inside the button.

Sam
  • Oct 6 2021
  • Reply

Hey bud,

If you don't fill a field on our signup form error text shows within the variable: data-testid. So if it fires the code looks something like:
.

I'm adding a form completion trigger and looking to validate only if the variable data-testid > does not contain > error-text.

Will an auto event variable work here? Since the user isn't actually clicking on it? Or am I doomed to use the DOM variable.

    Julius Fedorovicius
    • Oct 8 2021
    • Reply

    Either DOM element variable or write custom code that crawls the DOM and finds the correct object. Auto-event variable requires a visitor to interact with the actual element (e.g. click the error message)

David
  • Dec 31 2021
  • Reply

Hi Julius! Thanks for this useful post. How to create a UA event with this auto-events variables is clear, but how do you import this event into Google Ads? Since these actions and labels are dynamic, I don't know if it is possible to create it as an event in Google Analytic to be able to import it into Google Ads.

Thanks and happy new year :)

Eunice
  • Jan 20 2022
  • Reply

Hi Julius, Thank you for the insightful post. I would love to use the auto-event variable but it's very dependent on exactly where users click on a feature. So for example, I have a button that is coded this way:

Add

If the user clicks right on the button label, the span element is captured and thus no data-gtm attribute is found. But if the user clicks anywhere else within the button, the data-gtm value is captured. Do you have any ideas as to how to deal with this? By the way, I can't change the code.

    Julius Fedorovicius
    • Jan 26 2022
    • Reply

    This would require advanced knowledge and you would need to get familiar with topics such as JavaScript fundamentals and DOM traversal.

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Introduction to Google Tag Manager Server-side Tagging
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings