UTM参数持久化代码Bug排查：无参数时自动添加问号

问题出在decorateUrl函数的逻辑上——不管当前页面有没有UTM参数，它都会先给目标URL加上?或&，哪怕最后没有参数可拼接，也会留下多余的问号。

修改后的完整代码 #

<script>
(function() {
  var domainsToDecorate = [
          'example.com'
      ],
      queryParams = [
          'utm_medium', //add or remove query parameters you want to transfer
          'utm_source',
          'utm_campaign',
          'utm_content',
          'utm_term'
      ]
  // do not edit anything below this line
  var links = document.querySelectorAll('a'); 

// check if links contain domain from the domainsToDecorate array and then decorates
  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);
          }
      }
  }
// decorates the URL with query params
  function decorateUrl(urlToDecorate) {
      var collectedQueryParams = [];
      for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
          if (getQueryParam(queryParams[queryIndex])) {
              collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
          }
      }
      // 先判断是否有收集到有效参数，没有则直接返回原URL
      if (collectedQueryParams.length === 0) {
          return urlToDecorate;
      }
      // 有参数时再处理拼接逻辑
      urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
      return urlToDecorate + collectedQueryParams.join('&');
  }


  // 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>

核心修改点 #

1. 把参数收集的逻辑移到最前面，先确认是否有需要追加的UTM参数。
2. 添加判断：如果collectedQueryParams为空数组（没有UTM参数），直接返回原URL，不做任何修改。
3. 只有当存在有效UTM参数时，才执行URL的拼接操作，避免无参数时出现多余的问号。

内容的提问来源于stack exchange，提问作者Misty