內容簡介
Tracking for Divi 是一款專為 Divi 佈景主題內建聯絡表單設計的追蹤外掛，透過監聽網路通訊機制，精準偵測表單是否真正送出成功，避免 Google Tag Manager 因驗證錯誤而產生灌水事件數據。
【主要功能】
• 精準追蹤 Divi 聯絡表單的實際成功送出
• 支援推送 dataLayer 事件供 Google Tag Manager 使用
• 支援直接發送 Google Analytics 4 事件
• 支援觸發 Google Ads 轉換追蹤
• 可自訂 dataLayer 變數名稱與事件名稱
• 可選擇包含所有表單欄位資料
外掛標籤
開發者團隊
原文外掛簡介
Ever wanted to track the built-in contact form from Divi? If you tried using Google Tag Manager’s built-in form submit events to do it you probably noticed an inflated number of events flowing.
This is because the form submission event is triggered even if there are form validation errors or the server returns another error.
Since Divi doesn’t provide any JavaScript events to hook into there is no straightforward way to find out if a message has actually been sent.
To get around this, this plugin listens to the network communication that is happening underneath. It’s based on the same mechanism Divi itself uses.
There are three options now:
a dataLayer event
a Google Analytics 4 event (using gtag.js)
a Google Ads conversion (also using gtag.js)
You can use either one of them or event all of them together.
You’ll be able to customize the dataLayer variable if you’re not using the standard naming, and the event names, separately for dataLayer and gtag.
Data layer reporting
The structure of the object pushed to the dataLayer is the following, with the default naming:
{
event: "contact_form_submit",
formId: string,
postId: number,
formData: {
name: string,
email: string,
message: string,
},
allFormData?: Record
}
It’s up to you to use or discard the form data.
Google Analytics 4 reporting
The Google Analytics event is sent with flattened parameters:
gtag(
"event",
"contact_form_submit",
{
form_id: "divi/contact-form-0",
name: "John",
email: "[email protected]",
message: "Hello",
// additional fields when "Include all form data" is enabled
}
);
Form data (name, email, message) is included by default. When “Include all form data” is enabled, all form fields are flattened into the event parameters.
This will only work if you have a Google Tag already deployed on the website i.e. the gtag() function is available. Otherwise, you will see a warning in your console like this:
Tracking for Divi: gtag event failed, gtag is not defined
Google Ads conversion reporting
The Google Ads conversion is sent like so:
gtag(
"event",
"conversion",
{
send_to: "
}
);
There is no default for conversion_id and conversion_label as they are always created individually in Google Ads.
This will only work if you have a Google Tag already deployed on the website i.e. the gtag() function is available. Otherwise, you will see a warning in your console like this:
Tracking for Divi: Google Ads conversion event failed, gtag is not defined
Note: This plugin hasn’t been thoroughly tested with Divi forms that redirect to a success page. The tracking works just as well, however the redirect could interrupt the tracking flow e.g. if Google Tag Manager has a lot of logic and doesn’t trigger the tags in time. The tags themselves these days use the beacon API (see MDN for reference) so the requests shouldn’t be interrupted as long as they are fired before website unload.
