5

How do I detect a click on the following element using "Click Element" variable in Google Tag manager:

<a href="https://amazon.in/product-id" target="_blank" class="amazon-btn">
    <div>
        <span>BUY NOW AT</span>
        <div class="amz-logo"></div>
    </div>
</a>

I have created the following trigger:

Click - All Elements -> Some Clicks -> Click Element -> matches CSS selector -> *.amazon-btn*

enter image description here

This doesn't trigger on clicking the element.

The following is the click element in the debug window:

'HTMLDivElement: html > body > section.content.looking-sec > div.container > div.row > div.col-md-6.looking-cont > div.btn.btn-custom.btn-top.hide-small > a.amazon-btn > div'

enter image description here

I even tried, Click Element -> contains -> amazon-btn . That doesn't work either.

Improve this question
2
  • I am assuming this wants valid CSS selector, so I don’t see how *.amazon-btn* would make any sense to begin with. Did you try just .amazon-btn? If that does not work either, then we probably going to need a better problem description to begin with. Commented Nov 26, 2020 at 8:13
  • .amazon-btn doesn't work either. Commented Nov 28, 2020 at 10:34

4 Answers 4

Reset to default
3

In the Trigger Configuration, try adding this condition:

Click Element matches CSS selector .amazon-btn, .amazon-btn *

I haven't tested this, but it should work when the element with the amazon-btn class is the click target, or any child inside of that element.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Here's the issue, Click - All Elements trigger returns the actual element that was clicked (obviously) but then that could be just an icon in a bigger button. Whereas we want to capture the click anywhere on the button or the target element. More about this at this link

This is what I ended up using. I created a custom javascript variable Get All Classes:

function() {
  var el = {{Click Element}};
  var ad = el.nodeName.toLowerCase();
  if(!el.className==''){
    ad = ad+'.'+el.className.replace(/\s/g,'.');
  }
  var i = 0
  while(el.parentElement.nodeName.toLowerCase() != 'body' && i < 50){
    el = el.parentElement;
    var st = el.nodeName.toLowerCase();
    if(!el.className==''){
      st = st+'.'+el.className.replace(/\s/g,'.');
    }
    ad = st+'>'+ad;
    i++;
  }
  return ad;
}

This returns a string with all the node names and their classes starting from the clicked element to all the way till the <body> element. Like this: body>div.main-container.content>p.first-section>a.amazon-link And then I am using this variable in the trigger to check if it contains a particular class. enter image description here

Is there an easier and better way to get the value of {{Click Element}} GTM variable in the form of string as highlighted below? If so, please add it as an answer and I'll accept that as a correct answer. enter image description here

Improve this answer

1 Comment

You have an incorrect question. that string below is not a representation of an element. That is a generic CSS selector. That also is a bad selector (precisely because it's generic). It's fragile. If you use something like that, it will be a lot easier to break. Therefore, the correct way is to use a.amazon-link rather than body>div.main-container.content>p.first-section>a.amazon-link The only reason why a.amazon-link didn't work for you is because you used it incorrectly.
0

Try the click on anchor element instead

Don't use "Click > All Elements"

Use "Click > Just Links"

And then apply your CSS selector

Improve this answer

2 Comments

May be "Click > Just Links" would work in this case. But then sometimes it could be a <div> or a <button>. That's why I was interested in getting "All Elements" to work.
there's no reason to use Just links. Just use what CBroe said. Don't ever use 'contains' with clicked elements. It does not do what you think it does. With elements, you always use the matches css selector. .amazon-btn is what supposed to be there. Also, don't use classes contain, or if you do, remove the dot cuz that is not a part of a class name in this case. The dot is the selector part. This is, really, pretty trivial. you're just trying wrong things in wrong places.
0

Instead of Click Element, use Click Text = BUY NOW AT and you're done.

Or use something like ”CSS Selector Helper extension for Chrome” to generate the correct CSS Selector.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.