Google Tag Manager Form Fill Out Tracking

[Anonymous]

I’ve been trying to place a script on our Marketo landing pages so we can track form submissions.  Please note: I’m a very poor developer, so I had to try researching everything I could for this information. 

I found a blog post that I thought had my answer (https://www.wpromote.com/blog/setting-up-google-analytics-event-tracking-for-marketo-landing-pages/). However, it’s not working properly.  Here’s the Javscript I put together:

<script language="javascript">

1. window.onload=function(){
2. document.getElementById('mktoForm_1341').onClick="ga(‘send’, ‘event’, { eventCategory: ‘marketo’, eventAction: ‘form-fill’, eventLavel: ‘test1’});"}

</script>

And nothing’s firing properly upon a successful form completion.  Here is the landing page I’m testing this all out with: http://pages.na.industrial.panasonic.com/Grid-EYE-Landing-Page-lella-test.html

Can someone help me troubleshoot this issue?  Thank you!

[SanfordWhiteman · Accepted solution]

I found a blog post that I thought had my answer (https://www.wpromote.com/blog/setting-up-google-analytics-event-tracking-for-marketo-landing-pages/).

That guidance in that blog post is competely wrong for Marketo forms (or really all forms). Never capture a click on the submit button. That will register a conversion even if the person doesn't enter any information in the form: button clicks fire no matter whether validation fails or succeeds.

Also, you can't use window.onload with Marketo forms. There's no guarantee at all that the form will exist on the page when onload fires.

And you don't use DOM events on Marketo forms, you use their built-in event model.

You must capture the Forms API onSuccess event, and you must use the GA hitCallback option like so:

  MktoForms2.whenReady(function(form) {
    form.onSuccess(function(vals, tyURL) {
      ga('send', 'event', {
        eventCategory: 'marketo',
        eventAction: 'form-fill',
        eventLabel: 'test1',
        hitCallback: function() {
          document.location.href = tyURL;
        }
      });
      return false;
    });
  });

.

[Harvey_Jewell2]

Hey Sanford! Struggling to get this working on my site: https://www.ean.com/734748748484test-ga-form-2

Same setup as Bethany's but no Events showing in GA real-time.

Suggestions?

[SanfordWhiteman]

It's an upper-case "M": MktoForms2

[Harvey_Jewell2]

Seeing 'Uncaught ReferenceError: ga is not defined' now and the form won't submit. Thoughts?

[SanfordWhiteman]

P.S. That isn't GTM tracking, it's standard GA tracking (which is indeed preferable unless you need GTM).

[Nicholas_Manojl]

Hi Bethany,

This is a method i've used:

{form.onSuccess(function(values, followUpUrl)

  dataLayer.push({'event': 'form_success'});

  return false;});});

In GTM, you can choose to fire a tag when this event ('form_success') occurs.

[SanfordWhiteman]

Gotta use an eventCallback there. Bethany's forms have separate Thank Yous.

[Nicholas_Manojl]

I don't follow. Does the final statement need to know the event has been sent?

[SanfordWhiteman]

When you return false from onSuccess, the person doesn't go to the Thank You page (this is good because you want to log an event beforehand).

You redirect them to the Thank You page after the event has been logged, using hitCallback (GA) or eventCallback (GTM).