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

[Rajesh_Khatri]

Hi Sanford,

Your this script worked very well for us. Thank you for sharing. 
Based on your below script, I made a small tweak to fit this on mailto links, but the problem is, it is not copying all utms but just the first utm and leaving all other utm parameters.

The change made by me  in your code is highlighted in bold commented inline. 

Can you please help to fix the code so it can carry all utm's to body of mailto: 

<span style="color: #00a4de;"><a href="mailto:${SectionSupportContact2}?subject= Please do not Modify the First line in Email Body&body=" style="font-weight: 600;color:rgb(0,164,222);">${SectionSupportContact2}</a></span>
<!-- Carrying UTM's Code in Mailto links -->
<script>
   (function() {
      const arrayify = getSelection.call.bind([].slice);
      const appendableSearch = document.location.search.substring(1);
      if (appendableSearch) {
         arrayify(document.links)
            .filter(function(link) {
               // changed “https?” to “mailto?”
               return /mailto?/.test(link.protocol) & !/^#/.test(link.getAttribute("href"));
            })
            .forEach(function(httpLink) {
               httpLink.search += (httpLink.search ? "&" : "") + appendableSearch;
            });
      }
   })();
</script>

<!-- End Carrying UTM's Code -->

[SanfordWhiteman]

Why would you want to add URL params to your mailto: links? Those have no function except to look weird to the end user.

[Rajesh_Khatri]

We place email ids on our PPC landing pages. When user clicks on email, he lands up on email client. User posts the email to us, but we do not know from which PPC campaign the request has come. So we want to capture the campaign name from UTM parameters and post in body content. 

[Rajesh_Khatri]

Thank you very much Sanford. 

This code worked, it removed UTM's from Tel link and applied to rest of HREF links. 

[SanfordWhiteman]

Good to hear, may add this code to the Products blog in future.

[Anonymous]

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

[Anonymous]

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

[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. 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]

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

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