Capture URL parameters and use on links

[Anonymous]

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?

[Anonymous]

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.

https://gist.github.com/varemenos/2531765
http://stackoverflow.com/questions/975050/passing-javascri...

[Anonymous]

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

[Anonymous]

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]

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]

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

[Anonymous]

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

[Anonymous · Accepted solution]

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]

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]

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.