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

Question

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 · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded