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>
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
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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.