How to pass incoming Google Analytics campaign utm strings to outgoing clicks

Question

I want to have a setup where if I bring traffic to my site by using Google Analytics campaign strings: utm_campaign and utm_source, those strings would be stored and then appended to any outgoing link/click from my site.

Example if I want to bring traffic from a news article in Linkedin

Incoming link:

https://mywebsite.com/landing-page/?utm_campaign=news&utm_source=linkedin

I want it so when a visitor clicks on the outgoing links (or any link in my website), the outgoing link will have the utm string appended like:

https://outgoinglink.com/welcome-aboard/?utm_campaign=news&utm_source=linkedin

Can anyone help how to have something like this. My website is in Wordpress and there seems no specific plugin for this.

You'll want to get the query string (see https://stackoverflow.com/questions/9870512/how-to-obtaining-the-querystring-from-the-current-url-with-javascript) and then loop through all anchors on the page and append that value. However, it may cause issues if any of those links _already have_ query strings, in which case you'd have to split and parse the qs for the incoming link and each anchor. There are libraries out there that can do that kind of parsing and stringification quite easily — Matt Fletcher, Nov 22 '17 at 22:29
Thanks for quick answer, but unfortunately I am a complete novice when it comes to javascript. I tried adding several of those javascripts in my header and when I opened a sample link with utm_ string, they were not being passed on the resulting outgoing link. They're not in browser bar. How can I make any of those many solutions to work on my specific case. — valdroni, Nov 22 '17 at 23:00

Mario Nikolaus · Accepted Answer · 2017-11-23T22:15:52.107

1

You can do this in Javascript and definitely it would be easier with jQuery, so I will give you jQuery solution.

$(function(){
  var params = window.location.search;
  if (!!params) {
    $('a[href]').each(function(){
      $(this).attr('href', $(this).attr('href') + params);
    });
  }
});

Put this in your header and it will add parameters to your links. Note that this will potentially break your links if they already have query strings attached. In that case this code should have 1 more edge case.

$(function(){
  var params = window.location.search;
  if (!!params) {
    $('a[href]').each(function(){
      if ($(this).attr('href').indexOf('?') === -1) {
        $(this).attr('href', $(this).attr('href') + params);
      } else {
        $(this).attr('href', $(this).attr('href') + '&' + params.substr(1));
      }
    });
  }
});

Note that this code is for you to learn, it can be optimised and made more secure for production purposes.

If you need to persist parameters on 2nd or later page, you should first add it to localStorage and then read it from it and append on every link again.

Hope that helps

EDIT:

You can check this pen,

https://codepen.io/mnikolaus/pen/dZeVLv

EDIT 2:

jQuery(function(){
  var params = window.location.search;
  if (!!params) {
    jQuery('a[href]').each(function(){
      if (jQuery(this).attr('href').indexOf('?') === -1) {
        jQuery(this).attr('href', jQuery(this).attr('href') + params);
      } else {
        jQuery(this).attr('href', jQuery(this).attr('href') + '&' + params.substr(1));
      }
    });
  }
});

edited Nov 23 '17 at 22:15

answered Nov 22 '17 at 22:30

Mario Nikolaus

2,346
1
21
28

Thanks Mario, I added that code in header.php file and then opened a page with utm_string in URL. Once opened, then when clicking on outgoing link/button, the utm_ string were not in browser bar and I am not sure if they were being passed to outgoing website GA. – valdroni Nov 22 '17 at 23:02
Try now, there was a typo – Mario Nikolaus Nov 22 '17 at 23:07
1

