透過 Google 標籤管理器使用 Google Analytics (GA4) 輕鬆進行表單事件追蹤

您已經熟悉 Google Analytics 版本 3 和 Effortless Forms 整合。鑑於 Google 分析 4 是一個較新且稍微複雜的版本，與稱為「通用分析」的版本 3 不同，我們建議先查看我們的版本 3 指南以增強理解。但是，如果您是新手並且直接遵循本指南，那麼它應該不會造成任何問題。我們的目標是提供充分、簡單的步驟，以展示 Effortless Forms 與領先平台（例如 Google Analytics 到 Google Tag Manager）的強大整合和分析功能。

沒有更多的序言。讓我們深入了解一下吧！

首先，我們來觀察Google標籤管理器（GTM）和Google分析（GA）如何與網站資料協作或跨各種平台共享資料：

在本教程中，我們將使用 Google 標籤管理器追蹤 Effortless Forms 事件（表單視圖和表單提交）的 2 種變體，然後將事件傳輸到 GA 進行視覺表示和進一步審查。存在多種透過 GTM 監視表單事件的技術。輕鬆的表單在不同的表單狀態下觸發 jQuery 事件，透過自訂程式碼使用 Google 標籤管理器簡化事件追蹤過程，因此無需在 GTM 內進行進階故障排除（如預覽模式）。

我們假設 Google 追蹤代碼管理器全域安裝在您網站的所有頁面上。請仔細遵守以下說明，透過 GTM 實施對 Effortless Forms 事件的追蹤。

以下是我們將在 GTM 內與我們的 Effortless Forms 活動互動的元素的細分，然後繼續將資料轉發到 Google Analytics：

標籤

觸發器

變數

3（2 個必需，1 個可選）

類型

.cHTML,
GA 4 配置

自訂事件

2 資料層，
1 JavaScript

我們也將利用預先存在的變數[事件]來區分輕鬆表單中發生的事件類型。

1. 輕鬆製作表單變數：

變數代表各種資料類型，用於定義出現的屬性及其對應值 或者 是從網站發送的。

訪問您的 Google 標籤管理器 儀表板，導航至變數，然後在 使用者定義的變數， 點選新的按鈕。

你的屬性 多變的 應該類似這樣：

標題

輕鬆表單ID

變數類型

資料層變數

資料層變數名稱

輕鬆表單ID

資料層版本

版本2

創造 另一個變數 使用以下設定：

標題

EffortlessForm事件動作

變數類型

資料層變數

資料層變數名稱

事件動作

資料層版本

版本2

[可選] 建立 另一個變數 使用以下配置來顯示 表單頁面標題:

2. 制定輕鬆的表單觸發器：

觸發器對於精確識別 GTM 何時根據我們的意圖執行任務至關重要。例如：當網頁載入 Effortless Form 時，當有人提交 Effortless Form 時，GTM 會做什麼？

要設計 Effortless Forms 的觸發器， 訪問觸發器 並附加一個新的觸發如下圖：

隨後，請遵守預期觸發器的以下詳細資訊：

標題

EffortlessFormActivities事件

事件類型

自訂事件

活動名稱

輕鬆表格活動

觸發器觸發

所有自訂事件

3. 輕鬆製作表格標籤：

標籤表示我們使用 Google 標籤管理器執行的功能。標籤有多種類型，並根據我們的要求進行配置。它類似於觸發器啟動並執行標籤中定義的任務時的自動操作。

我們將聘請一名 Google 分析：GA4 配置 類型標籤使用以下方式從網站傳輸表單事件數據 自訂 JavaScript 片段 附加到網頁，也可以由 GTM 本身使用另一個附加 自訂 HTML 標籤類型。

讓我們先創建 自訂 HTML 標記遵循以下步驟：

前往標籤然後單擊新的

選擇 標籤類型 作為 自訂 HTML 並在 GTM 程式碼編輯器中插入提供的自訂程式碼以及以下提供的資料：

標題

cHTML – EffortlessFormsDataPush

標籤類型

自訂 HTML

<script>
   (function($){
     var effortlessForms = $('.frm-fluent-form');
     effortlessForms.each(function() {
       var ``form = ``(this);
       var formId = $form.attr('data-form_id');
       dataLayer.push({
        'event': 'EffortlessFormActivities',
        'eventCategory': 'EffortlessForm',
        'eventAction': 'FormView',
        'EffortlessFormID' : formId
      });
   $form.on('effortlessform_submission_success', function() {
     dataLayer.push({
       'event': 'EffortlessFormActivities',
       'eventCategory': 'EffortlessForm',
       'eventAction': 'FormSubmitted',
       'EffortlessFormID' : formId
     });
   });
  });
 }(jQuery));
</script>