Has anyone successfully tracked Google Ananlytics goal conversions with Marketo form submissions without a thank you destination URL?

[Angela_Ruggeri1]

I am currently trying to track goal conversions using events. I would like an event to fire off after a successful form submit. we do not have thank you pages rather a "thank you modal" that appears and takes the place of the form. We can't get the Event to fire and trigger a conversion.

Page URL: http://www.inxpo.com

Function:

          <script>

               MktoForms2.loadForm("//app-sj04.marketo.com", "924-COQ-679", 1295, function(form)

          {

            //Add an onSuccess handler

            form.onSuccess(function(form){

  ga('send', 'event', {

   eventCategory: 'form',

   eventAction: 'submit',

   eventLabel: 'contact'           

              //return false to prevent the submission handler from taking the lead to the follow up url.

  });

  });

  return false;

   });

        </script> 

What we want to show on successful form submission:

<div class="reveal-modal large" data-reveal="" id="thank-you-modal">

      <a class="close-reveal-modal">×</a>

<h2 id="ModalTitle">Thank you for contacting us! A solutions expert will be with you momentarily.</h2>

    </div>

Any ideas on how to get it to trigger the event and conversion?

[Grégoire_Miche2]

YOu need a hitcallback in the gaevent for it to work correctly.

Sanford Whiteman​ is the one who taught me this

-Greg

[SanfordWhiteman]

YOu need a hitcallback in the gaevent for it to work correctly.

Interestingly this isn't a case for a hitCallback. The callback is necessary if the page is going to unload (you must wait for the GA event to complete before allowing the redirection to a different page). But Angela is staying on the page so it's OK if the GA event runs in the background.

Thanks for remembering, though! It's an important consideration, and you could use it here without harm, but it might be misleading so I left it out.

[SanfordWhiteman]

Seems like two goals mixed together. They may be related in your overall concept, but the goals are accomplished differently.

[1] Sending the GA conversion event before any other onSuccess action takes place.

To stop the default onSuccess action, you must return false from the onSuccess listener. That's not what you're doing now. You have the return false; at the end of the onReady listener.  The code should be:

MktoForms2.loadForm("//app-sj04.marketo.com", "924-COQ-679", 1295, function(form){
    form.onSuccess(function(vals,tyURL) {
      ga('send', 'event', {
        eventCategory: 'form',
        eventAction: 'submit',
        eventLabel: 'contact'
      });
      return false;
    });
  });

Can you see that the return false is in a very different place in the code?

[2] Displaying the Thank You text instead of going to a separate Thank You URL.

This is done by either destroying the form and showing some other element, or replacing the form's inner content with your Thank You text.

To destroy the form you can do:

MktoForms2.loadForm("//app-sj04.marketo.com", "924-COQ-679", 1295, function(form){
    form.onSuccess(function(vals,tyURL) {
      var formEl = form.getFormElem()[0];
      ga('send', 'event', {
        eventCategory: 'form',
        eventAction: 'submit',
        eventLabel: 'contact'
      });
      formEl.parentNode.removeChild(formEl);
      // code to show the modal here
      return false;
    });
  });

However deciding how to display your modal after the <form> element is gone is a job for your web designer. That can be done largely via CSS (by defaulting to display:none and adding a class that switches it to display:block).  I can't tell you how the designer wants to do this, but I've shown where that step would go.

[Anonymous]

Angela, did this end up working for you?

Sanford Whiteman, have you seen any successful implementations of GTM for marketo form submission tracking?

I'm trying to track form completions on a simple email capture form that replaces the form with a thank you message. I've tried configuring the GTM tag following suggestions in this blog post from AnalyticsMania, but it won't fire.

Thoughts?

Cameron

[SanfordWhiteman]

Sanford Whiteman, have you seen any successful implementations of GTM for marketo form submission tracking?

Sure, the ones I've built.

I'm trying to track form completions on a simple email capture form that replaces the form with a thank you message. I've tried configuring the GTM tag following suggestions in this blog post from AnalyticsMania, but it won't fire.

Let me know the URL and I'll check out what you've got.

[Anonymous]

Thanks, Sanford

This page (https://pointclickcare.com/senior-care-industry-specific-software-solutions/home-health/ ) has a simple email capture form at the bottom with the success message replacing the form.

In GTM I've configured the following:

TAG

• Tag Type: Universal Analytics
• Track Type: Event
• Category: Form Submission
• Action: List Subscription
• Label: {{Page URL}}
• GA Settings: {{GA}} -- my GA UID

TRIGGER

• Trigger Type: Form Submisson
• Wait for Tags? No
• Check Validation? No
• Fire on: Some Forms
• Where: Form ID > contains > mktoForm_

I've also tried firing on Element Visibility where the div with the thank you message appears.

The tag shows as available in Preview, but when I fill out the form, nada.

I'm totally open to adding custom script to the page head, but then would I have to make a custom script per page that contains the simple email capture form?

As always, your advice is greatly appreciated!

Cam

[SanfordWhiteman]

Thing is, you can't use an entirely UI-driven GTM trigger with a Marketo form (same goes for lots of other JS forms libraries) for the simple reason that a native HTML form 'submit' event doesn't mean the form was submitted. The <form> will fire a 'submit' for every attempted submission, and a naive analytics library will treat that as a submission, but the form will still be sitting there (e.g. because it didn't pass field validation).

I see this error a lot with tracking pixels attached to button clicks/form submits and always wonder if people notice what can be huge discrepancies!

So you have to use a JS-powered activity in the Forms 2.0 API onSuccess listener, since only at that stage can you accurately represent the submission. As Courtney points out that activity is probably better off being a synthetic pageview instead of an abstract event because it's more in line with standard reporting. You need to use the hitCallback parameter if you're going to be redirecting the current page on success (you can only skip hitCallback if you're staying on the same page after submission).

I'm totally open to adding custom script to the page head, but then would I have to make a custom script per page that contains the simple email capture form?

You'd have to include a custom script on every eligible page, but that doesn't mean it can't itself be injected via GTM. However I would likely include it separately. I'm not a really big fan of GTM since I've seen way too many sites broken due to GTM-inflicted race conditions (which can themselves be solved with tag sequencing, but that's an advanced area).

[Anonymous]

I see - we've already got the Forms 2.0 API on pages, so that won't be a problem to augment it.

So here's the rub: is there a way to identify/send a GOAL COMPLETION to GA using the API?

GA is limited in what it counts as a goal completion (destination w expression).

Thoughts?

Cam

[SanfordWhiteman]

GA is limited in what it counts as a goal completion (destination w expression).

Yes, thus Courtney's suggestion that you log a synthetic pageview (of a Thank You URL that need not exist as a navigable page) rather than just any event.

form.onSuccess(function(vals,tyUrl){
  ga("send", {
    hitType : "pageview",
    page : tyUrl,
    hitCallback : function(){
      // whatever you do instead of redirecting after submit
    }
  });
  return false;
});