I have a form which I want to use Google tag manager to get the label text as an event label when someone clicks on the checkbox. I was able to get it to work when a user clicks on the actual label, but doesn't work when the user click on the checkbox rather than the label.
What I am trying to do is to get the text located by the side of the check box. from the example HTML code of the checkbox (pasted below), you can see both the checkbox and text are inside the tag and I need to get the text located next to the checkbox.
code
<div class="stockist-search-filter-checkboxes">
<div class="stockist-search-filter-checkbox">
<label>
<input name="filters" type="checkbox" value="11222">Home Specialist
</label>
</div>
</div>
code
Well, you can change a selector to catch the checkbox click rather than the label click. Or you can add an event listener to the checkbox on page load and send a dataLayer event from it for GTM to fire your event.
If this is not enough for you to resolve it, show your html around the checkbox (NOT as a screenshot) and show how you configured the trigger (as a screenshot).
Here's a code sample for adding a listener that pushes the DL event on checkbox changes.
var checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener('change', function() {
dataLayer = dataLayer || [];
dataLayer.push({
event:"checkbox_changed",
checkboxIsChecked: checkbox.checked,
checkboxName: checkbox.getAttribute("name")
})
});