-
Implementing HTML Custom Attributes with Google Tag Manager for Tracking Button Clicks
Hey, I’ve got quite a task in front of me. I’ve got these long lists of buttons, and each one represents a car model. Now, all these buttons share a custom data attribute called “modellist”, but they also each have a unique data attribute of their own car model name. Oh, and they’re not links, just to make it clear. Picture it like this, check out this image.
Instead of going through a tedious process of creating a new tag for every button, I was wondering if there’s a smarter, quicker way to handle this. I’d like to use Google Tag Manager and GA4 to track when people click on these buttons. Have any of you done something similar or know a way that could work? I could really use the help, so thanks in advance for your suggestions!
-
2 Replies
-
Alright, let’s break this down into three steps:
1. Start by creating a ‘Custom JavaScript Variable’
Here’s a screenshot of how to do it
Then, use this code:`
function(){
// Getting the clicked element
var clickElement = {{Click Element}};// Making sure we have the parent element we want. If not, we return ‘false’
if(!clickElement.closest(“div.stepped-selection__list-item”))
return false;// Checking if the parent dom has the attribute we want.
// Returns the attribute value if it’s there, ‘false’ if it’s not.
var modelListDom = clickElement.closest(“div.stepped-selection__list-item”);
if(modelListDom.hasAttribute(“data-trackervalue”)){
return modelListDom.getAttribute(“data-trackervalue”);
}
return false;
}
`2. Now, let’s create the trigger
Here’s another screenshot for you:
Start with the ‘click element’ > ‘match css selector’ to nab all the elements inside the selector. You can tweak this a bit to suit your case. Then, use the ‘Variable’ we created in step1. If this gives back ‘false’, we don’t want to trigger the tag.3. Next up, Create the Tag
Doing the ‘Tag’ config is the easy bit. Just take the ‘Trigger’ from step2, name the event and event parameter to your liking. Finally, set the event parameter value as the ‘Variable’ from Step1. -
Sure, you can handle this through Google Tag Manager. You’ll need to create a new GA4 event tag that tracks clicks on those buttons. You’ll probably want to use a click Element attribute that captures the unique data attribute of each button. This way, you can easily differentiate between the car model clicks in your analytics. So basically, GTM is your way forward.
Log in to reply.