如何通过Google Tag Manager自定义HTML标签发送数据层值至第三方API端点？

步骤1：创建自定义HTML标签 #

在GTM后台操作：

• 进入「标签」页面，点击「新建」
• 选择「自定义HTML」作为标签类型

步骤2：编写API请求代码 #

在HTML标签的代码编辑器中，插入以下代码（根据实际需求修改）：

<script>
// 从数据层提取表单字段值，替换为你实际定义的数据层变量名
const formPayload = {
  user_name: {{用户名数据层变量}},
  user_email: {{邮箱数据层变量}},
  // 按需添加其他需要发送的字段
};

// 发送请求到第三方API端点
fetch('https://你的第三方API地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 若API需要授权，在此添加对应请求头，例如：
    // 'Authorization': 'Bearer 你的授权令牌'
  },
  body: JSON.stringify(formPayload),
  // 若需跨域携带Cookie，添加此行：
  // credentials: 'include'
})
.then(response => {
  if (!response.ok) throw new Error('请求失败');
  return response.json();
})
.then(resData => {
  // 可选：请求成功后的自定义处理，比如控制台日志
  console.log('API响应结果:', resData);
})
.catch(err => {
  // 可选：请求失败后的错误处理
  console.error('API请求出错:', err);
});
</script>

代码说明： #

• {{用户名数据层变量}} 替换为你在GTM中已定义的对应数据层变量名称
• 根据第三方API要求调整请求方法（POST/GET等）、请求头格式；若API接收表单格式数据，可将body改为new URLSearchParams(formPayload)，并把Content-Type设为application/x-www-form-urlencoded

步骤3：设置触发条件 #

• 在标签的「触发条件」模块，点击「新建触发条件」
• 触发类型选择「自定义事件」，事件名称填写gtm.formSubmit
• 保存触发条件并关联到当前自定义HTML标签

步骤4：调试验证 #

• 开启GTM预览模式，提交表单后查看「标签」面板，确认该自定义HTML标签已触发
• 在浏览器开发者工具的「网络」面板，检查是否有向第三方API发送的请求，验证请求参数是否正确

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