Search code examples
javascripthtmlcssgoogle-tag-manager

How to track when a Radio button is clicked in Google Tag Manager without clicking the submit button/moving on from the page?


I've a pretty simple question but its been bothering me for a few days now. I want to track when someone clicks a radio button as a trigger or click, essentially to track the click and pull the data I need even if they haven't clicked submit or moved off the page. I just want to be able to do it when its clicked on the page but I can't seem to get my head around it in Google Tag Manager.

I ended up coming up with this so far but its pulling all clicks.

My solution was to create a custom variable that isolates the radio button by its class using Query Selector, then create a tag that fires on all clicks. The issue is that this is bringing back way more data than I need. It is bringing back random clicks on the page.

I tried to set it up in google tag manager as Some clicks, then set it to My Radio Variable - Equals - True but this didn't bring back anything at all.

My Radio Variable:

function () {
   return document.querySelector('[class="radios__input"]:checked').id
}

I'm still new to this so any help would be greatly appreciated, thanks in advance.


Solution

  • This might require not only the variable.

    Now you can get the id from the radio element which is great.

    But you said it is returning a lot of other element you don't need so looks like it is lack of the trigger setting.

    Trigger should be the important one in this scenario. You can narrow down the range to only the radio element you want to track.

    Like configure the trigger to

    Click Element , match css selector , {Your special css selector to the radio button}


    If you are not familiar about the above I mentioned. You can attach some screenshots about what is your trigger and variable and how you use it in your GTM.