7 Replies Latest reply on Mar 12, 2014 9:24 AM by Bec Rabe

    Passing a utm to a form in an iframe

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

        • 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.
          • Re: Passing a utm to a form in an iframe
            Kenny Buckles
            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>
            • Re: Passing a utm to a form in an iframe
              Kenny Buckles
              I just realized I have not tested this with Forms 2.0, so it may not work.
              • Re: Passing a utm to a form in an iframe
                Bec Rabe
                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>
                      
                • 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
                  • 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.
                    • Re: Passing a utm to a form in an iframe
                      Bec Rabe
                      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