Search code examples
css-selectorsgoogle-tag-manager

Tag Manager Variable from a parent of click element (toggle)

Here is the structure of the toggle:

<div data-id="thisIsTheID" class="abc">
  <div class="edf">
    <button value="false"></button>
  </div>
</div>

The trigger only works with click >> all elements >> click classes contains edf. I tried click element matches css selector

  • div.abc
  • div.abc *
  • div.abc button

but none will work as trigger.

However, I want the data-id as variable in Google Tag Manager in order to differentiate between different toggles.

How do I create a trigger that works and how do I get the variable?

Here the actual code and debugger view: enter image description here

enter image description here

Solution

  • Try making a custom JS variable like so:

    function(){
    return {{Click Element}}.parentElement.getAttribute("data-test-id");
}

    It should return the value of your attribute on click.

    But the classes look auto-generated. They feel like they can and will change on cache refresh or on front-end builds. I would try to use selectors like div[data-test-id] * or even div[data-test-id=isAgePolicy] *