What is the impact of switching to a thank you message after a successful form submission instead of using a page refresh?

[dkonig]

The original post is here.
https://nation.marketo.com/t5/Product-Discussions/How-to-track-Marketo-forms-in-Google-Analytics-usi...

Originally we were doing a page refresh with a form submission but working on moving over to leveraging the API to trigger a conversion event on a successful form submission. I found out this past week that the Marketo team, unbeknownst to me, started to end the page refresh and just show a 'thank you' message after form submission. I'm wondering what I need to do to  the code below, if anything, to account for this change. I imagine little or nothing since we are interacting with the API but that whole followUpUrl portion has gotten me a little worried.

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057);
MktoForms2.whenReady(function(mktoForm) {
  mktoForm.onSuccess(function(values, followUpUrl) {
    dataLayer.push({
      "event": "marketo.success",
      "marketo.form_id": form_id,
      "marketo.form_values": values,
      "marketo.follow_up_url": followUpUrl,
      "eventCallback": function () {
        document.location.href = followUpUrl;
      }
    });
    return false;
  })
});

[SanfordWhiteman]

What do you mean by "the API"?  Whose API, and what API endpoints are you calling?

The Forms 2.0 JS API  code that you've shown sets GTM DataLayer properties and then redirects to the original Thank You URL (the URL set it Form Editor). It doesn't stay on the page, it redirects.

[dkonig]

Yes. The Forms 2.0 API is what I was referencing. That code, which is what you helped me with in the linked message, was what I intended to use until the Marketo team switched things up. Now they do not refresh the page but just show a 'Thank you' message when the form is submitted. I'm trying to figure out what I need to do with this code given the new circumstance.

Looks like I need to kill the redirect. Is there a API method for swapping the form out for a 'thank you' message on a successful form submission?

[dkonig · Accepted solution]

I think I may have figured out my own question...I think. 

did a little digging and it looks like this is the code they are using on the page to show the thank you message.

<script src="//app-sj22.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1234"></form>
<script>MktoForms2.loadForm("//app-sj22.marketo.com", "123-ABC-456", 1234);</script>

<!--  Marketo Form Script  -->
<script>
MktoForms2.whenReady(function (form){
   form.onSuccess(function(values, followUpUrl){
    form.getFormElem().hide();
    document.getElementById('formsuccess').style.display = 'block';
    return false;
  });
});
</script>

<!--  Form Confirmation Message  -->
<div id="formsuccess" class="success-confirmation">
<div class="success-confirmation-header">Thank you for contacting us.</div>

I'm just looking at a mashup of sorts between the two blocks of code. Something like this?

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057);
MktoForms2.whenReady(function(mktoForm) {
  mktoForm.onSuccess(function(values, followUpUrl) {
    dataLayer.push({
      "event": "marketo.success",
      "marketo.form_id": form_id,
      "marketo.form_values": values,
      "marketo.follow_up_url": followUpUrl,
      "eventCallback": function () {
        document.location.href = followUpUrl;
      }
    form.getFormElem().hide();
    document.getElementById('formsuccess').style.display = 'block';
    });
    return false;
  })
});

[SanfordWhiteman · Accepted solution]

You'd want to take out the eventCallback.

[dkonig]

What timing. I just noticed that and was just about to fix it. 

I can throw a pixel fire in there too correct? Something like:

MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057);
MktoForms2.whenReady(function(mktoForm) {
  mktoForm.onSuccess(function(values, followUpUrl) {
    dataLayer.push({
      "event": "marketo.success",
      "marketo.form_id": form_id,
      "marketo.form_values": values,
      "marketo.follow_up_url": followUpUrl
      }
    form.getFormElem().hide();
    document.getElementById('confirmform').style.display = 'block';
    <img src="https://mypixelURL.com/pixel?a=something&b=somethingelse&id=123&domain=[Domain]">
    });
    return false;
  })
});

[SanfordWhiteman · Accepted solution]

No, you can't put raw HTML inside a script block like that.

You can do

const roiPixel = new Image();
rowPixel.src="https://mypixelURL.com/pixel?a=something&b=somethingelse&id=123&domain=[Domain]";

[dkonig]

Hmm. Would you know if I could fire a tag in Google Tag Manager with an successful form submission instead of hardcoding the pixel?

[dkonig]

Just thinking through this. I could use the "marketo.success" value for event as the trigger for a custom HTML tag right? Then I can use the built in hostname variable along with a lookup variable to populate the website. I think that will work.

[SanfordWhiteman]

---

Just thinking through this. I could use the "marketo.success" value for event as the trigger for a custom HTML tag right? Then I can use the built in hostname variable along with a lookup variable to populate the website. I think that will work.

---

In theory, yes.