Keeping the Marketo forms Referrer value (_mktoReferrer) updated on SPAs
You may not have noticed this in your travels, but the _mktoReferrer hidden field is cached when forms2.min.js is loaded — before forms themselves are loaded — and all forms use that cached value.
The _mktoReferrer becomes the important Referrer constraint in Smart Lists. That’s how we know the page someone was on when they submitted an embedded form.
For a multi-page site — I’d guess 85%+ of corporate brochure sites are multi-page, not sure though! — caching is fine, because a new main document loads when you navigate. Thus forms2.min.js reloads and reads the new document.location.href.
But single-page applications (SPAs), by definition, change content and update the Location bar without loading a new document. In this case, forms2.min.js will not load again.
With an SPA, the displayed and business-logical URL can change from https://www.example.com/first-product to https://www.example.com/schedule-meeting to https://www.example.com/totally-different-product but the Referrer for all forms will be https://www.example.com/first-product. This can affect attribution efforts, although of course it doesn’t affect UTM params or any custom tracking fields.
(It’s confusing to troubleshoot, too. If someone clicks the browser’s reload ⟳ button when on https://www.example.com/totally-different-product, that becomes the new main document and the Referrer changes accordingly. That’s how you get reports like “It randomly doesn’t work” when it’s not random, except in the sense that across a wide audience, end users do fundamentally different things!)
Get the code
It’s easily fixed with a little JS:
MktoForms2.whenReady(function(readyForm){
const nativeGetValues = readyForm.getValues;
readyForm.onSubmit(function(submittingForm){
submittingForm.getValues = function(){
const values = nativeGetValues();
Object.defineProperty(values, "_mktoReferrer", { value: document.location.href, enumerable: true });
return values;
};
});
});