{"id":123242,"date":"2025-03-10T01:31:32","date_gmt":"2025-03-10T01:31:32","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/capturing-the-correct-element-in-google-tag-manager\/"},"modified":"2025-03-10T01:31:32","modified_gmt":"2025-03-10T01:31:32","slug":"capturing-the-correct-element-in-google-tag-manager","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=123242","title":{"rendered":"Capturing The Correct Element In Google Tag Manager"},"content":{"rendered":"


\n<\/p>\n

\n
\n

Last updated 24 August 2022<\/strong>: The instructions in this article are no longer that useful, as you can simply use the native JavaScript Element.closest(selector)<\/code> method instead of the {{Find Closest}} trick described in this article. Browser support for closest<\/code> has thankfully improved a great deal since this article was originally written.<\/p>\n<\/blockquote>\n

Google Tag Manager<\/a> provides us with a bunch of handy triggers, designed to make capturing user interactions on the website much easier. These triggers are part of a paradigm called auto-event tracking<\/a>, which comprises the Click<\/strong>, Form<\/strong>, History<\/strong>, and JavaScript Error<\/strong> trigger types.<\/p>\n

\n

<\/p>\n

\"Auto-event<\/p>\n

<\/a><\/p>\n<\/div>\n

Now, I\u2019ve covered GTM\u2019s triggers many, many times before. If you need a refresher, take a look at the following articles:<\/p>\n

In this article, I want to tackle a specific aspect of Click triggers<\/strong>. If you\u2019ve used them before, you\u2019ll know (at least) two things:<\/p>\n

    \n
  1. \n

    The Just Links<\/strong> trigger captures the link element (<\/code>) that is the nearest wrapping link of the clicked element.<\/p>\n<\/li>\n

  2. \n

    The All Elements<\/strong> trigger captures the clicked element itself.<\/p>\n<\/li>\n<\/ol>\n

    In other words, the Just Links trigger actually climbs up the document until it finds a link element, and returns that for GTM to process. The All Elements acts more like a regular handler: it simply returns the element that was clicked.<\/p>\n

    In this article, I want to show you how to leverage especially the All Elements trigger more effectively. Basically, you might want to use the All Elements trigger, but then mimic the Just Links trigger to find some nearest wrapping element, and return that for GTM to use.<\/p>\n


    \n X<\/span><\/p>\n

    \n
    \n The Simmer Newsletter<\/strong>\n <\/p>\n

    \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

    <\/span><\/p>\n

    Why use All Elements?<\/h2>\n

    Well, there\u2019s one obvious reason: There are all sorts of elements on the page you might want to track<\/strong>. Even though links are a very popular tracking item, there are many elements that have nothing to do with links.<\/p>\n

    \n

    <\/p>\n

    \"All<\/p>\n

    <\/a><\/p>\n<\/div>\n

    Perhaps you want to track a button, or a form field, or an image. In these cases, you will need the All Elements trigger.<\/p>\n

    Another reason you might not be aware of is very significant: The All Elements trigger uses the capture<\/em> phase of the event path<\/strong>. The Just Links trigger, as well as pretty much all other GTM triggers, utilize the bubble<\/em> phase.<\/p>\n

    And why is this significant? Because event propagation is most often cancelled<\/a> in the bubble<\/em> phase! Many people have come across forms and links that simply refuse to fire their respective triggers in Google Tag Manager. The reason is that other JavaScript on the site can prevent the event from climbing up the document to where Google Tag Manager\u2019s listeners are waiting.<\/p>\n

    But when you use the All Elements trigger, you are using the capture<\/em> phase, which is cancelled far less often.<\/p>\n

    In other words, you can actually use the All Elements trigger to apply link tracking for links that do not create a GTM event when using the Just Links trigger!<\/p>\n

    The only problem with this approach is that the All Elements trigger returns the actual element that was clicked. For example, let\u2019s say you have HTML like this on the site:<\/p>\n

    If you used a Just Links<\/strong> trigger, and event propagation wasn\u2019t stopped, clicking the link will pass the [email\u00a0protected]<\/a>\"\/><\/code> to Google Tag Manager as the target element of the event. But if you\u2019re using the All Elements<\/strong> trigger, GTM captures the <\/code>, because it\u2019s what the click actually landed on!<\/p>\n

    So how do we get the benefit of All Elements with its capture<\/em> phase handler, but still be able to capture any element up the DOM tree?<\/p>\n

    With some Custom HTML Tag and Custom JavaScript variable magic, of course!<\/p>\n

    The solution<\/h2>\n

    The solution comes in two parts. First, we need to create a Custom HTML Tag that introduces a polyfill<\/strong> (read: workaround) for older browsers which might not support the method we\u2019re going to use.<\/p>\n

    Next, we\u2019ll use a Custom JavaScript variable to create a generic function to which we can pass a CSS selector<\/a>. This function, in turn, climbs up the document tree and returns the element that matches the selector.<\/p>\n

    Note that you can achieve most of this easily with jQuery<\/a> or something similar. However, I want to show the native JavaScript way of doing it, since it\u2019s not actually that complex.<\/p>\n

    The Custom HTML Tag<\/h3>\n

    The Custom HTML Tag should fire as early as possible on the page, so you can use the All Pages trigger, if you wish. This is what it holds:<\/p>\n

    \n