在GTM中创建自定义JavaScript变量提取URL指定片段

嘿，我来帮你搞定这个需求！要从示例URL https://www.domain.be/fr/ 里精准提取出 be/fr/ 这个片段，咱们可以按以下步骤在Google Tag Manager里创建自定义JavaScript变量：

第一步：新建自定义JS变量 #

1. 登录GTM后台，打开你的目标容器
2. 点左侧菜单的「变量」，在「用户定义变量」区域点「新建」按钮
3. 变量类型选「自定义JavaScript」就好

第二步：写入提取逻辑代码 #

把下面这段代码粘贴到代码编辑框里就行，我已经帮你适配了你的需求：

function() {
  // 获取当前页面的完整URL
  const url = window.location.href;
  
  // 先去掉http/https协议部分，避免干扰索引计算
  const trimmedUrl = url.replace(/^https?:\/\//, '');
  
  // 定位第二个"."的位置：先找第一个点，再从它后面找第二个
  const firstDotPos = trimmedUrl.indexOf('.');
  const secondDotPos = trimmedUrl.indexOf('.', firstDotPos + 1);
  
  // 定位第二个"/"的位置：先找第一个斜杠，再从它后面找第二个
  const firstSlashPos = trimmedUrl.indexOf('/');
  const secondSlashPos = trimmedUrl.indexOf('/', firstSlashPos + 1);
  
  // 提取目标片段，确保URL结构符合预期才返回结果
  if (secondDotPos !== -1 && secondSlashPos !== -1) {
    // 从第二个点的下一位，截到第二个斜杠的下一位，刚好得到be/fr/
    return trimmedUrl.slice(secondDotPos + 1, secondSlashPos + 1);
  }
  
  // 如果URL结构不匹配，返回空字符串避免报错
  return '';
}

代码逻辑小解释： #

• 先移除URL的协议部分（http://或https://），这样我们处理的就是www.domain.be/fr/这种干净的字符串，不会被协议的斜杠干扰
• 两次定位点和斜杠的位置，确保我们找的是第二个点和第二个斜杠，精准匹配你的需求
• 最后用slice截取目标区间，同时加了判断逻辑，避免URL结构不符合时出现报错

第三步：测试变量是否正常工作 #

创建完变量后，一定要用GTM的预览功能测试下：

1. 点GTM右上角的「预览」，打开预览模式
2. 访问你的目标页面（比如https://www.domain.be/fr/）
3. 在预览面板的「变量」标签里找到你刚创建的这个变量，看看返回值是不是be/fr/就ok了

备选方案：用正则表达式实现 #

如果你觉得索引定位太麻烦，也可以用正则表达式来实现，代码更简洁：

function() {
  const url = window.location.href;
  // 匹配符合结构的URL，提取我们需要的部分
  const matchResult = url.match(/^https?:\/\/[^.]+\.([^/]+\/[^/]+\/)$/);
  // 如果匹配成功就返回目标片段，否则返回空
  return matchResult ? matchResult[1] : '';
}

这个正则会直接匹配并捕获be/fr/这种片段，逻辑更直观，也能适配类似结构的URL。

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