How can I pass UTM parameters from URL to an iframe?

Question

• i have a link google adword :

  http://example.com?utm_campaign=Testcam&utm_medium=referral&utm_source=Blog&utm_content=blogers&utm_term=Test

• When visitor click the link above to navigate to mysite. And then he submit a Marketo form (non Marketo form for landing page on my site). I follow this article to create Mkto form on my site: http://community.marketo.com/MarketoResource?id=kA650000000GsPJCA0 to make sure when it submit it will get values from url parameters.

• My problem on here is : Normally, this form just submit to the server to handle register. Beside that, when this form submmited, i also need it submit to Marketo for tracking. That a reason, Marketo form will be submit via iframe.

When i submit marketo form, it will be target to this iframe.

So, i need pass the url parameter into iframe to make sure when submit form, hidden fields will automatic get values from url parameters. But on this iframe, as you can see, it haven't src. I had try to add this to iframe:

$("#mktoformhidden").src = window.location.href;

but it doesn't work well.

What's the iframe src should be on here?

Thanks,

Answer 1

My guess is that an iframe is not the best solution here. The iframe can create all sorts of cross site scripting and permission based concerns.

Why not just use the new forms functionality in Marketo so you can drop the form either on a landing page or embed on your site (they come with an embed source code).

Also, the munchkin tracking code automatically grabs "query" parameters so you can use those in smart lists or reporting.

Answer 2

Like sahutchi said, embedding the actual Marketo form into your site could be the way to go. I opted for the iframe approach to get Marketo to automatically fill in fields based on mkt_tok. This might be possible using Marketo forms, but I wasn't able to figure it out a month or two ago.

Here's a decent overview of ways that you can integrate Marketo forms with your site: http://www.elixiter.com/marketo-landing-page-and-form-hosting-options/

If you insist on doing it the iframe way, here's my setup to pass query string params down to the embedded iframe:

This is in http://yourdomain.com/my-marketo-page:

<div class="lazy-iframe" data-src="//pages.yourdomain.com/MyMarketoPage.html" style="width: 960px; height: 1000px;">
</div>

And in some shared library (but you can have it on the same page, and simplify it a bit):

<script>
$(function() {
  var $lazyIframe = $('.lazy-iframe');
  if ($lazyIframe.length) {
    var src = $lazyIframe.attr('data-src');
    if (src) {
      var $iframe = $('<iframe src="' + src + location.search + '"></iframe>');
      $iframe.attr({
        scrolling: 'no',
        frameborder: 0
      });
      $lazyIframe.replaceWith($iframe);
    }
  }
});
</script>

Given that pages.yourdomain.com is your CNAME to your Marketo domain.

In my email, I just link to http://yourdomain.com/my-marketo-page, and Marketo will automatically add the mkt_tok for that email recipient to the end of that URL (becoming http://yourdomain.com/my-marketo-page?mkt_tok=BLAHBLAHBLAH). Then the iframe is constructed with the data-src URL and all of the parameters attached, and with no scrolling nor frameborder (up to you).

Answer 3

I would do something like this! Just replace "URL HERE" with your iframe url and of course update the sizing that you need in BOTH loactions.

<noscript>
 <iframe src="YOUR URL HERE" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
</noscript>

<script type="text/javascript">
 var iframeurl = 'YOUR URL HERE';
 var params = window.location.search;
 var thisScript = document.scripts[document.scripts.length - 1];
 var iframe = document.createElement('iframe');

 iframe.setAttribute('src', iframeurl + params);
 iframe.setAttribute('width', '100%');
 iframe.setAttribute('height', 500);
 iframe.setAttribute('type', 'text/html');
 iframe.setAttribute('frameborder', 0);
 iframe.setAttribute('allowTransparency', 'true');
 iframe.style.border = '0';

 thisScript.parentElement.replaceChild(iframe, thisScript);
</script>