URL parameters are reordered when using anchor links with Inheriting UTMS

Question

I am using a javascript on my site, which always inherits the UTM parameters to the links on the site.

However, this is not working, when the links are anchor links to a section of the site and the link the visitor used to visit the page contains the "gclid" parameter from google.

For example:

A visitor uses this link to visit a site:

domain.com?utm_source=test&utm_medium=test&utm_campaign=test&gclid=12345

The button link on the site with the anchor link will look like the following:

domain.com&gclid=12345?utm_source=test&utm_medium=test&utm_campaign=test#anchor

For some reason the "&gclid" part changes its position.

I've tested it with a link without an anchor and in this case the "gclid" parameter doesn't get inherited and the link works.

Of course, the second domain isn't working anymore and leads to a 404 error.

Does someone have an idea what could be the cause for this?

This is the javascript I am using to inherit the UTMs:

(function() {
  var utmInheritingDomain = "grundl-institut.de"
  utmRegExp = /(\&|\?)utm_[A-Za-z]+=[A-Za-z0-9]+/gi,
    links = document.getElementsByTagName("a"),
    utms = [
      "utm_medium={{URL - utm_medium}}",
      "utm_source={{URL - utm_source}}",
      "utm_campaign={{URL - utm_campaign}}"
    ];

  for (var index = 0; index < links.length; index += 1) {
    var tempLink = links[index].href,
      tempParts;

    if (tempLink.indexOf(utmInheritingDomain) > 0) {
      tempLink = tempLink.replace(utmRegExp, "");

      tempParts = tempLink.split("#");

      if (tempParts[0].indexOf("?") < 0) {
        tempParts[0] += "?" + utms.join("&");
      } else {
        tempParts[0] += "&" + utms.join("&");
      }

      tempLink = tempParts.join("#");
    }

    links[index].href = tempLink;
  }
}());

EDIT: It seems like the following script don`t causes this problem:

    <script>
(function() {
  var domainsToDecorate = [
          'domain.com', 
      ],
      queryParams = [
          'utm_medium', 
          'utm_source',
          'utm_campaign',
      ]
  
  var links = document.querySelectorAll('a'); 

  for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
      for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) { 
          if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
              links[linkIndex].href = decorateUrl(links[linkIndex].href);
          }
      }
  }

  function decorateUrl(urlToDecorate) {
      urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
      var collectedQueryParams = [];
      for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
          if (getQueryParam(queryParams[queryIndex])) {
              collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
          }
      }
      return urlToDecorate + collectedQueryParams.join('&');
  }

  // borrowed from https://stackoverflow.com/questions/831030/
  // a function that retrieves the value of a query parameter
  function getQueryParam(name) {
      if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
          return decodeURIComponent(name[1]);
  }

})();
</script>

Answer 1

You really should not change URLs with regexp and string manipulation.

Here is the recommended way

const url = new URL(location.href); // change to tempLink
utms = [
      "utm_medium=med",
      "utm_source=src",
      "utm_campaign=camp"
    ];

utms.forEach(utm => url.searchParams.set(...utm.split("=")))
console.log(url.toString())