Reading HTML Elements

Question

I am trying to create an event in Google Analytics based on a form submit using tag manager.

I initially tried to setup a form submit listener, but since there is JS validation that happens, and the form is submitted through JS, I have moved on to try the click listener. (Basically trying to solve this problem without getting a dev team involved FOR NOW. I was told that's why the tag wasn't firing, b/c the form submit event is executed by JS. Eventually I will have to, b/c I don't want to track events before validation happens).

So I have a click listener on my form submit button and it fires the event just fine. However, I am trying to use a custom JS macro to read the selected values of two form field boxes in this form.

But for testing purposes before I try to read these specific values, I am just trying to read ANY data from the form. This is my macro that is firing. I have defined {{firstName}} and {{lastName}} as macros as well. They are HTML input fields, with unique id's. They are macro's defined as DOM Elements, with their respective id's: first-name and last-name.

function() {
   var firstName = {{firstName}}.value;
   var lastName = {{lastName}}.value;

   var myForm = {{Ajax Contact Form}};

   console.log({{Ajax Contact Form}});
   console.log("Element Classes: " + myclass);
   console.log({{firstName}});
   console.log({{lastName}});

   return firstName + '-' + lastName;
}

But it's not capturing any data. I am not clearing the form fields until 3 seconds after the form submits, and this data is already written. I have attached a screenshot of what is printing to the console.

Again, I am not using the form submit listener here, I am using the click event listener, and I am just trying to read some values from some form elements when the button is clicked.

Link to image http://i.imgur.com/ktE3Kge.png

UPDATE

I am starting to think I need a custom HTML tag. So when my click rule is fired, it finds the form values I need, create a virual URL and push it to the dataLayer via this new custom HTML tag. Then what? Create another Google Analytics tag with a track type of 'event' or something? Or am I way off course here?

Answer 1

I've had issues with using DOM element macro.

Trying using js to get the form values:

function() {
   var firstName = document.getElementById('first-name').value;
   var lastName = document.getElementById('last-name').value;

   var myForm = {{Ajax Contact Form}};

   console.log({{Ajax Contact Form}});
   console.log("Element Classes: " + myclass);
   console.log(firstName);
   console.log(lastName);

   return firstName + '-' + lastName;
}

Let me know what that does.