8 Replies Latest reply on Apr 20, 2018 4:17 PM by Raj Ruprai

    How to trigger GTM event on form.onSuccess event?

    Raj Ruprai

      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>

        • Re: How to trigger GTM event on form.onSuccess event?
          Sanford Whiteman

          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').

            • Re: How to trigger GTM event on form.onSuccess event?
              Grégoire Michel

              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

                • Re: How to trigger GTM event on form.onSuccess event?
                  Sanford Whiteman

                  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).

                    • Re: How to trigger GTM event on form.onSuccess event?
                      Raj Ruprai

                      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

                        • Re: How to trigger GTM event on form.onSuccess event?
                          Sanford Whiteman

                          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.

                          1 of 1 people found this helpful