onSuccess issue with Firefox fix

[Thuy_Pham]

We ran into some Firefox issues with the form not appearing in private browsing or in strict protection setting so I applied @SanfordWhiteman's fix (Really, finally winning the Marketo Forms vs. Tracking Protection battle). That fixed the form, but when I added the onSuccess handler back in, the form does not go to the confirmation page.

Does anyone know of a solution? 

<script src="//lp.bugsnag.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1181"></form>
<script>MktoForms2.setOptions({
formXDPath : "/rs/053-NAZ-226/images/marketo-xdframe-relative.html"
});
MktoForms2.loadForm("//lp.bugsnag.com", "053-NAZ-226", 1181, function(form){

//Hidden field
form.addHiddenFields({"formProgramName":"EG-Demo-Request"});

//Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
ga('send', 'event', {
eventAction: 'Demo Requested',
hitCallback: function() {
document.location.href = "https://bugsnag-staging-mktg.webflow.io/demo-request-confirmation";
}
});
// Return false to prevent the submission handler continuing with its own processing
return false;
});
});
</script>

[SanfordWhiteman]

You'll need to link to your page. I suspect if you look in the F12 Console you'll see an error because GA is not actually loaded (which means the onSuccess will error out).

[Thuy_Pham]

@SanfordWhiteman oh yes, here's the link: https://bugsnag-staging-mktg.webflow.io/test-demo-firefox-2

[SanfordWhiteman]

That page has a different onSuccess from what you showed above.

[Thuy_Pham]

Oh, yes we were QA something. I've reverted it back to the original code I posted. 

[SanfordWhiteman]

Looks to be working for me.

[Thuy_Pham]

On Firefox? The page does not go to the confirmation page when tested on Firefox with strict protection setting or in private browsing. 

[SanfordWhiteman]

Sorry, yes — had a Tracking Protection bypass for GA in my lab by accident — but the problem isn't to do with the Marketo form, it has to do with Google Analytics being blocked by Tracking Protection. In this case the ga global variable exists but is prevented from sending hits (confusing behavior), so the hitCallback will never fire.

Try wrapping the onSuccess like this:

ga(function(tracker) {
  form.onSuccess(function(values, followUpUrl) {
     ga('send', 'event', {
        eventAction: 'Demo Requested',
        hitCallback: function() {
          document.location.href = "https://bugsnag-staging-mktg.webflow.io/demo-request-confirmation";
        }
      });

    return false;
 });
});

It's a strange-looking construction but should make it so the onSuccess is only added when GA is actually functional.

[Thuy_Pham]

It's redirecting! But looks like the hitCallback isn't redirecting to the correct confirmation page (https://bugsnag-staging-mktg.webflow.io/demo-request-confirmation), instead, it's going to the Marketo form follow-up URL which is "stay on page".

[SanfordWhiteman]

Right, you'd have to add that as the default behavior.

form.onSuccess(function(values, followUpUrl) {
  function followUp(){
    document.location.href = "https://bugsnag-staging-mktg.webflow.io/demo-request-confirmation";
  }
   
  if(typeof gaData == "undefined") {
    followUp();
  } else {
    ga('send', 'event', {
        eventAction: 'Demo Requested',
        hitCallback: followUp
      });
    return false;
  }
 });

EDITED 2021-03-10 20:36 to fix code snippet.

[Thuy_Pham]

Hmm, it's not redirecting to the followUp URL in Firefox and GA is not picking it up. Tracking Protection is really making it difficult. Have you run into this issue? I also saw this and not sure if we have to define it -

[SanfordWhiteman]

Sorry, typed the code freehand and made a mistake. Fixed now, please copy & paste again.