本文旨在解决在使用 JavaScript 持久化 UTM 参数时，即使 URL 中不存在 UTM 参数，也会错误地向链接添加问号的问题。通过分析问题代码，找出错误根源，并提供修改后的代码示例，确保只有在存在 UTM 参数时才添加参数，避免生成不必要的问号。
在使用 JavaScript 追踪 UTM 参数并将其添加到网站链接时，一个常见的问题是即使当前 URL 中没有 UTM 参数，代码也会错误地在链接末尾添加一个问号。这会导致 URL 看起来不整洁，并且可能影响某些分析工具的正确解析。本文将深入探讨这个问题，找出导致此问题的代码部分，并提供一个修改后的版本，以确保只有在实际存在 UTM 参数时才添加问号。
问题分析
原始代码的问题在于 decorateUrl 函数中，它无条件地在 URL 末尾添加 ? 或 & 符号：
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('&');
}这段代码首先检查 URL 中是否已存在问号。如果不存在，它就添加一个问号；如果存在，则添加一个 & 符号。然而，无论 collectedQueryParams 是否为空，这段代码都会执行，导致即使没有 UTM 参数需要添加，也会在 URL 末尾添加一个问号。
解决方案
为了解决这个问题，我们需要修改 decorateUrl 函数，使其仅在 collectedQueryParams 包含 UTM 参数时才添加 ? 或 & 符号。以下是修改后的代码：
function decorateUrl(urlToDecorate) {
var collectedQueryParams = [];
for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
if (getQueryParam(queryParams[queryIndex])) {
collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
}
}
if(collectedQueryParams.length === 0){
return urlToDecorate;
}
//only add the ? if we have params AND if there isn't already one
urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
return urlToDecorate + collectedQueryParams.join('&');
}在这个修改后的版本中，我们首先收集所有存在的 UTM 参数到 collectedQueryParams 数组中。然后，我们检查 collectedQueryParams 的长度。如果长度为 0，意味着没有 UTM 参数需要添加，函数直接返回原始的 urlToDecorate，避免添加多余的问号。只有当 collectedQueryParams 包含至少一个 UTM 参数时，才会执行添加 ? 或 & 符号的操作。
完整代码示例
以下是包含修改后的 decorateUrl 函数的完整代码示例：
<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]))
}
}
if(collectedQueryParams.length === 0){
return urlToDecorate;
}
//only add the ? if we have params AND if there isn't already one
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>总结
通过修改 decorateUrl 函数，我们成功地解决了在使用 JavaScript 持久化 UTM 参数时，即使 URL 中不存在 UTM 参数，也会错误地向链接添加问号的问题。修改后的代码仅在实际存在 UTM 参数时才添加 ? 或 & 符号，确保 URL 的整洁性，并避免对分析工具造成潜在的干扰。在实际应用中，请根据你的具体需求调整 domainsToDecorate 和 queryParams 数组。
