如何将Google Tag Manager自定义HTML标签关联至GA4与Google Ads？

一、优化Appointy提供的自定义HTML标签（可选，替换跳转逻辑为事件触发） #

原代码的跳转功能若非必需，可改为直接触发GTM自定义事件，更精准追踪转化：

<script>
function checkConfirmationPage() {
  const currentUrl = window.location.href;
  if (currentUrl.includes('bookings/confirmation')) {
    // 向GTM数据层推送预约完成事件
    window.dataLayer.push({
      'event': 'appointy_booking_complete',
      'event_category': '预约',
      'event_action': '完成预约',
      'event_label': 'Appointy预约'
    });
    // 如需保留跳转功能，取消下方注释并替换目标URL
    // setTimeout(() => {
    //   window.location.assign("你的目标跳转URL");
    // }, 3000);
  }
}

// 页面加载时检查一次
checkConfirmationPage();
// 监听URL变化（适配单页应用场景）
window.addEventListener('popstate', checkConfirmationPage);
// 定时检查（兼容URL变化未触发popstate的情况）
setInterval(checkConfirmationPage, 3000);
</script>

若需保留原跳转需求，直接在原代码中插入window.dataLayer.push逻辑即可。

二、配置GA4转化事件标签 #

1. 在GTM中新建标签，选择「Google Analytics: GA4事件」类型
2. 填写配置项：
   • 测量ID：输入你的GA4测量ID（格式为G-XXXXXX）
   • 事件名称：例如booking_complete（需与dataLayer中的事件名对应）
   • 可选事件参数：可添加booking_platform: "Appointy"等自定义参数
3. 设置触发器：选择「自定义事件」，事件名称填写appointy_booking_complete

三、配置Google Ads转化追踪标签 #

1. 在GTM中新建标签，选择「Google Ads转化追踪」类型
2. 填写配置项：
   • 转化ID：输入你的Google Ads转化ID
   • 转化标签：输入对应转化动作的标签ID（从Google Ads后台获取）
   • 可选：勾选「发送点击标识符」以提升归因准确性
3. 设置触发器：同样选择「自定义事件」，事件名称填写appointy_booking_complete

四、替代方案：直接通过URL触发标签（无需修改原HTML代码） #

若不想调整Appointy提供的代码，可直接基于确认页URL触发转化标签：

1. 创建新触发器，选择「页面视图」-「一些页面视图」
2. 设置条件：「页面URL」「包含」bookings/confirmation
3. 将GA4和Google Ads标签的触发器设置为该URL触发器

五、测试与发布 #

1. 启用GTM预览模式，完成一次完整预约流程，确认标签在确认页正常触发
2. 在GA4实时报告中查看booking_complete事件是否已记录
3. 在Google Ads后台转化追踪页面验证测试数据
4. 确认无误后，发布GTM容器

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