So I've got a query. I created a custom tag in Google Tag Manager with some event listeners on field change on a form. I've setup the trigger to load on DOM Ready and only on a specific page.
What it does is add event listeners on several field changes and when each of these fields change then add/create a cookie with said value by grabbing the value from the DOM.
When I then test this in Tag Assistant I can see it loads fine and as I'm typing in values on the form it starts creating the cookies. I then publish it live and it just doesn't work. Not sure if the tag isn't triggering or it just doesn't work for some reason.
Below is my script:
(function() {
var countryValue = document.getElementById('countrySelect').innerText;
document.cookie = "country=" + countryValue;
// Event listner for field change
document.getElementById("email").addEventListener("change", function() {
var emailValue = document.getElementById('email').value;
// Create email cookie
document.cookie = "email=" + emailValue;
});
// Event listner for firsname field change
document.getElementById("firstname").addEventListener("change", function() {
var firstNameValue = document.getElementById('firstname').value;
document.cookie = "firstName=" + firstNameValue;
});
// Event listner for lastname field change
document.getElementById("lastname").addEventListener("change", function() {
var lastNameValue = document.getElementById('lastname').value;
document.cookie = "lastName=" + lastNameValue;
});
// Event listner for countrySelect field change
document.getElementById("countrySelect").addEventListener("change", function() {
document.cookie = "country=" + countryValue;
});
// Event listner for phone field change
document.getElementById("phone").addEventListener("change", function() {
var phoneNumber = document.getElementById('phone').value;
document.cookie = "phone=" + phoneNumber;
});
})();I'll obviously fix up the script and clean it up a bit but this was just to test whether it works and it does in tag assistant but not in production..