如何借助GTM缩短带UTM参数的链接？自定义映射需求求解

核心思路 #

通过GTM解析URL中的短参数（如clickhere），自动替换为对应的UTM参数组合，利用history.replaceState修改URL避免页面跳转，同时确保GA4能正确采集UTM数据。

步骤1：创建自定义JavaScript变量（解析短参数映射UTM） #

1. 在GTM控制台进入「变量」→「用户定义变量」，点击「新建」
2. 选择「自定义JavaScript」类型，命名为Parsed UTM Params
3. 粘贴以下代码：

function() {
  const searchParams = new URLSearchParams(window.location.search);
  // 匹配目标短参数
  if (searchParams.has('clickhere')) {
    // 返回对应的UTM参数组合，可按需扩展映射规则
    return new URLSearchParams({
      utm_source: 'click',
      utm_medium: 'here'
    }).toString();
  }
  // 无匹配短参数时返回原查询字符串
  return window.location.search.slice(1);
}

步骤2：创建自定义HTML标签（更新URL并触发GA4采集） #

1. 进入「标签」→「新建」，选择「自定义HTML」类型
2. 粘贴以下代码：

<script>
  const newParams = {{Parsed UTM Params}};
  const newUrl = window.location.origin + window.location.pathname + (newParams ? `?${newParams}` : '');
  
  // 修改URL不触发页面跳转
  window.history.replaceState({}, document.title, newUrl);
  
  // 手动触发GA4页面浏览事件，确保UTM参数被采集
  if (window.gtag) {
    gtag('event', 'page_view', {
      page_location: newUrl
    });
  }
</script>

3. 配置触发条件：选择「Page View」触发器，添加过滤条件为URL Query → clickhere → 存在（或直接匹配特定URL：websiteurl.com?clickhere）
4. 调整触发顺序：在「高级设置」中设置「标签触发优先级」为高于GA4的Page View标签，确保URL修改完成后再采集数据

步骤3：扩展与优化 #

• 如需支持多组短参数映射，只需在Parsed UTM Params变量中添加else if分支，例如：

else if (searchParams.has('anotherparam')) {
  return new URLSearchParams({
    utm_source: 'social',
    utm_medium: 'facebook'
  }).toString();
}

• 若网站使用GA4的GTM模板标签，确保模板已开启「页面浏览」事件采集，且触发顺序晚于本方案的自定义HTML标签

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