This problem can also be solved using a little bit of javascript and a 'User-Defined Variable' in Tag Manger. This solution is for handling more complex UI components.
Explanation
Google Analytics + Tag Manger record the very specific Element or Node that is clicked by the user. That element is stored in GA as a "Click Element" variable. So in more complex UI situations it is possible the user could click on multiple elements for a single action to occur. For example. Here is a button with an icon and text.
<div
class="button"
id="PARENT_ID"
onClick = () => ...
>
<span id="CHILD_ONE">
icon
</span>
<span id="CHILD_TWO">
text
</span>
</div>
In this scenario it is possible for the user to click on any of the three id
's above. All three will activate the onClick
action. However, Google Analytics doesn't care about the onClick
. It only cares about what specific element was clicked. IE: PARENT_ID
, CHILD_ONE
or CHILD_TWO
.
The "User-Defined Variable" Solution.
- In Tag Manager go to the 'Variables'. (Left column menu.)
- Add a new 'User-Defined Variable'.
- Select the variable type as 'Custom JavaScript'.
Add:
function() {
if ({{Click Element}}.id != "") {
return {{Click Element}}.id;
}
if ({{Click Element}}.parentNode.id != "") {
return {{Click Element}}.parentNode.id;
}
if ({{Click Element}}.parentNode.parentNode.id != "") {
return {{Click Element}}.parentNode.parentNode.id;
}
return {{Click Element}}.parentNode.parentNode.parentNode.id;
}
This script will search the DOM up three levels up from any child Element (Node) and look for a matching Tag id
.
NOTE: Click Element
is the variable name used by Google Analytics. It's the gtm.element
the user clicked.
Setup Tag Manager Configuration to use your new 'Custom Variable'.

Now use the parent id for setting up your Triggers. In my example PARENT_ID
will be the returned id
even if a user clicks on CHILD_ONE
or CHILD_TWO
. So select 'contains' PARENT_ID
.
------ Further Considerations -----
This solution only works within three parent levels. Also while unlikely it is possible to capture an element out of scope of what is intended.
In more complex UI components it might be preferable to add the Tag id
's to every Element. If you are using a front end framework like React I would suggest making the Tag Id a dynamic prop and add it to all child components.
NOTE: Google Analytics changes often. This is a GA4 + Tag Manager solution.