SOLVED

Re: Capture URL parameters and use on links

Go to solution
Anonymous
Not applicable

Capture URL parameters and use on links

Hi. I have some landing pages that cannot have forms on them... but they link to other pages with Marketo forms. (It has to be that way, long story.)

On those landing pages, I would like to capture utm parameters from the URL and put it into the links that are on that page.

Is there a way to grab those parameters from the URL and put them into the links on the page?
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Capture URL parameters and use on links

Ah! I got one of my programmers involved, and he devised a bit of code that puts any URL parameters onto every link on the page.

So say "Thanks, Tad" when you use this. Just place it in the "custom meta tags" on a landing page.

<script language="Javascript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script src="/js/public/jQueryString-2.0.2-Min.js" type="text/javascript" ></script>
<script>
    //Written by Tad from ExploreLearning
if (document.location.search.length) {
jQuery.extend({
  getQueryParameters : function(str) {
 return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }
});
$( document ).ready(function() {
    // get qs vars as obj
var qs = $.getQueryParameters();
    //loop all links
    $('a').each(function() {
        //get href
        var hrefParts = $(this).attr('href').split('?');    
        //get copy of qs obj
        var docQS = qs;
        //get href qs vars as obj
        var aQS = $.getQueryParameters(hrefParts[1]);
        //merge together qs objs
        $.extend(docQS, aQS);
        //create new href string
        var newHref = hrefParts[0] + '?' + jQuery.param(docQS);
        //update link href
        $(this).attr('href', newHref);
    });
});
}
</script>

View solution in original post

14 REPLIES 14
Anonymous
Not applicable

Re: Capture URL parameters and use on links

You'll need to write some JavaScript to pull in the values from the querystrings and add them to content on the page. Without seeing the page and the use case it's hard to point you in the right direction, but here are a couple of links to get you started.

 
Anonymous
Not applicable

Re: Capture URL parameters and use on links

Jason is correct. This is not possible directly within Marketo, and will require custom JavaScript. 
Anonymous
Not applicable

Re: Capture URL parameters and use on links

Thanks, Jason. I got it!

Below is what I did, but it only works for text links. Is there a way to put an onclick event on a graphic?



Here's what I did:

1. I put this code into the custom HTML section:

<script language="Javascript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script src="/js/public/jQueryString-2.0.2-Min.js" type="text/javascript"></script>
<script>
  var $jQ = jQuery.noConflict();
  var utm_keyword = $jQ.getQueryString({ ID: "utm_keyword" });
  var utm_source = $jQ.getQueryString({ ID: "utm_source" });
  var utm_term = $jQ.getQueryString({ ID: "utm_term" });
  var utm_medium = $jQ.getQueryString({ ID: "utm_medium" });
  var utm_content = $jQ.getQueryString({ ID: "utm_content" });
</script>

2. Inside the <a> tag, I added this at the end:
onclick="location.href=this.href+'?utm_source='+utm_source+'&utm_keyword='+utm_keyword+'&utm_term='+utm_term+'&utm_medium='+utm_medium+'&utm_content='+utm_content;">LINK TEXT</a>

So for example it would be:
<a href="http://ldomain.com/page" onclick="location.href=this.href+'?utm_source='+utm_source+'&utm_keyword='+utm_keyword+'&utm_term='+utm_term+'&utm_medium='+utm_medium+'&utm_content='+utm_content;">LINK TEXT</a>
Anonymous
Not applicable

Re: Capture URL parameters and use on links

Ed, 

Per your question in bold above, you can wrap an image in a link just like you would text, so the onclick event would occur with a click on that image as well.

<a href="#" onclick="$"><img src="/path/to/yourimage.jpg"></a>
Anonymous
Not applicable

Re: Capture URL parameters and use on links

Thanks, Jason. But it then has to be inserted as HTML, not using Marketo's image controls, right?
Anonymous
Not applicable

Re: Capture URL parameters and use on links

Yes, or you can use the Rich Text object for more control.
Anonymous
Not applicable

Re: Capture URL parameters and use on links

Ah! I got one of my programmers involved, and he devised a bit of code that puts any URL parameters onto every link on the page.

So say "Thanks, Tad" when you use this. Just place it in the "custom meta tags" on a landing page.

<script language="Javascript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script src="/js/public/jQueryString-2.0.2-Min.js" type="text/javascript" ></script>
<script>
    //Written by Tad from ExploreLearning
if (document.location.search.length) {
jQuery.extend({
  getQueryParameters : function(str) {
 return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }
});
$( document ).ready(function() {
    // get qs vars as obj
var qs = $.getQueryParameters();
    //loop all links
    $('a').each(function() {
        //get href
        var hrefParts = $(this).attr('href').split('?');    
        //get copy of qs obj
        var docQS = qs;
        //get href qs vars as obj
        var aQS = $.getQueryParameters(hrefParts[1]);
        //merge together qs objs
        $.extend(docQS, aQS);
        //create new href string
        var newHref = hrefParts[0] + '?' + jQuery.param(docQS);
        //update link href
        $(this).attr('href', newHref);
    });
});
}
</script>
Rajesh_Khatri
Level 2

Re: Capture URL parameters and use on links

Hi, 

 

I have used this code in Marketo Landing Page. It capture's the UTM parameters and carries to next page successfully.

 

Their is one challenge with this code. In my Landing Page, I have a Tel Link <a href="tel: + 56-3121-9090">Call + 5-3121-9090</a>

The code also puts UTM after this Telephone Link. 


How can I  ignore this link? 

 

Regards
Raj

 

  

SanfordWhiteman
Level 10 - Community Moderator

Re: Capture URL parameters and use on links

That code is far too verbose for this task, in addition to being buggy.

 

Switch to this (it has zero dependencies on other scripts):

(function(){
  const arrayify = getSelection.call.bind([].slice);
  
  const appendableSearch = document.location.search.substring(1);
  if(appendableSearch){
    arrayify(document.links)
    .filter(function(link){
      return /https?/.test(link.protocol) && !/^#/.test(link.getAttribute("href"));
    })
    .forEach(function(httpLink){
      httpLink.search += (httpLink.search ? "&" : "") + appendableSearch;
    });
  }
  
})();

 

By filtering non-http(s) links and local jump links, it ensures only http links will be decorated.