How to track Marketo forms in Google Analytics using using API and Google Tag Manager (GTM)

[dkonig]

We have a site that uses Marketo embedded Marketo forms. We want to implement a bit more sophisticated conversion tracking other than a button click for form submission. The thought is we would work with the Forms 2.0 API and utilize the onSuccess callback. After a successful callback we would push the conversion to Google Analytics. 

I'm not a coder by trade but my understanding is that I would use a variation of this code.

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) {
    // Add an onSuccess handler
    form.onSuccess(function(values, followUpUrl) {
        // Get the form's jQuery element and hide it
        form.getFormElem().hide();
        // Return false to prevent the submission handler from taking the lead to the follow up url
        return false;
    });
});

According to this article it is suggested that something along the lines of the following code be inserted

ga('send', 'event', { 
eventCategory: 'event_registration', 
eventAction: 'form-submit', 
eventLabel: 'page title' // I'm planning on replacing this with a dynamic value that grabs the page title if possible
});

in place of 

form.getFormElem().hide();

The final comment in that article suggests the code is incomplete and the user should use the GA hitCallback feature. 

This article seems to give some hints on how to do this since  they use the hitCallback function with the onSuccess handler but I am not sure I completely understand how it functions. This is also utilizing the data layer instead of the just pushing the event into Google Analytics as the first bit of code does.

The code: 

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
})
}
});

I'm fine with using the data layer since I'd want to use this data in other analytics platforms. My question is how do I implement this? Should it look something like this?

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057, function(form) {
    // Add an onSuccess handler
    form.onSuccess(function(values, followUpUrl) {
        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
                    })
                }
            });
        return false;
    });
});

Any thoughts on how to fully implement this from the code to what needs to be set up in Google Tag Manager?

[SanfordWhiteman]

I wouldn't say that last code snippet makes sense. 🙂 It also has a syntax error.

If you want to push to the dataLayer and then redirect when complete, that's like so:

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057);
MktoForms2.whenReady(function(mktoForm) {
  mktoForm.onSuccess(function(values, followUpUrl) {
    dataLayer.push({
      "event": "marketo.success",
      "marketo.form_id": form_id,
      "marketo.form_values": values,
      "marketo.follow_up_url": followUpUrl,
      "eventCallback": function () {
        document.location.href = followUpUrl;
      }
    });
    return false;
  })
});

Note I prefer to use the separate whenReady rather than the 4th argument to loadForm, as it doesn't require your instance-specific information to be inside the (often copied-and-pasted) code.

[dkonig]

Thanks for the rework on that code. I'm not a coder by trade so it's no surprise that I made those errors as I tried to mash up various pieces of code.

If we were going to not send somebody to a landing page and just refresh the form on submission I imagine I can drop these lines of code?

"marketo.follow_up_url": followUpUrl,
"eventCallback": function () {
document.location.href = followUpUrl;
}

[SanfordWhiteman]

No, you absolutely still need that part.

Even if the Thank You page is the same page the form is on, you still need to wait for the Event to be logged before refreshing.

The only time you do not need to have an eventCallback is if you are literally staying on the page, not even refreshing it in-place.

[dkonig]

Thanks. I believe our forms are set up with the "stay on page' option. There is no page refresh. Just a form reset/refresh. Sounds like this still requires the eventCallback. I'm not sure why you would ever stay on a page and not refresh the form.

[SanfordWhiteman]

Stay on Page refreshes the entire page, as you can see in the Network log.

You would not refresh the page if you were just going to hide the form after submission.

There really isn't any such thing as "refreshing a form," perhaps you mean "resetting" which is a standard method.

[dkonig]

Ah. Yes. I see that. I might have been looking at a form embedded in an iframe where the page doesn't refresh but the iframe does. I guess that would still require the eventCallback right?

[SanfordWhiteman]

Yes, that's right.

[dkonig]

Sorry for the late reply. Now, if we use the same form on multiple pages I imagine there is probably a way to push some additional data to the dataLayer that would indicate which page the form was on. Correct? is there a best practice to do something like this?

[SanfordWhiteman]

Not a single "best" practice, but certainly you can push the current URL (document.location.href) to the dataLayer.