GA4上对Contact Form 7做表单跟踪

更新时间：2024年11月28号

认识Contact Form 7

Contact Form 7 ，简称CF7，是wordpress里非常受欢迎的一款免费的表单插件， 它简单易用，可以自定义各式各样不同类型的表单功能

原理

Contact Form 7提供有一些Dom Event，GTM可以通过监听这些事件，当监听到这些事件的时候，在通过dataLayer发送事件给GA4：

• wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.
• wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
• wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.
• wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.
• wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.

如代码：

document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
<

设置过程

Step 1：自定义HTML监听代码

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「自定义HTML」，做如下设置：

这段配置的作用是监听Contact Form 7的Dom Event，当监听到这些事件的时候，在通过dataLayer发送事件给GA4。

Step 2：变量：获取数据层变量

从上一步我们已经知道了数据层变量formId和response。

在GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「数据层变量」，做如下设置：

同样的方式去设定response。

Step 3：触发器

从上一步我们已经知道了event是cf7submission。

在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「自定义事件」，做如下设置：

Step 4：代码

最后就是设置代码。

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，命名为“Event—Form Submit Tracking(Contact Form 7)”，做如下设置：

Step 5：预览调试

设定好后，就在GTM里做预览调试，可以看到是准确触发：

可以发布出去。