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*

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'

I also attempted to use 

Click Element -> contains -> amazon-btn
, but it didn't work either.

htmlcsscss-selectorsgoogle-tag-manager

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.

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.

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 №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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to toggle between displaying divs using JavaScript and Jquery

How can I use JavaScript to show or hide specific divs on page load and upon clicking different links? I want to display the "houseImages" div by default, while hiding the "landImages", "renovationImages", "UpcomingImages", and "voteForNext" divs. Then, w ...

javascriptjqueryhtmlhideshow

Having trouble repositioning a div element in CSS

I am having an issue with my code. The problem I'm facing is that I am unable to move the green div.free_space below the other two divs, div.main_pic and div.navigation. I don't understand why this is happening. As I am still learning, I would g ...

htmlcss

What is causing my anchor tags not to reflow properly?

I've been working on my new website and I'm facing a challenge that I just can't seem to solve. Here's the link: When I resize my browser to "mobile width", making it narrower than the row of oval "Tags" below my site menu, I want the ...

htmlcss

Vue 3 allows for creating multiple cards with unique contents

I received this outcome: Content duplicated but not cloned as a card element Below is the code snippet <script setup> import { ref } from 'vue'; defineProps({ project: String, }); const projectList = ref([ { img: './src/asse ...

cssvue.jsvue-componentvuejs3

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

javascriptphphtmlajaxdynamicform

Is it possible to automatically adjust the cursor position in a textarea when the language is switched?

I am working with a textarea that needs to support both English and Arabic languages. In English, text is typically left-aligned, so the cursor should start on the left-hand side. However, in Arabic, text is right-aligned, meaning the cursor should begin ...

javascriptjqueryhtml

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

csshtml

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

What is the best way to include scrollbars with bootstrap?

I recently came across this HTML code snippet from a learning website: <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Example of Bootstrap 3 Simple Tables</title> <link rel="stylesheet" href="htt ...

jqueryhtmltwitter-bootstrap

How to use Javascript to set focus on a dropdown list within a PHP script

Having trouble setting focus on the dropdown list in my PHP page dc-test.php, where there are two dropdown lists that are interdependent. The values for these dropdown lists are fetched from a database table. I am unable to set focus on the first dropdown ...

phpjavascripthtmlfocus

Get the value of an HTML element

Is there a way to retrieve the value of an HTML element using PHP or JavaScript, especially when the value is dynamically loaded from another source? I have tried using jQuery with the DOM ready event, but often encounter the issue where the element's ...

javascriptphpjqueryhtml

The download attribute in HTML5 seems to be malfunctioning when encountering a 301 Moved Permanently

I am attempting to create an automatic download feature for a file from a URL with a 301 Moved Permanently redirection. Here is the current code: <a href="myserverapi/download?fileId=123" download="image.jpg" target="_blank" ...

javascripthtml

What is the best way to display index.ejs when the input field is blank?

If the input field is left empty when I click the form button, I want to redirect to "/". After clicking the button, the desired URL should be: http://localhost:3000 Header.ejs <form action="/search" method="GET"> < ...

javascripthtmlnode.jsexpressejs

Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code: .upper {position: absolute; top: 50%; bottom: 0; left: 50%; tra ...

javascriptjqueryhtmlcss

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

javascriptjqueryhtmlcss

Guide on utilizing Thymeleaf for dynamic updates in a table

My code includes a segment like this: <div class="ui-table"> <div class="items"> <div class="justify-content-end d-flex"> <span class="text- ...

javahtmlajaxspring-bootthymeleaf

Adaptable data table featuring varying sizes of columns and rows

I'm attempting to design a grid that resembles the following: The challenge I'm facing is how to ensure that the column and row names adjust properly with the grid in the center. Currently, this is the code I have: jsfiddle example t t t t e ...

htmlcssresponsiveness

Numerous covert fields within HTML

I am currently working on a popup dialog box where I need to include a set of values in hidden format. However, when I retrieve the value through AJAX post, only the last value is returned. In my PHP code snippet: $plan_ids=array(); foreach($test_plan as ...

phphtmlajax

Having issues with handling button click events in jQuery

I'm currently working with jQuery to show a div when a button is clicked, but for some reason, it's not functioning as expected... HTML: <input type="button" id="addmoresg" value="Add More" name="button"> <div id="addsg" style="display ...

jquerybuttonhtmlclick

How can I use CSS to place a div at the bottom of its container?

I am trying to figure out how to use CSS to position a div at the bottom of its container, but the size of the container is not fixed. Can anyone provide some guidance on this issue? Thank you in advance for helping me solve this problem. You can check o ...

htmlcssbootstrap-4