Capture URL parameters and use on links | Community
Skip to main content
A
Anonymous
August 27, 2014
Solved

Capture URL parameters and use on links

  • August 27, 2014
  • 7 replies
  • 8420 views
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?
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
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>

7 replies

A
Anonymous
Accepted solution
August 29, 2014
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>
K
khatrirajesh
New Participant
February 2, 2021

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
SanfordWhiteman
New Participant
February 2, 2021

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.

    A
    Anonymous
    August 28, 2014
    Yes, or you can use the Rich Text object for more control.
    A
    Anonymous
    August 28, 2014
    Thanks, Jason. But it then has to be inserted as HTML, not using Marketo's image controls, right?
    A
    Anonymous
    August 28, 2014
    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>
    A
    Anonymous
    August 27, 2014
    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>
    A
    Anonymous
    August 27, 2014
    Jason is correct. This is not possible directly within Marketo, and will require custom JavaScript. 
    A
    Anonymous
    August 27, 2014
    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.

     
    Terms & ConditionsAccessibility statement

    Loading footer...