Google Tag Manager- is there a way to track when a checkbox is selected and then the user hits the Checkout button on that same page?

Question

Sorry if this is a dumb question. I'm a GTM noob and from googling I see tutorials on tracking the clicks (checkbox element and Checkout button) separately but was wondering if there's any way this can be one Event in Google Analytics.

For example, on our store's cart page a checkbox to add a product's accessory is selected by default. I want to know how many people are hitting the Checkout button and leaving this "add an accessory" checkbox checked.

Is there a way to push an Event as something like "Checkout click - Add On Checkbox - Selected"?

Thanks in advance!

Answer 1

Yes, you can detect if a checkbox is checked on any event, using a Custom Javascript variable, value of which you then can use in the trigger, or in your tag. Or in a different variable, of course.

If you provide the html of your checkbox, we can give you code for the variable to return the checkbox state if you're not comfortable with JS.

//Upd

In your code, you have a few errors. First, no need to name the function in the CJS variable. Also, you write a bit too much code and rely on JQuery with no need. It can be solved simpler with pure JS like so:

function(){
  return document.querySelector("input#add-subscription").checked;
}

Now, about the rest of what you're saying. Having this checkbox action. You have a wrong understanding. This is not a checkbox action. This code only gets the state of the checkbox whenever the value of this variable is being used.

So if you're gonna use the value of this variable when a person clicks on the form submission CTA, then this code will run on that click, assessing the value of the checkbox.

Your amazon example works. But you don't need to assume that the checkbox is checked by default. The default doesn't mean anything here. The state of the checkbox is assessed on the trigger where the value of the CJS var is used, that's it.

We're proceeding with your question: I'm confused about having the multiple criteria (checkbox is checked and user hits Checkout button) and if including both as triggers would work You're making another mistake here. They're not both triggers. One of them is a trigger indeed, which is a click trigger. The other, however, is a condition for the trigger to fire. You know how in the trigger, you click the checkbox that says "some events"? This fella: Once you have that, you can add conditions. Like, only use this trigger when... when what? Anything really. In our case it would be when the checkbox is true.

Finally, for the checkout click, you don't typically need more than just the click trigger with the CSS selector criteria.

Anyhow, to be short, this is about how your trigger should look like:

Answer 2

Thanks! In this case the checkbox element for my cart page is:

<input id="add-subscription" type="checkbox" checked="checked" class="form-checkbox js-product-subscribe-newux mt-10 sm:mt-0" name="sub" value="remove">

I was thinking the variable could be:

function checked() {
    var check = jQuery('form-checkbox js-product-subscribe-newux mt-10 sm:mt-0').attr("checked");
    if(check === "checked") {
        return true;
    } else {
        return false;
    }
}

However where I get confused is having this checkbox action (checkbox is checked) only count as an event when the user hits the Checkout button. Using this Amazon cart page as an example, assuming the "This is a gift" checkbox is clicked by default, "This is a gift" checkbox would I just then add the Trigger as having two criteria, roughly: {{Checkbox Variable}} = "true" & Click Text = "Proceed to Checkout? I'm confused about having the multiple criteria (checkbox is checked and user hits Checkout button) and if including both as triggers would work in this case so I can see how many times users click to checkout from the cart while leaving that box checked. Or would the Click on the Checkout button need to be it's own separate variable rather than just specifying the Checkout button name in the trigger criteria?