Really, finally winning the Marketo Forms vs. Tracking Protection battle

SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator

⚠️ The custom config in this post is no longer necessary post-2021, as the Forms 2.0 library has been updated to load everything from your LP domain.

 

While you should be loading embedded forms from your Marketo LP domain, it turns out just changing the URL is not enough.

 

Using a non-Marketo-owned domain to load forms2.min.js and call loadForm() seems to avoid collateral damage from Tracking Protection (Firefox’s built-in feature or the equivalent plugin for another browser). The form will at least show up on the page if you do that.

 

But – I’m sure you will be dismayed to learn – the form still won’t post under TP! You also need to upload a file to Design Studio and add a tiny bit of JavaScript. Then and only then are you good to go.

 

First, download this file:

 

marketo-xdframe-relative.html

 

(Note: the Marketo Nation site gates files through an “Offsite Link” popup. So click above, then right-click the link + Save Link As. Make sure you get the .html file itself, and don’t end up with a snapshot of this blog post!)

 

Next, upload the file to your Design Studio. To be clear, you’re not creating an LP, you’re uploading the file as static HTML. This may not be something you’ve done before (you probably upload images, CSS, and PDFs) but Marketo actually supports any kind of file.

 

Screenshot after it’s been uploaded to Design Studio:

 

Then replace your embed code with this ever-so-slightly different version:

 

 

<script src="//pages.example.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_9999"></form>
<script>
 MktoForms2.setOptions({
 formXDPath : "/rs/123-ABC-456/images/marketo-xdframe-relative.html"
 });
 MktoForms2.loadForm("//pages.example.com", "123-ABC-456", 9999);
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

 

Where:

 

  • 123-ABC-456 represents your Munchkin ID
  • pages.example.com represents your Marketo LP domain
  • 9999 is o’course your form ID

 

A live demo (though all the code is above):

 

MktoForms2 :: XDFrame relative path for Tracking Protection

 

The why

Using your LP domain enables forms to show up. But there’s a special asset, only used upon submission, that will still be blocked by default. Naturally, this only reveals itself when you run end-to-end tests.

 

See, embedded forms use an IFRAME message relay (XDFrame) for cross-domain posts (there are other ways to do it, but they’re not as backward-compatible and the IFRAME method works fine + fast in all browsers, even back to IE8).

 

But the IFRAMEd document loads forms2.min.js from an absolute URL with your instance hostname, i.e. app-xxnn.marketo.com:

Oops! Tracking Protection ain’t gonna let that load, for the same reason it doesn’t like a Marketo domain in the main document. (You can’t avoid TP by using an IFRAME, that would be silly.)

 

As you can see, the replacement XDFrame file uses a relative URL (/js/forms2/js/forms2.min.js), so it loads from your Marketo LP domain like the rest of the assets. Presto! No marketo.com for TP to get all paranoid about.

 

NOTES

forms2.min.js inside the IFRAME is only necessary because of its bundled  jQuery library, specifically the MktoForms2.$.ajax wrapper method. While not technically necessary, using jQuery keeps parity with the Forms 2.0 API.

25775
56
56 Comments
SanfordWhiteman
Level 10 - Community Moderator

It is again easy to see that you haven't uploaded the correct file, but rather a snapshot of the blog post.

pastedImage_1.png

Phi_Ngo
Level 1

pastedImage_1.png

Is the above the file??

Phi_Ngo
Level 1

Despite numerous tries, I cannot download the file directly.. 

This is the file we always end up with: Marketo Forms 2 Cross-Domain Proxy Frame 

Phi_Ngo
Level 1

pastedImage_1.png

SanfordWhiteman
Level 10 - Community Moderator

That was originally the correct file, except when you look at the contents it obvs. doesn't match the source on the CDN.

You're using some sort of Save-As-All-HTML method which is changing the contents.

If it is easier for you, create a new text file, select the contents, paste into your local file.

SanfordWhiteman
Level 10 - Community Moderator

Yes, that's the correct file, as you can see in the browser's location bar.

It's when you save the file that you're mangling it somehow.

Sophie_Kool2
Level 1

Hi Sanford,

Thank you for having a look! Hereby our page: https://www.adyen.com/landing/test-form.

We noticed that it works when logged into Marketo, but doesn't work when we're not logged into Marketo.

We believe this might be due to us currently not having SSL on our pages.

Curious to hear if you think that's the problem.

Many thanks!

Sophie

Rebekkah_Hilgr1
Level 1

Sanford Whiteman : you rock. We've been tearing our hair out for months over this. Thank you!

SanfordWhiteman
Level 10 - Community Moderator

Sure thing!

SanfordWhiteman
Level 10 - Community Moderator

You're still loading the form embed from app-lon08.marketo.com. You can't start from there if you want to deal with Tracking Protection, the whole idea is you can't have .marketo.com assets.

Now, you're probably doing this because you don't have SSL on your Marketo LPs. But there's no way you're going to get past this point if you can't load your forms securely from a non-Marketo domain.

Note you don't technically need to purchase SSL from Marketo in order to get this done. The same can be done via a 3rd-party CDN for pennies per month.