0
261
ViewsGoogle Tag Manager Help on Selecting a Tag & Trigger
I want to track clicks to an icon on my site using Google Tag Manager. I've tried many combinations of tags & triggers but I can't get it working. Could you recommend me the right Tag & Trigger please?
Here are the details when I right click on the icon & Inspect Element:
Copy Element
<path d="M21.886 7.46c-.265-.483-.827-.599-1.271-.247l-1.74 1.38c-2.164 1.718-2.44 4.79-.618 6.86l5.96 6.772c1.822 2.07 5.011 2.316 7.13.542l1.313-1.1c.428-.357.444-.946.028-1.322l-2.904-2.63c-.412-.373-1.105-.404-1.54-.076l-1.714 1.296-4.843-5.353 1.743-1.259c.446-.321.595-.97.327-1.457l-1.87-3.406z" fill-rule="evenodd"></path>
Copy Selector
#comp-kt9muz3o > div._3mcAP > svg > g > path
Copy JS Path
document.querySelector("#comp-kt9muz3o > div._3mcAP > svg > g > path")
Copy xPath
//*[@id="comp-kt9muz3o"]/div[1]/svg/g/path
Copy Full xPath
/html/body/div/div/div[3]/div/div[3]/div[2]/a[1]/div[1]/svg/g/path
These are the Data Layer Values in Google Tag Manager when I click on the icon:
{
event: "lead",
gtm: {
uniqueEventId: 9,
start: 1635564494326,
element: "SVGSVGElement: div._2qGZE._1Mc8D#QUICK_ACTION_BAR > div" +
"._17TBS#QUICK_ACTION_BARactionsContainer > a._1LxZI._2c" +
"rhc#comp-kt9muz3o > div._3mcAP > svg",
elementClasses: "",
elementId: "",
elementTarget: "",
elementUrl: ""
},
url: "/contact-1?gtm_debug=1635564492290",
title: "Contact | Title of Website"
}
So currently my choice of Tag is Google Analytics: GA4 Event. I don't know what to choose for the Trigger.
1 answers
Answer question0
Check that the css selector is actually unique. You can do that by checking the number of elements in the node list returned from
document.querySelectorAll("#comp-kt9muz3o > div._3mcAP > svg > g > path")
If it is unique, then you can proceed to setting up the trigger. You want a click trigger
https://support.google.com/tagmanager/answer/7679320?hl=en&ref_topic=7679108
and choose All Elements > This trigger fires on: Some Clicks > then choose built in variable from the dropdown on the lower left, which will bring up this interface:
You will want click classes, then > matches CSS selector and paste in your selector, ending up like this:
If you don't have a unique selector, then you'll have to figure out another way to uniquely identify the element and set up the trigger to work with that identifier.