1

We have a checkout page that includes a checkbox for email signups. I need to be able to track the number of orders submitted with/without the checkbox checked as a means of verifying that the right number of email addresses are being captured for subscription (email is a required field elsewhere on the page).

Shows form containing required fields first name, last name, phone number and email address, plus the checkbox we are trying to track

In GTM, I created this variable:

function(){
  return document.querySelector("input#ion-cb-1").checked;
}

I also made a tag that is a G4 Event with a custom object data source that references the variable above.

The trigger is a Click-All Elements trigger that only fires on the checkout page and when the click text contains 'Place Order'. I have tried repeatedly to limit the tag to fire only when the box is checked (or unchecked) but I have not been able to figure out how to do this, and I'm also not sure it will provide me the tracking I need.

Here is the code for the checkbox:

<ion-col class="px-0 md" style="flex: 0 0 calc(calc(12 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(12 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(12 / var(--ion-grid-columns, 12)) * 100%);"><ion-row class="ion-align-items-center md"><ion-checkbox class="ion-color ion-color-success md checkbox-checked interactive" modelvalue="true" data-cy="checkbox-email" aria-checked="true" role="checkbox" color="success"><input type="hidden" class="aux-input" name="ion-cb-1" value="on"></ion-checkbox><ion-label class="pl-8 small interstate-bold sc-ion-label-md-h sc-ion-label-md-s ion-color ion-color-dark md" color="dark">Sign up for deals by email </ion-label></ion-row></ion-col>

While this code does not contain the ID referenced in the JavaScript function, I do see it when I drill down into the code in the Inspector... Not sure why it isn't copying when I copy the entire section of code:

<input type="checkbox" aria-checked="true" id="ion-cb-1">

Ordering on this site does not seem to be a form-submit situation. Here is the code for the place order button:

<ion-row data-v-2f723a7e="" class="md ion-justify-content-center submit-btn"><ion-col data-v-2f723a7e="" class="md pa-0 mb-8" style="flex: 0 0 calc(calc(12 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(12 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(12 / var(--ion-grid-columns, 12)) * 100%);"><ion-button data-v-2f723a7e="" class="ion-color ion-color-primary md button button-block button-solid ion-activatable ion-focusable full-height ma-0 bold ion-activated" id="place-order" color="primary" expand="block"><div data-v-2f723a7e="">Place Order</div></ion-button></ion-col></ion-row>

I also tried this JavaScript for the variable, but saw another post that corrected it to the above:

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

I named the variable 'checked' and I tried limiting the trigger to checked = true and checked = false; neither worked; the tag won't fire at all with these restrictions. I tried this with both versions of the variable.

I really just want to know how many orders are submitted with the box unchecked!

0