Passing UTM values to iframe embedded forms

Highlighted
Anonymous
Not applicable

Passing UTM values to iframe embedded forms

I'm currently looking to pass UTM values from URLs through hidden form fields. I'm currently testing various things and have used the script provided here​ by Ryan Vong​ to capture the UTM values in a cookie.

It works on Marketo landing pages, but not currently on our main website, where we have Marketo forms embedded in iframes. As the form is not directly on the page, it can't 'see' the UTM values so isn't able to collect them.

I'm sure there is a workaround, but as I'm not a developer it would take me some time to figure out - I'm hoping a member of the community may already have a solution!

Thanks in advance.

18 REPLIES 18
Highlighted
Level 10 - Champion Alumni

Re: Passing UTM values to iframe embedded forms

Look for Sanford Whiteman 2 (FigureOne)​ 's solutions. I'd also suggest hiring a developer or asking webdev to help.

Highlighted
Level 10 - Community Moderator

Re: Passing UTM values to iframe embedded forms

A not uncommon problem, and thanks Josh for the @.

Passing the query string from the outer document to an inner IFRAME is as simple as augmenting the src of the IFRAME. However, you do not want to do this after the IFRAME has loaded, or you will cause it to reload, creating visible overhead for the lead and extraneous hits on the server. Instead, what I typically do is create a DIV container for the IFRAME on the page, with the base information hard-coded:

<div class="iframe-container" data-iframe-src="http://example.com/iframe.html" data-iframe-width="100%" data-iframe-height="700" data-iframe-frameborder="0"></div>

Then use JS to inject the IFRAME inside that container when we have the query string to add to the src.

Highlighted
Level 2

Re: Passing UTM values to iframe embedded forms

Sanford Whiteman​ would this work for IFRAMEs in Marketo landing pages? I'm running into a similar issue where we need to track the click within an IFRAME. Background: The IFRAME contains a quiz and there are a few variables on what content will display after x amount of questions are asked. We need to track how viewers got to the content piece from the quiz within the IFRAME. We placed JS into the IFRAME in the Marketing LP - but, either Marketo is appending the code and making it unusable or there's an error in the JS.

Would placing the IFRAME into a DIV container work for this use case?

Highlighted
Level 10 - Community Moderator

Re: Passing UTM values to iframe embedded forms

Would placing the IFRAME into a DIV container work for this use case?

Doesn't matter what the IFRAME is inside, it's still a separate document and subject the same cross-window/cross-domain security restrictions.

Is the IFRAME running under the same private parent domain as the main document (i.e. they both end with .example.com or .example.co.uk)?

Can you show me the actual URL where you have this running, with the attempt to add Munchkin to the inner IFRAME document?

Highlighted
Level 2

Re: Passing UTM values to iframe embedded forms

Yes, the iframe is running under the same private parent domain (both end in .com)
Here is the URL.

Highlighted
Level 10 - Community Moderator

Re: Passing UTM values to iframe embedded forms

Yes, the iframe is running under the same private parent domain (both end in .com)

.com is the public parent domain.  These two docs don't share a private domain, one's on pages.dyn.com and the other on community.spiceworks.com.

This means they won't automatically share tracking data, due to longstanding browser security barriers. (Note you don't even have Munchkin in the inner SpiceWorks IFRAME anyway.)

As long as you can make changes to the IFRAME code, you can enable Marketo tracking for the quiz actions, but it'll take a little custom JavaScript on both sides to handle this special communication.

Highlighted
Level 2

Re: Passing UTM values to iframe embedded forms

Thanks for taking a look and pointing that out about the domain and that the Munchkin. Appreciate it!

Highlighted
Level 2

Re: Passing UTM values to iframe embedded forms

Hi Ben​. I work with Ryan​ and have also helped develop this script. Our team has been brainstorming regarding UTM tracking and reporting over the past few months, and we have rewritten this particular script from scratch to improve upon the methodolgy. (I suppose we need to update the blog post, too!)

Here is the latest version of the UTM tracking script: http://bit.ly/2gdKeTm

While it may not address your particular iframe use case, this version of the script is better than older versions in several ways:

  1. First, it adds the hidden form fields for you, so you don't have to add them manually on your forms.
  2. Also, the cookie is deleted upon successful form submission, so that the UTM values are logged only once.
  3. Next, the cookie domain is auto-detected so that you usually don't need to bother changing the default setting. (Note that this currently works for only a handful of TLDs. If you don't use a .com, .net, .org, .co.uk, .co or .us TLD, you'll want to set this manually at the top of the script. Hoping to include better domain detection in a future version.)
  4. Last but not least, the setup is much simpler and better explained. Your Marketo fields are easily mapped at the top of the script.

As for the iframe itself, Sanford is correct that you can dynamically create the iframe inside a specific div and pass the query string into it. But why are you using an iframe in the first place? What are you trying to solve for? Is there a reason the default form embed code will not work directly on the page instead of using an iframe?

One final thought: the tracking script can only read cookies from the primary domain name where it is hosted. If you are hosting it, for example, in your Marketo instance at pages.example.com, the cookie created will be set for example.com rather than pages.example.com. This means that if/when the same script runs on your website at example.com, it can access the same cookie there as well. This is not true, however, when the two domains are different; the script can only read the tracking cookie for the same domain from which it was set.

(Incidentally, we're also working on a solution to merge records, known or anonymous, from different Munchkin-tracked domains into the same Marketo lead record. We have a working proof of concept, but it is not production-ready code yet. Ping me if you're interested.)

Josh​ and Sanford​​, thank you both for chiming in to help Ben.

Highlighted
Level 10 - Community Moderator

Re: Passing UTM values to iframe embedded forms

  1. Next, the cookie domain is auto-detected so that you can usually don't need to bother changing the default setting.

Jon, this functionality is broken. Recommend you read the blog posts here and here.