更新時間：2025年8月16號
這一篇介紹如何在GTM上對HubSpot Forms做表單跟蹤。
實現方式
HubSpot Forms有API支持，當成功提交訂單的時候會觸發HubSpot Forms，可以利用它去發送事件，如：
<script>
window.dataLayer = window.dataLayer || [];
//listener for older version (v3) of HS forms
window.addEventListener('message', function(event) {
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
event: 'form_submission',
form_id: event.data.id,
conversion_id: event.data.data.conversionId,
form_data: event.data.data.submissionValues,
});
}
});
//listener for v4 HS forms
window.addEventListener("hs-form-event:on-submission:success", function(event) {
var hsform = HubspotFormsV4.getFormFromEvent(event);
if (hsform) {
hsform.getFormFieldValues().then(function(fieldValues) {
var transformedData = fieldValues.reduce(function(obj, item) {
var key = item.name.split('/')[1];
if (key) {
obj[key] = item.value;
}
return obj;
}, {});
window.dataLayer.push({
event: "form_submission",
form_id: hsform.getFormId(),
conversion_id: hsform.getConversionId(),
form_data: transformedData
});
});
}
});
</script>
設定過程
添加HubSpot Forms代碼
在GTM中點擊代碼」—「新增」—「請選擇代碼類型以開始設定…」——「自訂HTML」，命名為“cHTML-Listen HubSpot Forms”，然後做如下設定：
設定變數
從代碼裡，可以知道變數是form_id和form_data.emai。
在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “dlv-form_id(HubSpot Forms)”, 然後做如下設定：
同理設定dlv-form_data.email(HubSpot Forms)。
設定觸發器
從代碼裡，可以知道event是form_submission。
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為“form_submision(HubSpot Forms)”，然後做如下設定：
設定代碼
最後就是設定代碼。
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“GA4 Event-form_submission(HubSpot Forms)”，做如下設定：
預覽調試
接下來就是預覽調試，你可以用以下任意方法：
最後還需要將事件參數在GA4的自訂定義裡註冊。
Referral：https://www.analyticsmania.com/post/track-hubspot-forms-with-google-tag-manager-and-google-analytics-4/
