WordPress多CF7表单的Google Analytics目标追踪配置咨询

Hey Andrew, let's walk through fixing your script and getting those two (or more) CF7 forms tracked as separate GA targets properly.

1. 你的现有脚本问题修正 #

首先，你的脚本有个语法错误：if (event.detail.contactFormId == '770' {这里缺少了闭合的括号)，导致脚本无法正常执行。另外，为了更严谨，建议用全等运算符===代替==（避免类型转换带来的意外问题）。

修正后的脚本如下：

document.addEventListener( 'wpcf7mailsent', function( event ) {
  // 检查表单ID，CF7的contactFormId返回的是字符串类型
  if (event.detail.contactFormId === '770') {
    ga('send', 'event', 'Consultation Request', 'submit');
  } else {
    ga('send', 'event', 'Contact Form', 'submit');
  }
}, false );

2. 在Google Analytics中设置独立目标 #

现在脚本能正确发送不同的事件了，接下来要在GA（UA版本，因为你用的是ga()接口）里创建对应目标：

• 登录你的GA后台，进入管理 → 目标 → 新建目标
• 选择自定义目标类型，点击继续
• 给目标命名（比如“咨询表单提交”），选择事件作为目标类型，点击继续
• 填写事件匹配条件：
  • 类别：Consultation Request（和脚本里的第一个事件类别完全一致）
  • 动作：submit（和脚本里的动作一致）
  • 其他字段（标签、值）可以留空，除非你需要更精细的追踪
• 重复上述步骤，创建第二个目标“联系表单提交”，对应事件类别Contact Form和动作submit

3. 扩展到更多表单的优化方案 #

如果以后你还要加更多CF7表单，用else会越来越乱，建议改用switch语句，可读性更强：

document.addEventListener( 'wpcf7mailsent', function( event ) {
  const formId = event.detail.contactFormId;
  switch(formId) {
    case '770':
      ga('send', 'event', 'Consultation Request', 'submit');
      break;
    case '880': // 假设新增的第三个表单ID是880
      ga('send', 'event', 'Quote Request', 'submit');
      break;
    default:
      ga('send', 'event', 'General Contact Form', 'submit');
      break;
  }
}, false );

额外注意事项 #

• 确保你的GA跟踪代码（ga('create', ...)）已经正确加载在页面上，并且加载顺序在这个CF7事件脚本之前，否则ga()函数会未定义
• 可以用浏览器的开发者工具（控制台）测试：提交表单后，查看控制台是否有GA事件发送的日志，或者在GA实时报告里查看事件是否被捕获

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