Learn business growth with Google Analytics 4 Forums Google Analytics 4 Implementing HTML Custom Attributes with Google Tag Manager for Tracking Button Clicks

  • Implementing HTML Custom Attributes with Google Tag Manager for Tracking Button Clicks

    Posted by Anh on 26 December 2022 at 9:47 pm

    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!

    Brooke replied 10 months, 3 weeks ago 3 Members · 2 Replies
  • 2 Replies
  • Jacob

    Member
    21 April 2023 at 7:35 am

    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
    enter image description here
    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:
    enter image description here
    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.

  • Brooke

    Member
    22 April 2023 at 10:44 pm

    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.