'How do I track clicks on <a> tag with span class inside using Google Tag Manager?

I've been trying to get GTM to fire a tag every time a user clicks on the link text below ("Click here to donate"). 

  <a href="https://www.testurl.com/donate" target="_blank" >
  <span class="donate"><img src="donate-icon.png"></span>
  Click here to donate!    </a>

I'm able to get the tag to fire when users click on the image by using trigger with the following settings below. But I can't get the tag to fire when users click on the link text.

Trigger type: Click - All Elements

Trigger fires on: Some Clicks

Click Element --> matches CSS selector --> .donate

*Note: I'm unable to insert any CSS into the A tag directly due to the site template not being directly controlled by me. I could make a request but it would take weeks if not longer to get the necessary approvals and work done.

Any suggestions are greatly appreciated! Thank you!

htmlcssgoogle-tag-manager


Solution 1:[1]

You can try the following setup using Click URL instead of Click Element:

  • Trigger type: Click - All Elements
  • Trigger fires on: Some Clicks
  • Click URL: https://www.testurl.com/donate

or another solution could be:

  • Trigger type: Click - All Elements
  • Trigger fires on: Some Clicks
  • Click Text: Click here to donate!

solutions based on: https://support.google.com/tagmanager/answer/6106961?hl=en#Click

Another possiblity would be to use the trigger type Click - Just Links:

  • Trigger type: Click - Just Links
  • Trigger fires on: Some Link Clicks
  • Click URL: https://www.testurl.com/donate

What if you have no text or URL?
In this case you can track an element with a specific class attribute:

  • Trigger type: Click - All Elements
  • Trigger fires on: Some Clicks
  • Click Classes: toggle-sidebar (or a more specific class)

Solution 2:[2]

"Just Links" didn't seem to work for me in one particularly confusing case. It wasn't clear why, but clicks on a certain tag weren't registering as link clicks, and the "All Elements" click was registering on the inner element, so I had to improvise.

The solution that is working best for me is to render the inner elements invisible with regard to clicks using pointer-events: none. This will make the click pass through the inner elements and hit the anchor tag so that the tag can be recognized by HREF parameters.

I use this in the context of mailto and tel links.

My trigger looks like this:

Click - All Elements
Some Clicks
Click URL Contains tel:

And then I add a tag called "Click Event Helper" with this custom HTML:

<style>
  a[href*="tel"] *, a[href*="mailto"] * {
     pointer-events: none !important; 
  }
</style>

This CSS tells every element inside an tag that contains tel or mailto to let clicks pass through it up to the a tag, which is then successfully read by the GTM Trigger.

In the OP's case, here's what I would do:

Trigger:

Click - All Elements 
Some Clicks 
Click URL Contains /donate

Helper Tag:

<style>
  a[href*="donate"] * {
     pointer-events: none !important; 
  }
</style>

This will catch all clicks on your donate link, even when you have inner HTML styling and when you have different text on buttons, etc...

Solution 3:[3]

yes, you can add css class with jquery .addClass('donate')

and that should works for you if you can add JS to your page

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 fernando

Related Questions