How to Track Checkboxes with Google Tag Manager

Google Tag Manager is a wonderful, life-saving tool for tracking events. Life would have been pretty difficult without it!

I came across a lot of people asking how to track the checkboxes on different community platforms. So, I decided to jot down a simple tutorial to help the fellows.

There are multiple cases when you have to verify if the checkbox is checked or not, but most of the times this is used within forms. That’s why I created a form in WuFoo for testing and injected GTM code for testing purpose.

Below is how my form looks like:

As you can see there are multiple checkboxes in this form, but for the understanding purpose, I am only testing the ‘First Choice’ checkbox.

Find the id or class name of the box by using the inspect element method.

Create a new custom javascript variable in Google Tag Manager. This variable will return true if the box is checked otherwise it returns false. Copy and paste the below code into the variable field.

function checked() {
    var check = jQuery('#Field3').attr("checked");
    if(check === "checked") {
    return true;
    } else {
    return false;
    }
}

Replace the ID(#Field3) with the one you copied in the previous step.

Now, let’s say you want to fire a tag when this checkbox is checked. So I am just going to show you to use this variable in the trigger. The trigger that will fire the form submission tag.

Change the other conditions except checked equals true according to your requirements. Save and test this in preview mode.

You may have a different scenario but the logic is to create a variable that will return true if the checkbox is checked.