Google Tag Manager自定义脚本报错：Failed to construct 'URL': Invalid URL

问题根源 #

你的代码中original变量获取的是相对路径（比如/example?gclid=898），而URL构造函数直接传入相对路径时，Chrome会因为缺少基准URL（完整域名）而抛出无效URL错误——该构造函数要求相对路径必须搭配基准URL参数才能正确解析。

修复后的完整脚本 #

<script>
(function () {
  var links = document.querySelectorAll('a[href*=example]');
  
  links.forEach(function(link) {
    var original = link.getAttribute('href');      
    console.log(original);

    // 以当前页面的origin作为基准，构造合法的URL对象
    var url = new URL(original, window.location.origin);
    console.log('This is new URL :' + url);  

    url.searchParams.append('client_id', {{Read Cookie Value}});
    console.log(url);
    
    // 将URL对象转为字符串后再设置href属性
    link.setAttribute('href', url.toString());
  });
})();
</script>

核心修改说明 #

• 添加基准URL参数：new URL(original, window.location.origin)，利用当前页面的域名（window.location.origin）作为基准，让相对路径能被正确解析为完整的URL对象
• 显式转换为字符串：设置href时调用url.toString()，避免部分环境下直接传入URL对象可能出现的隐式转换异常

可选的健壮性优化 #

可以在处理前添加简单校验，跳过无效路径：

if (!original || (!original.startsWith('/') && !original.startsWith('http'))) {
  return;
}

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