Google Tagging in Forms - Please Advise.

[Kelley_Zimmerma]

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?

[SanfordWhiteman]

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

No forms that do advanced form validation work correctly with that kind of "dumb" event trigger, it's not a Marketo thing. (Even a vanilla HTML + JS form that uses HTML5's built-in validation features will misfire.)

It's good that you aren't trying to use that trigger. You're almost there with your code but the problem isn't that the submit fires "too fast" exactly, it's that it, well, submits. And there's no way for the DataLayer push to be guaranteed to complete before the submit completes and the page unloads.

What you should instead do is

• listen for Marketo's onSuccess event (not onSubmit)
• return false; from your listener function so the page does not relocate to the Thank You URL immediately
• pass an eventCallback to dataLayer.push
• your eventCallback function sets the document.location.href

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

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

Eh, whoever wrote that post doesn't understand how Marketo forms work.

[Justin_Cook]

Hey Sanford,

So from what I've seen here & this article: https://chrisgoddard.blog/2018/02/03/how-to-track-marketo-forms-in-google-analytics-using-google-tag...  I've implemented this:

"HTML Marketo Form Listener"

<script>
(function(document, window, undefined){

var dataLayer = window.dataLayer;

try {

if(window.MktoForms2){
window.MktoForms2.whenReady(function(form){
var form_id = form.getId();
var $form = form.getFormElem();

dataLayer.push({
'event': 'marketo.loaded',
'marketo.form_id': form_id
});

form.onSubmit(function(){
dataLayer.push({
'event': 'marketo.submit',
'marketo.form_id': form_id,
});
});

form.onSuccess(function(values, followUpUrl){
dataLayer.push({
'event': 'marketo.success',
'marketo.form_id': form_id,
'marketo.form_values': values,
'eventCallback': function() {
dataLayer.push({
'marketo.follow_up_url': followUpUrl
})
}
});

if({{Debug Mode}}){
console.log(values);
return false;
} else {
return true;
}
});

});
}
} catch(err) {
if({{Debug Mode}}){
console.log(err);
}
}
})(document, window);
</script>

"Leads RX Conversion"

<script type="text/javascript">
var _lrx_profile = {
"firstName":"{{First Name}}",
"lastName":"{{Last Name}}",
"email":"{{Email}}",
"phone":"{{Phone}}",
"company":"{{Company}}",
"country":"{{Country}}"
};
_lrx_sendEvent('conversion',11522,null,JSON.stringify(_lrx_profile));
</script>

The HTML form listener is working as intended: I'm able to see the form events (ie form load, form submit, form success) and the form values are in the dataLayer after a successful submission. However, I'm having trouble with the 2nd script (Leads RX Conversion) capturing and sending the form values to our lead tracking platform. I'm able to see about 60-70% of the leads that submit a form in our Leads RX dashboard. Everything is implemented via Google Tag Manager. The LeadsRX script trigger fires on the success event. Do you see anything wrong here that would cause this issue? Did I do something wrong with the eventCallback? Any insight helps, thank you.