How to trigger GTM event on form.onSuccess event?

[Raj_Ruprai1]

Hi,

We have a need to call the form.onSuccess() event so that it performs the following GTM script to the page. Currently it is not working properly on all forms. What could be the cause?

Sample implementation:

<script> MktoForm2.loadForm('host', 'account_id', 'form_id, function(form) {

  form.onSuccess(function(values, followUpUrl) {

dataLayer.push({'event': 'some_event', 'form_id': 1111});

  });

)};</script>

[SanfordWhiteman]

Please link to your page so we can see what's happening live.

In any case, the code you have will never be reliable in the onSuccess because you have a race condition: the page may unload before the hit is logged.

I'm also curious about why, exactly, you're using dataLayer instead of ga('send','event') or gtag('event').

[Grégoire_Miche2]

Hi Sanford,

I see more and more GA specialists recommending that the data is being posted to the GTM datalayer and then sent back to GTM to be processed (and then sent to GA) than sending it directly to GA as an event. I suppose it provides a better reactivity and less risks for the race condition, or a better control. I would love to hear from some GTM specialist on this.

-Greg

[SanfordWhiteman]

I suppose it provides a better reactivity and less risks for the race condition, or a better control.

Not really, same risk (here you must pass the callback no matter what method you're using).

[Raj_Ruprai1]

Sanfor,

Unfortunately, this is only in my local development environment as we cannot push this to even a test environment unless it is working and passes the test cases.

What Greg mentioned is the exact reason for this implementation. Another approach we took after this failed, was to append <script> tag and adding a delay using setTimeout() to see if we can get it work. The approach does trigger the event, but it does not properly pass the value. So would it be recommended to use the ga('send', 'event') approach or is there a another alternative?

Pseudocode:

form.onSuccess()

   append <script> dataLayer.push({'event': 'some_event', 'form_id': 1111}); <script> to body

   setTimeout to 5 seconds

   once 5 seconds have elapsed, perform any URL redirects

end

[SanfordWhiteman · Accepted solution]

What Greg mentioned is the exact reason for this implementation.

You mean the exact reason was "somebody else said it was the best practice?" 

Unlike  gtag and ga events, the dataLayer.push method alone doesn't send the event all the way to Google. This is by (unfortunate, IMO) design. You also need a Custom Event Trigger set up to tell GTM that the event being pushed is interesting enough to send to the collector (i.e. over the network).

This adds complexity that even experts don't understand, or at least fail to keep track of. You can see a ton of pages, even blogs on the dataLayer (i.e. by people that should know how to use it!) where events are being added to the dataLayer array in the browser, but they never reach Google, presumably because of a mismatch between the event names on both sides.

Another approach we took after this failed, was to append <script> tag and adding a delay using setTimeout() to see if we can get it work.

Heavens no. There's no reason to even think about things like this.

You should use ga with the hitCallback:

MktoForms2.whenReady(function(form){
  form.onSuccess(function(vals,thankYouUrl){
    ga("send", {
      hitType : "event",
      hitCallback : function() { 
        document.location.href = thankYouUrl; 
      },
      eventAction : "submit",
      eventCategory : "form",
      eventLabel : "mktoForm_1111" // or whatever labels, values, etc. you want
    });
    return false;
  });
});

If you do decide to stick with dataLayer.push (and set up the corresponding trigger server-side) you should use the eventCallback option, which has the same purpose there. You will not get this to work properly without providing a callback. You can use a timer as a failsafe, but do not use it as a fake event model. There's a real event model provided for this purpose.

[Raj_Ruprai1]

Yes the agency was quite adamant about using the approach of pushing it via dataLayer. We proceeded in trying the ga with hitCallback approach and it worked as expected. The change we made was to set eventLabel as the Marketo Form ID using form.getId(). 

[SanfordWhiteman]

Good to hear. I like how they were adamant but know/didn't tell you how to set it up.

[Raj_Ruprai1]

I was questioning why they even needed this information in GA since it is readily available in Marketo, but it was a long story type of explanation.

Thanks again, learned more about the process and Form API because of the Q&As.