Using GTM to track Marketo form fills

[Ellena_Frost]

Hi, 

I am completely new to Google Tag Manager and Analytics and I am trying to implement Google Tag Manager tracking on our Marketo embedded forms so it shows up in our Google Analytics Top Events. I have followed this blog - https://nettlesnet.com/marketo-form-tracking-google-tag-manager-analytics/

Which has allowed me to see when someone fills out a form, when it's been submitted and when it's a success in GTM Tag Assistant. So I think the Event - Form Listener tag is working - I used the code from the blog above - but it doesn't look like my custom event trigger or event form success tag is working to send the information through to Google Analytics. 

If anyone has any advice that would be very appreciated. 

Thanks. 

[ajavinash]

@Ellena_Frost 
There are couple of post already solved in community on Google Tag Manager Form Fill Out Tracking.

Mostly this post will be helpful to resolve your issue. Thank you.

Thanks,

Avinash Jadhav

[Darshil_Shah1]

I wasn't able to access the link you shared (it says Access denied) so can’t see what have you followed through. But if you're setting this in the GTM, you would need to create the Google Analytics event tag, and set it to trigger on the events you would wanna capture in the GA (i.e., form view, submission, etc.).

I think referring this article should give you some idea: https://chrisgoddard.blog/2018/02/03/how-to-track-marketo-forms-in-google-analytics-using-google-tag...

[Ellena_Frost]

Hi Darshil, 

Thanks, I am getting parse errors when I try to use the code suggested in this article:

<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,

        'marketo.follow_up_url': followUpUrl

      });

      if({{Debug Mode}}){

        console.log(values);

        return false;

      } else {

        return true;

      }

    });

  });

}

[Darshil_Shah1 · Accepted solution]

There's an extra "," character in the form.onSubmit function at the end of 'marketo.form_id': form_id line. Can you try by replacing the form.onSubmit function definition with the below?

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

[Ellena_Frost]

Hi Darshil, 

I've tried that, unfortunately, it's still saying JavaScript compiler error, error at line 41, character 1: Parse error. '}' expected. So isn't allowing me to preview anything. 

The other script I used before was the below, this was accepted by GTM for the form listener but the one I've put above wasn't, is there a reason I can't use this one for tracking forms on success? - 

<script>
/**
 * push Marketo form events and values to Google Tag Manager via the data layer
 * uses the Marketo Forms 2.0 API
 */
(function marketoFormListener (MktoForms2) {
    "use strict";
    /**
     * helper function to push invalid Marketo field errors to GTM
     * @returns {undefined}
     */
    function waitForError () {
        var element, input, mktoErrorMsg;
        // check for error message
        element = document.querySelector(".mktoErrorMsg");
        if (element) {
            mktoErrorMsg = element.textContent || element.innerText;
            // look for invalid input
            input = document.querySelector("input.mktoInvalid, .mktoInvalid input");
            window.dataLayer.push({
                "event": "mkto.form.error",
                "mkto.form.error.message": mktoErrorMsg,
                "gtm.element": input,
                "gtm.elementClasses": input && input.className || "",
                "gtm.elementId": input && input.id || "",
                "gtm.elementName": input && input.name || "",
                "gtm.elementTarget": input && input.target || ""
            });
        }
    }
    if (MktoForms2) {
        MktoForms2.whenReady(function handleReady (form) {
            window.dataLayer.push({
                "event": "mkto.form.ready",
                "mkto.form.id": form.getId(),
                "mkto.form.submittable": form.submittable(),
                "mkto.form.allFieldsFilled": form.allFieldsFilled(),
                "mkto.form.values": form.getValues()
            });
            form.onValidate(function handleValidate (valid) {
                window.dataLayer.push({
                    "event": "mkto.form.validate",
                    "mkto.form.valid": valid
                });
                // wait for the error message to appear
                setTimeout(waitForError, 0);
            });
            form.onSubmit(function handleSubmit (thisForm) {
                var button;
                button = thisForm.getFormElem().find("button[type=\"submit\"]");
                window.dataLayer.push({
                    "event": "mkto.form.submit",
                    "mkto.form.id": thisForm.getId(),
                    "mkto.form.submittable": thisForm.submittable(),
                    "mkto.form.allFieldsFilled": thisForm.allFieldsFilled(),
                    "mkto.form.values": thisForm.getValues(),
                    "mkto.form.button": {
                        "classes": button.attr("class"),
                        "text": button.text(),
                        "type": "submit"
                    }
                });
            });
            form.onSuccess(function handleSuccess (values, followUpUrl) {
                window.dataLayer.push({
                    "event": "mkto.form.success",
                    "mkto.form.values": values,
                    "mkto.form.followUpUrl": followUpUrl
                });
            });
        });
        MktoForms2.whenRendered(function handleRendered (form) {
            window.dataLayer.push({
                "event": "mkto.form.rendered",
                "mkto.form.id": form.getId(),
                "mkto.form.submittable": form.submittable(),
                "mkto.form.allFieldsFilled": form.allFieldsFilled(),
                "mkto.form.values": form.getValues()
            });
        });
    }
}(window.MktoForms2));
</script>

[Darshil_Shah1]

Well, if you're able get the data in to GTM, you don't need to redo your script - you can create the custom events and triggers (you may refer the last part of the blog I linked, section's titled "Configuring Triggers and Events") for sending the data to the GA when the events are logged in the GTM. Just make sure that the event names you use in the events and triggers correspond to what you have set in the script, look for the value for the "event" attribute in each function where you're adding custom events in the data layer i.e., in MktoForms2.whenReady,  form.onSubmit, form.onSuccess, etc.