Passing a utm to a form in an iframe

Anonymous · ‎01-27-2014

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>


<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>

Anonymous · ‎01-27-2014

$(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 · ‎01-27-2014

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.

// 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>

Anonymous · ‎01-27-2014

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

Anonymous · ‎01-27-2014

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

$(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 · ‎03-06-2014

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 · ‎03-12-2014

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

Anonymous · ‎03-12-2014

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

Passing a utm to a form in an iframe

Passing a utm to a form in an iframe

Re: Passing a utm to a form in an iframe

Re: Passing a utm to a form in an iframe

Re: Passing a utm to a form in an iframe

Re: Passing a utm to a form in an iframe

Re: Passing a utm to a form in an iframe

Re: Passing a utm to a form in an iframe

Re: Passing a utm to a form in an iframe