通过Google Tag Manager为iframe内嵌CRM联系表单添加提交事件监听器追踪转化

前提准备 #

确保你已经：

• 给网站安装了Google Tag Manager代码
• 拥有Facebook Pixel ID并已在网站基础代码中配置（或通过GTM配置）

步骤1：创建自定义事件触发器 #

1. 登录GTM后台，进入对应网站的容器
2. 左侧菜单点击触发器 → 新建
3. 触发器类型选择自定义事件
4. 事件名称填formSubmission（这个名称要和后面代码里的一致，别乱改）
5. 触发器配置里，勾选在iframe中触发，确保能捕捉到内嵌表单的操作
6. 保存触发器，命名为Form Submission Trigger

步骤2：添加监听表单提交的自定义HTML标签 #

1. 左侧菜单点击标签 → 新建
2. 标签类型选择自定义HTML
3. 粘贴以下代码：

<script>
window.addEventListener('load', function() {
  // 定位内嵌的CRM表单iframe，可根据实际src域名修改选择器
  const iframe = document.querySelector('iframe[src*="你的CRM表单域名"]');
  if (!iframe) return;

  // 监听iframe内的点击事件
  iframe.contentWindow.addEventListener('click', function(e) {
    const targetBtn = e.target;
    // 匹配提交按钮的文本（德语"Anfrage abschicken"）
    if (targetBtn.tagName === 'BUTTON' && targetBtn.textContent.trim() === 'Anfrage abschicken') {
      // 向GTM推送自定义事件
      window.parent.dataLayer.push({
        event: 'formSubmission'
      });
    }
  });
});
</script>

4. 替换代码中的你的CRM表单域名：打开网站页面，右键检查iframe，复制src里的域名部分（比如crm.yourprovider.com）
5. 给标签绑定触发器：选择页面视图 - DOM就绪，确保页面加载时代码就生效
6. 保存标签，命名为Listen for Form Submission

步骤3：配置Facebook转化追踪标签 #

1. 新建标签，选择Facebook Pixel - 标准事件
2. 事件类型选择Lead（表单提交属于线索转化，符合Facebook的转化定义）
3. 输入你的Facebook Pixel ID
4. 触发器选择刚才创建的Form Submission Trigger，这样表单提交时就会触发转化追踪
5. 保存标签，命名为Facebook Lead Tracking

步骤4：测试并发布 #

1. 点击GTM右上角的预览按钮，打开你的网站页面
2. 填写表单并点击Anfrage abschicken按钮，查看GTM预览面板：
   • 确认formSubmission事件被触发
   • 确认Facebook Lead Tracking标签正常触发
3. 测试无误后，点击提交发布GTM容器的更改

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