Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

Question

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "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've set up this trigger:

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

https://i.sstatic.net/ipsLy.png

The trigger doesn't activate when clicking on the element.

This is the click element displayed 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'

https://i.sstatic.net/LNfpM.png

I also attempted to use

Click Element -> contains -> amazon-btn

, but it didn't work either.

html css css-selectors google-tag-manager

Answer 1

Answer №1

Encountering a challenge with the Click - All Elements trigger, as it only returns the specific element that was clicked, which could just be an icon within a larger button. Our objective is to capture clicks anywhere on the button or target element. More details can be found at this source

To address this issue, I developed a custom JavaScript variable named 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 function generates a string containing all node names and their classes from the clicked element up to the <body> tag. For example:

body>div.main-container.content>p.first-section>a.amazon-link

I utilize this variable in the trigger to check for specific classes. https://i.sstatic.net/X0K5q.png

If there is a simpler or more effective method to obtain the value of the {{Click Element}} GTM variable in string format as described above, please share it as an answer and I will acknowledge it as the correct solution. https://i.sstatic.net/LNfpM.png

Answer 2

Encountering a challenge with the Click - All Elements trigger, as it only returns the specific element that was clicked, which could just be an icon within a larger button. Our objective is to capture clicks anywhere on the button or target element. More details can be found at this source

To address this issue, I developed a custom JavaScript variable named 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 function generates a string containing all node names and their classes from the clicked element up to the <body> tag. For example:

body>div.main-container.content>p.first-section>a.amazon-link

I utilize this variable in the trigger to check for specific classes. https://i.sstatic.net/X0K5q.png

If there is a simpler or more effective method to obtain the value of the {{Click Element}} GTM variable in string format as described above, please share it as an answer and I will acknowledge it as the correct solution. https://i.sstatic.net/LNfpM.png

Answer 3

Answer №2

To enhance the Trigger Configuration, consider incorporating the following condition:

Select Element by CSS selector .amazon-button, .amazon-button *

Although unverified, implementing this should trigger the desired action when the element containing the amazon-button class is clicked, or any descendant within that element.

Answer 4

To enhance the Trigger Configuration, consider incorporating the following condition:

Select Element by CSS selector .amazon-button, .amazon-button *

Although unverified, implementing this should trigger the desired action when the element containing the amazon-button class is clicked, or any descendant within that element.

Answer 5

Answer №3

Instead of clicking on all elements, try using the anchor element

Avoid selecting "Click > All Elements"

Opt for "Click > Just Links" instead

After that, apply your CSS selector

Answer 6

Instead of clicking on all elements, try using the anchor element

Avoid selecting "Click > All Elements"

Opt for "Click > Just Links" instead

After that, apply your CSS selector

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

Answer №1

Answer №2

Answer №3

Similar questions

Using conditional statements in CodeIgniter to display various menus

What is the best way to reveal and automatically scroll to a hidden div located at the bottom of a webpage?

What is the best way to modify the colors of two specific elements using a combination of CSS and JavaScript

Repeatedly triggering the Jquery Dialog Event

Hide a parent div in jQuery depending on the checkbox status

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Enhancing a JQuery progress bar with customized text and dynamic background color updates

React Images: Carousel display issue with images not centered

Transforming the playbackRate property of a web audio-enabled audio element

Variations in CSS Stylesheets for Various Parts of the Body

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide

Is it possible to distinguish CSS for varying input types?

Set the datepicker to automatically show today's date as the default selection

Tips for preventing the larger background from displaying a scroll on a web page

What are some strategies for increasing efficiency in my drag and drop process?

Challenges with formatting the <legend> tag and grid setup in bootstrap 4

Steps for creating a one-sided container in CSS

Can the distinction between a page refresh and closure be identified using the method below?

What is the best way to add an image using php, javascript, and browser storage?

Preventing the reoccurrence of function events