本文旨在解决在使用 JavaScript 持久化 UTM 参数时，即使 URL 中不存在 UTM 参数，链接仍然被错误地添加问号的问题。通过分析问题代码，找出导致错误的原因，并提供修改后的代码，确保只有在存在 UTM 参数时才添加问号，从而避免生成不必要的 URL 参数。
在使用 JavaScript 追踪用户来源，并持久化 UTM 参数（如 utm_source, utm_medium, utm_campaign 等）是非常常见的需求。然而，在实现过程中，可能会遇到一些问题，例如，即使URL中没有UTM参数，链接也会被错误地添加一个问号?。 这会导致URL看起来不美观，甚至可能影响某些网站的正常功能。本文将分析导致此问题的原因，并提供解决方案。
问题分析
问题出在 decorateUrl 函数中，该函数负责将 UTM 参数添加到 URL 中。原始代码无论 collectedQueryParams 是否为空，都会尝试添加 ? 或 & 符号。
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('&');}
这段代码的逻辑是：如果 urlToDecorate 中没有 ?，则添加 ?，否则添加 &。但是，它没有判断 collectedQueryParams 是否为空，也就是说，即使没有收集到任何 UTM 参数，也会添加 ? 或 &。
解决方案
为了解决这个问题，我们需要修改 decorateUrl 函数，使其在 collectedQueryParams 为空时，直接返回原始的 urlToDecorate。只有当 collectedQueryParams 不为空时，才添加 ? 或 & 符号。
修改后的 decorateUrl 函数如下：
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('&');}
在这个修改后的版本中，我们首先检查 collectedQueryParams 的长度。如果长度为 0，说明没有收集到任何 UTM 参数，此时直接返回原始的 urlToDecorate，避免添加多余的 ? 符号。
完整代码示例
下面是包含修改后的 decorateUrl 函数的完整代码示例：
(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 -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]); }})();
注意事项
确保 domainsToDecorate 数组包含你想要追踪的域名。queryParams 数组包含你想要持久化的 UTM 参数。在部署代码之前，务必进行充分的测试，确保其在各种场景下都能正常工作。
总结
通过修改 decorateUrl 函数，我们可以避免在 URL 中添加多余的 ? 符号，从而使 URL 更加清晰和易于管理。在实际应用中，需要根据具体的需求进行适当的调整和优化，以达到最佳的效果。
以上就是修复：持久化 UTM 代码导致链接出现多余问号的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528831.html
微信扫一扫 
支付宝扫一扫 
