AnsweredAssumed Answered

Google Tagging in Forms - Please Advise.

Question asked by Kelley Zimmerman on Apr 4, 2019
Latest reply on Apr 4, 2019 by Sanford Whiteman

We are attempting to capture drop-down form field values in the dataLayer using Google Tag Manager to eventually pass those to Google Analytics as Events. Our forms have Business Profile data like Job Titles, and we will soon have Job Function, Company Size, etc.

 

We found and are modifying the instructions and process found here:

http://measureallthethin.gs/blog/tracking-marketo-forms-google-tag-manager/

 

Google Tag Manager has a built in Form Submission Trigger that helps “listen” for any successfully completed forms. We’ve been able to get that Trigger to work with non-marketo forms, and it doesn’t seem like Marketo forms work with that Trigger by default. In order to work around that issue, and force a dataLayer variable for the “gtm.formSubmit” like this (non-marketo form):

 

Once that gtm.formSubmit event is recorded, we can then see which form fields corresponded w/ which gtm.element Number:




We would then create a tag to pull the values stored in the correct gtm.element in the dataLayer and fire our Google Analytics events for (example) -- Business Profile > Job Type > CEO, COO, CFO, CIO, CTO, CMO.

 

 

Here’s our test form / landing page.

https://influence.ttnews.com/lp/marketo-form-submit-test/

The problem is, the form submits too fast for us to test. When we try to “ctrl+click” the submit button, which would send a TY page to open in a new tab, it doesn’t work. We changed the form to stay on the same page, but that still refreshes to a query string version of the page (?aliId=eyJpIjoidHJwZkZwUm1JcE82dUtQbSIsInQiOiJ4XC83dHE0TU1FOW9zaXM3TWI5a1YxZz09In0%253D)

And we’re unable to use the GTM preview mode or the Console in Web Developer tools to view the form submit and underlying gtm.elements.



Here’s the modified form embed:

 

<script src="//app-sj20.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1323"></form>

<script>

MktoForms2.loadForm("//app-sj20.marketo.com", "905-BBW-876", 1323, function(form) {

// Add an onSubmit handler

form.onSubmit(function(){

// Get the form field values

var vals = form.vals();

// You may wish to call other function calls here, for example to fire google analytics tracking or the like

// callSomeFunction(vals);

// We'll just alert them to show the principle

alert("Submitted values: " + JSON.stringify(vals));

});

});

</script>




And a sample of the custom Form Listener tag for marketo forms:

<script>

MktoForms2.whenReady(function (form) {

form.onSubmit(function(){

var vals = form.vals();

dataLayer.push({

'event': 'marketoFormSubmit',

'marketoTitle': vals['Title'],

});

});

});

</script>

 

But we don’t really know the Title field value.



Questions / Support Request:

  • Can someone help us on each of the steps in this process?
  • If no, can someone help us slow down, or modify the form submit so we can pull the dataLayer information before the form redirects or refreshes?

Outcomes