CODEWITHSUNDEEP
javascriptjquerywordpressgoogle-analytics
valdroni
valdroni

Reputation: 168

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

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.

Upvotes: 1

Views: 1616

Answers (2)

Mario Nikolaus
Mario Nikolaus

Reputation: 2406

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));
      }
    });
  }
});

Upvotes: 1

Prince J
Prince J

Reputation: 58

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.

Upvotes: 0

Related Questions