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.

25735
56
56 Comments
Julia_Emelius
Level 1

Hi Sanford,

we also used your solution to get the forms load in private modus.

Can you explain, what

MktoForms2.setOptions({
 formXDPath : "/rs/123-ABC-456/images/marketo-xdframe-relative.html"
 });

 does?
We are using non-Marketo Landingpages, so this only works for us by using the whole path:

MktoForms2.setOptions({
 formXDPath : "https://go.seeburger-news.com/rs/123-ABC-456/images/marketo-xdframe-relative.html"
 });

But Forms are also working in Private Browsing without that script part. So I can`t understand what this does and why I need it.

Can you tell me, if it`s really neccessary and what it does?

 

Thanks a lot for all your tips & tricks here in the forum 🙂

 

BR from Germany

Julia

 

lauran0elle
Level 1

Hi @SanfordWhiteman is this solution still the best workaround for getting forms to load on a page? Are there any updates we should be making in order to get this to work seamlessly?

SanfordWhiteman
Level 10 - Community Moderator

@lauran0elle you don't need the changes in this post anymore (they've been incorporated into the product by default). You only need to load forms from your LP domain and they'll work fine.

lauran0elle
Level 1

Awesome thank you so much @SanfordWhiteman !

pramaswamy
Level 1

Firefox has a enhanced tracking protection enabled which avoids non LP Domain Form javascript to load. We can run this by changing cross domain files to load from own site

Replace

app-abcD.marketo.com/js/forms2/js/forms2.min.js

to

your_domain.com/js/forms2/js/forms2.min.js

 

<script async src="//app-abdD.marketo.com/js/forms2/js/forms2.min.js"  type="text/javascript"></script>
<<<<TO>>>>
<script async src="//YOUR_DOMAIN/js/forms2/js/forms2.min.js" type="text/javascript"></script>
 
SanfordWhiteman
Level 10 - Community Moderator

@pramaswamy

 

1. The need to load from your LP domain is already covered in tons of other posts and mentioned in the first line of this post.

2. You can’t just tell people to switch the forms lib to async. That will break the form embed code unless you also make other changes.

3. The special config in this post isn’t necessary at all anymore because the forms library has been modified.