Please also refer to my comment about how this will break when appending to already query-stringed links – Matt Fletcher Nov 22 '17 at 23:10
Yes, that is another advanced use case which needs to be handled – Mario Nikolaus Nov 22 '17 at 23:12
@MattFletcher, yes I noticed that, I will not have incoming links with double utm_ strings, at least not the ones that I control, when bringing traffic. – valdroni Nov 22 '17 at 23:48
@MarioNikolaus although the codepen seems to work, when I click the outgoing link on my site https://outgoinglink.com/welcome-aboard/, it is not having the utm_ strings appended on on that destination page like: /welcome-aboard/?utm_campaign=news&utm_source=linkedin – valdroni Nov 22 '17 at 23:52
That could be for various reasons. Is your link really an anchor tag? Does the server of outgoing link perhaps redirects to querystring-less uri? Is your website online? – Mario Nikolaus Nov 22 '17 at 23:56
Did you check the console? It says $ is not defined. Somewhere you overwrite $ object, so you should use jQuery object instead. Check the updated answer. – Mario Nikolaus Nov 23 '17 at 07:17
@MarioNikolaus I think we're getting closer now. When the page is loaded, there's ?test=true string appended to URL and also to the button's – valdroni Nov 23 '17 at 21:56
Well yes, since params were hardcoded for you convinience... I updated code now, check it – Mario Nikolaus Nov 23 '17 at 22:16
Great, thanks a lot. I believe it now works just as requested. Correct Answer given :) – valdroni Nov 23 '17 at 22:22

Prince J · Answer 2 · 2017-11-23T00:35:12.493

0

Try this. A client of mind wanted to do the same thing few month ago, I give him this her this and it's working now.

<script type="text/javascript">
    (function ($) {
        // Get the utm tag from current url
      var params = window.location.search;
      // if utm available...
      if (!!params) {
        $('a[href]').each(function(){
            // Apply the extracted utms to link
          $(this).attr('href', $(this).attr('href') + params);
        });
      }
    }(jQuery));
</script>

It is basically checking for any url without utm tags.

Hope it helps.

edited Nov 23 '17 at 00:35

answered Nov 22 '17 at 23:05

Prince J

58
1
7

Your comments are totally wrong and misleading. Do you even know what UTM tag is? – Mario Nikolaus Nov 22 '17 at 23:10
Misleading? @mar – Prince J Nov 22 '17 at 23:15
@MarioNikolaus Aren't utm tags the extension of a url use to track the source of the traffic? Please correct me if I'm wrong. – Prince J Nov 22 '17 at 23:18
`window.location.search` returns query string part of your uri, it does not return UTM parameter. In this case we have UTM parameters that are indeed query strings. – Mario Nikolaus Nov 22 '17 at 23:22
@MarioNikolaus Okay? I was writing up my comments in the code specifically to this question so that it is understood. I wasn't giving a universal tutorial on query strings. I believe the poster asked specifically about capturing the UTM tags in the url in his address bar of his site. Are you going to write up a script for someone to just copy and paste, or do you want them to understand what is happening in the logic of the script line by line? – Prince J Nov 22 '17 at 23:49
Thanks for your post @PrinceJ. I tested your code as it is almost identical to the one posted by Mario, but it does not work. When I click the outgoing link on my site outgoinglink.com/welcome-aboard, it is not having the utm_ strings appended on that destination page like: /welcome-aboard/?utm_campaign=news&utm_source=linkedin – valdroni Nov 22 '17 at 23:54
@valdroni Is your site WordPress? If so, make sure to put the code in (function($) { // put the jquery code in between these brackets for a WordPress sites. })( jQuery ); – Prince J Nov 22 '17 at 23:57
@PrinceJ yes my site is in Wordpress. I posted my link, can you post the code that needs to be copied – valdroni Nov 23 '17 at 00:11
@valdroni I posted the code in my previous comment. I have also update my code in my answer. Please check now. However, I would advise you use Mario Nikolaus code and just replace the function in has in there with the function wrap around my code because his is even more advance and won't break links that already have query strings. – Prince J Nov 23 '17 at 00:38
@PrinceJ it is good to leave helpful comments and it is good to leave room for asker to think by them self a bit. But putting comments which are not correct is misleading in long term. So when someone sees this answer he would learn that window.location.search gives him UTM parameters, which is not correct – Mario Nikolaus Nov 23 '17 at 07:22

How to pass incoming Google Analytics campaign utm strings to outgoing clicks

2 Answers2