Passing a utm to a form in an iframe

Anonymous
Not applicable

Passing a utm to a form in an iframe

Hi All,

I have read through this article from Marketo on passing utms parameters to a form in an iframe and to be honest it doesn't give enough information.

https://community.marketo.com/MarketoResource?id=kA650000000GuKCCA0

I want to know where in the js does it say the field in the database this feeds to? I don't want it to go to leadsource as we populate this a different way. I want to have it populate utm_campaign, utm_source field etc I have set up in the database. 

The script says to duplicate the yellow section but it doesn't tell you what to amend.

Has anyone done this?

Here is the script below I have amended but I don't know where to change the fields it goes into:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Keep your jQuery up to date -->
 
<script>
 
  $(function(){
    var url = (window.location != window.parent.location) ? document.referrer: document.location;
    var sourceParam = getUrlVars(url)["source"];
    $("#LeadSource").val(sourceParam);
    var sourceParam = getUrlVars(url)["medium"];
    $("#LeadSource").val(mediumParam);
    var sourceParam = getUrlVars(url)["campaign"];
    $("#LeadSource").val(campaignParam);
    var sourceParam = getUrlVars(url)["term"];
    $("#LeadSource").val(termParam);
 
 
  })
   
  function getUrlVars(url) {
    var vars = [],
        hash;
    var hashes = url.slice(url.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
  }
 
</script>
 

Tags (1)
7 REPLIES 7
Anonymous
Not applicable

Re: Passing a utm to a form in an iframe

  $(function(){
    var url = (window.location != window.parent.location) ? document.referrer: document.location;
    var sourceParam = getUrlVars(url)["utm_source"];
    $("#SourceFieldIDName").val(sourceParam);
    var sourceParam = getUrlVars(url)["utm_medium"];
    $("#MediumFieldIDName").val(mediumParam);
    var sourceParam = getUrlVars(url)["utm_campaign"];
    $("#CampaignFieldIDName").val(campaignParam);
    var sourceParam = getUrlVars(url)["utm_term"];
    $("#TermFieldIDName").val(termParam);
 
 
  })

You'll need to get your field names from the hidden fields in the form. Try this.
Anonymous
Not applicable

Re: Passing a utm to a form in an iframe

In case you cannot get the above script to work.  I have used a method that was on Eric Hollebone's site, which doesn't seem to be accessible anyore.  It dynamically generates the iframe with the url parameters that are on the parent URL.  You will need to edit the bolded values.

<!-- add this to the HEAD section of the html page -->
<script type="text/javascript" language="Javascript">
// basic js, not using jQuery
// get current url parameters and dynamically construct the iframe's URL with those parameters
// and push it into the div with the id of iframeDiv
 
function loadiframe() {
 
// set document.domain to allow in-domain javascript access
document.domain=‘your domain name’;
 
// setup your iframe URL
var siframeSrc = '<iframe src=“Your landing page url, make sure to use http://;
 
// get the page's URL and look for the URL parameter delimiter "?"
sUrl = window.location.href;
if ((sUrl != null) && (sUrl != "") && (sUrl.search(/\?/) != -1)) {
// add the page's parameters to the iframe's URL
siframeSrc += sUrl.slice(sUrl.search(/\?/));
}
 
// add iframe options
// make sure to adjust the height and width of the iframe
siframeSrc += '"name="iframeDiv" id="iframeDiv" frameborder="0" height="580" width="555" scrolling="no" frameborder="0" marginwidth="0" frameborder="0" seamless></iframe>';
 
// inject the iframe code into the div
document.getElementById('iframeDiv').innerHTML=siframeSrc;
}
</script>
 
<!-- add the onload=""loadiframe();" TO the HTML BODY tag -->
<!-- EXAMPLE: -->
<body onload="loadiframe();">
 
<!-- add the DIV tag within the BODY section of the page -->
<div id="iframeDiv"></div>
Anonymous
Not applicable

Re: Passing a utm to a form in an iframe

I just realized I have not tested this with Forms 2.0, so it may not work.
Anonymous
Not applicable

Re: Passing a utm to a form in an iframe

Thanks for the advice guys, I ended up getting the first answer to work with additional changes to the code e.g.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Keep your jQuery up to date -->
 
<script>
 
    $(function(){
    var url = (window.location != window.parent.location) ? document.referrer: document.location;
    var sourceParam = getUrlVars(url)["utm_source"];
    $("#utm_source").val(sourceParam);
    var mediumParam = getUrlVars(url)["utm_medium"];
    $("#utm_medium").val(mediumParam);
    var campaignParam = getUrlVars(url)["utm_campaign"];
    $("#utm_campaign").val(campaignParam);
    var termParam = getUrlVars(url)["utm_term"];
    $("#utm_keyword").val(termParam);
 
 
  })
    
  function getUrlVars(url) {
    var vars = [],
        hash;
    var hashes = url.slice(url.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
  }
 
</script>
 
Anonymous
Not applicable

Re: Passing a utm to a form in an iframe

Same issue as Bec here with forms 2.0, I tried your solution Bec but did not work for me unfortunately. My field are called GB_utm_term in our Marketo instance, so by changing the script, I am maybe blocking something to run correctly
Anonymous
Not applicable

Re: Passing a utm to a form in an iframe

Bec, you are a life saver! Thanks for the tip. It worked like a charm.
Anonymous
Not applicable

Re: Passing a utm to a form in an iframe

Hey Jean-Christophe,

I wonder it is because you have something that sits before the "utm parameter" the "GB"? I haven't seen that been done before.

Is everything else set up to collect the information in the fields in the database?

Additionally to the script above I had to do the process outlined in the second part of this community conversation too: https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PMGlAAO

Hope that helps,
Bec