Level 10

Accurately background-loading the MktoForms2 global object

Forum|Forum|4 years ago
February 17, 2021
13 replies
12542 views

Content backfill required

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

L

lawrencejohnson

Level 2

A great way to do it! I will say though that the `defer` attribute is not quite enough if you've set your sites on performance. Anything under 3 seconds of attempting to load the Marketo library will cause Lighthouse to include it in its performance report. Something you can add to make sure you get those three seconds:

<script type="text/javascript">setTimeout(function(){var mscript = document.createElement("script");mscript.src="//forms.mysite.com/js/forms2/js/forms2.min.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mscript, s);},3000);</script>

The code above replaces:

<script src="https://pages.example.com/js/forms2/js/forms2.min.js" defer></script>

The sample above will get you where you need to be, but I'd recommend having all of your script blocks just before the closing `</body>` tag.

You will however be facing concerns from your CRM team in regards to potential drop off before the form loads though.

Is Marketo planning on releasing a new version of the JS API that doesn't have jQuery and is better performance optimized for modern speed tests?

SanfordWhitemanAuthor

Level 10

Don't see what you're describing with Lighthouse at all.

As seen here, a page using the method above scores 100/100 for performance. (Same 100/100 on Desktop and Mobile.)

We wouldn't be prescribing a purposeful delay in the human usability of the page out of fear of an automated test result.

L

lawrencejohnson

Level 2

Just as I mentioned in the other thread, page speed score doesn't really work like that. When you put it into a professional marketing site that is already going to struggle for a 90+ score depending on its UX, the weight of the Marketo library is game changing.

Sure, it would be great if we could ignore automated tests, but that's not the age we're in. Try explaining that fear to an SEO team or really even a CRM team that understands the SEO impact of performance scores when you're dealing with top brands, and you'll have a better understanding of that "fear" and a more rational reasoning for balance. Getting people to your Marketo forms is debatably more important than how fast they load.

L

lawrencejohnson

Level 2

This is the exact same page with only 1 difference. The 84 score is with Marketo deferred as in your example here, the second is with Marketo delayed 3 seconds after page load.

The last image are the performance flags that google page speed throws for the Marketo script.

D

DW530

Level 2

This is the best explanation I've come across so far. After implementing your suggested solution, it works great besides the "on page" thank you message never appears (not using follow-up thank you landing page). The form simply reloads after the user submits the form. Any idea/guidance how to go about making sure the thank you confirmation message appears without the form reloading? I'm using the method mentioned on the Marketo blog here (Show Thank You Message Without a Follow-Up Landing Page) in addition to your method above to show thank you message after form submission. Thanks in advance for the help!

SanfordWhitemanAuthor

Level 10

Can you link to your page please? This way of handling the global MktoForms2 doesn’t affect how an onSuccess listener would work.

D

DW530

Level 2

Hi. Thank you for your quick responds. Here's the link to a page where you can see the issue: https://www.billtrust.com/begin-your-accounts-receivable-automation-journey-sem/. Thanks again!

SanfordWhitemanAuthor

Level 10

But that page doesn’t use the method in this post to add the onSuccess. It tries to just use the MktoForms2 without waiting for it to be ready.

//Make confirmation message appear after form submit	
MktoForms2.whenReady(function (form){
  //Add an onSuccess handler
   form.onSuccess(function(values, followUpUrl){
    //get the form's jQuery element and hide it
    form.getFormElem().hide();
    document.getElementsByClassName('form-msg').style.visibility = 'visible';
    //return false to prevent the submission handler from taking the lead to the follow up url.
    return false;
  });

D

DW530

Level 2

My apologies. I was testing to see if this would fix the issue by adding the code from the Marketo blog directly into the code via your post and accidentally updated the live version of the page. I reverted back to the original code following your recommendation. Cache is purged as well so you should see the updated version. https://www.billtrust.com/begin-your-accounts-receivable-automation-journey-sem/ . Do you have a recommend way to accomplish this with your suggestion? Any advise would be greatly appreciated.

<form id="mktoForm_####"></form>
<script type="text/javascript">setTimeout(function(){var mscript = document.createElement("script");mscript.src="//pages.example.com/js/forms2/js/forms2.min.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mscript, s);},1000);</script>
<script>
(function(){
  function btFormsSpeed() {
    if (typeof MktoForms2 != "object") {
        document.addEventListener("load", btFormsSpeed, true);
    } else if (!btFormsSpeed.done) {
        document.removeEventListener("load", btFormsSpeed, true);
        btFormsSpeed.done = true;
        MktoForms2.loadForm("//pages.example.com", "AAA-BBB-CCC", 787);
    }
  }
  btFormsSpeed();
})();
</script>

B

BobLodi

Level 2

Does someone who knows more think that the onSuccess listener may help with issues we are having with Marketo reCaptcha "submission failed, please try again later" issues?

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded