How do I add GA tracking to an embedded Marketo form?

[Anonymous]

I have used embed code to add a Marketo (newsletter sign-up) form to my main website.

I would like to track in Google Analytics each time it is submitted. Is this something I need to do with Google Tag Manager?

Does anyone have instructions/a sample of how to do this?

[SanfordWhiteman]

Every (Forms 2.0) form has an onSuccess handler that allows you to plug in JS code that'll run when the form is successfully submitted.

So add whatever extra tracking code you want inside the onSuccess (people who've followed me may note I've started to use the universal MktoForms2::whenReady for forms demos instead of the embedded-only ::onReady, but you can refactor as appropriate).  Like so:

MktoForms2.whenReady(function(form){

     form.onSuccess(function(vals,thankYouURL){

          // call the GA tracker here

     });

});

(GTM is just a wrapper.  Anything you can do with GTM you can do with GA directly, and I find it far, far easier to control event order using GA alone.)

[Anonymous]

How would you incorporate this into the standard form script? Can you show me what a finished example looks like? I am sorry but I need a little hand holding, but I offer donuts in exchange for assistance.

[SanfordWhiteman]

This form runs ga::send() to log the page visit only after the form has been successfully submitted (using the onSuccess event of the Forms 2.0 API):

MktoForms2 :: Lightbox :: GA onSuccess​

You can run any other ga::<method> in the same way.

[Anonymous]

Thanks Sanford. I have followed your instructions but can not get an event to fire into GA on the embedded form:

<script src="//app-lon03.marketo.com/js/forms2/js/forms2.min.js"></script><form id="mktoForm_1069"> </form><script>MktoForms2.loadForm("//app-lon03.marketo.com", "586-GPD-762", 1069,

function(form)

    {

        form.onSuccess(function(form,thankYouUrl){

            var formEl = this.formElem[0],

                formElParent = formEl.parentNode,

                thankYouText = "Thank you - please check your email.";

            formElParent.removeChild(formEl);

            formElParent.insertAdjacentHTML('beforeEnd',thankYouText);

            ga('send', 'event', 'marketo form', 'success', ga_label);

            return false;

        });

    });      

</script>

[SanfordWhiteman]

If you look in the Console, you'll see "ReferenceError: ga is not defined" after the form submits.  So the ga('send'...) is trying to run, but do you have the GA code actually loaded on the page and a ga('create'...) call earlier?  What's the URL?

[Anonymous]

Hi Sanford

The form is the newsletter sign up at the footer of most pages of our website e.g. What can I test? | WhatUsersDo

I have ga code on the page, but I think it's the ga ('create') that's missing.

Lee

[SanfordWhiteman]

It's not the ga('create').

You're calling ga('send') with four additional unnamed parameters ("positional parameters"):

     ga('send', 'event', 'marketo form', 'success', ga_label);

ga_label is not defined anywhere on your page.

I don't know what you want to be sending there, but the script is gonna barf when it reaches a reference error.

[Ulf_Deeg]

I gotta admit, I haven't used GTM with Marketo forms, yet. However I would go for a tag management solution to use global form tracking to push GA events. It's far more manageable - all in one place. Also works with all forms.

In GTM it is just one Tag and one or two Lookup Tables.

1. Pull in the form ID and/or Page URI and do a lookup table to get meaningful event action and event label values in GA.
2. Then define GA Goals based on the "Form Submit" event to track GA conversion for lead generation.

You probably want to exclude Onsite search boxes and CMS login forms.

[SanfordWhiteman]

The reason a dumb, global "tag manager" will never be 100% reliable is that it cannot be aware of a form's internal events. Only the form object will be aware that it has created and successfully submitted form data via Ajax. An external library cannot know this, and it will send erroneous data when the form has not been validated (but has been "submitted" as far as global HTML events go) and also when the form has been "submitted" but has actually encountered a server error. Only in the Forms 2.0 onSuccess handler can you be sure that Marketo has successfully received data. Anywhere else and what you're logging is simply the intent to submit, not the submit.

I believe we should strive to control for as many errors as possible in our code, since network conditions and user/browser behavior already make web analytics fuzzy enough!