如何在 GA 中追蹤 Contact Form 7 與 Elementor 表單提交轉換？

最後更新時間：2020 年 12 月 8 日

你想知道自己的 WordPress 網站的轉換率是多少，以便自己修正並精進自己的網站嗎？老闆叫你追蹤公司官網的表單提交成效，但你卻完全不知道該怎麼做嗎？

這篇文章主要是幫助完全不懂程式碼的網路行銷工作者，透過 GTM ( Google Tag Manager ) 以及 GA ( Google Analytics ) 這 2 款免費的網站分析與管理程式，並將所有來過你網站的訪客，他們所提交的表單記錄成轉換並顯示在報表之中。

接下來，我將會以 WordPress 網站中最常見的 2 種表單提交方式，Contact Form 7 以及 Elementor 表單為例子進行追蹤，讓你能夠更加清楚知道目前你網站整體的表現及成效。

1. 為什麼我們需要追蹤表單提交？

表單提交是一般衡量一個網站表現最基本的轉換指標，假設今天有 100 個人來訪了你的網站，然後其中有 2 個人透過你網站中的表單向你進行了聯繫或提問，這時候我們就可以計算出你網站目前的轉換率為 2/100 = 0.02，也就是 2% 的轉換率。

而知道了轉換率可以幹嘛呢？通常計算出轉換率都是為了要推算未來公司可能會帶來的收益，或是精進自己接下來網站成長的目標，比如說你今年網站的轉換率是 2%，那麼你就可以設定目標為明年轉換率要為 3%，並且進行努力與修正。

以我自己為例，我是一家提供 WordPress 網站架設的網頁設計公司，而如果有人想找我架網站，他們會透過我提供在網站上的聯絡表單與我進行聯繫。

如果我有設定追蹤表單提交的話，我就可以得出我的轉換率可能是 1% 或是 2%，並且預期未來數月到一年中，公司可能會帶來的收益，以便控管資金以及現金流。

當然，如果你只是經營自己的個人網站或是部落格，你可以不用特別去計算或是追蹤網站的表單提交轉換率，我會去追蹤這些數據是因為我的網站就是自己的公司。

但是，如果未來你有打算開公司、並將自己的網站轉變成真正的網路事業的話，那麼進行追蹤網站上的表單提交轉換，是不可或缺的。

2. 如何追蹤表單提交？

如果你已經了解了追蹤表單提交的重要性，那麼接下來，我將會以 WordPress 網站中最常見的 2 種表單提交方式：Contact Form 7 以及 Elementor 表單為例子，並進行追蹤。

最終的成果會是以上圖這樣子的形式顯示在 GA 報表之中，基本上 GA 報表就是業界大多數公司目前採用的網站分析工具，因此如果你是從事行銷相關的工作，直接截 GA 報表中的圖片去跟客戶開會或是報告老闆都絕對是沒問題的。

接下來，雖然我們會先以 Contact Form 7 為例，但如果你是 Elementor 表單的用戶，礙於整體教學的一致性與連貫性，以及有太多設定是重複的，我會需要你先照著 Contact Form 7 的教學照著做一遍，接著再接續進行 Elementor 的表單提交追蹤，謝謝。

2.1 Contact Form 7 表單追蹤

接下來的教學我們會以 Contact Form 7 這款免費、知名的 WordPress 表單管理外掛為例，透過這款外掛，它可以讓你建立起一個自己專屬的表單，並且放置在網站上讓訪客與你進行聯繫。

要啟用 Contact Form 7 非常簡單，只要前往 WordPress 內建的外掛下載區，並搜尋 Contact Form 7 即可安裝。

啟用 GTM 與 GA

如果你已經啟用了 Contact Form 7，那麼接下來我們便可以開始進行表單提交的轉換追蹤。

首先，我們會先需要啟用 GTM ( Google Tag Manager ) 與 GA ( Google Analytics ) 這 2 款由 Google 提供的免費網站分析與管理程式。

而 GA 與 GTM 的相關說明，以及如何在 WordPress 中安裝 GTM 並開啟 GA 報表的方式，請參考我之前寫的這篇文章，並花個 5 ~ 10 分鐘把它們都開啟，這邊便不再贅述。

如果你之前是自己用網路上別的教學方式開啟 GTM 和 GA 報表的話，我建議你也點進上面那篇文章看一下，並照著文章教你的方法重新設定 GTM & GA。

因為接下來我們會使用到一個專門處理 WordPress 的 GTM 外掛，所以如果你原本埋放 GTM 的方式跟我不同的話，會沒有辦法進行下去。

總之，如果你不是按照我上面貼的文章埋放 GTM 代碼的話，請參考這篇文章的 GTM 追蹤方式。

開啟 GTM 外掛設定

前往 WordPress 後台，接著依序進行：

• 設定 -> Google Tag Manager -> 整合功能 -> Contact Form 7 -> 勾選選項並儲存。

開啟這個選項是為了讓這個外掛自動幫我們推送 Contact Form 7 的數據到資料層之中，如果你不知道什麼是資料層也沒有關係，只要記得勾選就好了。

開啟 GTM debug 模式

接著，我們會需要進入到 GTM 的debug 模式之中，回到你的 GTM 首頁之後，點擊右上角的按鈕預覽。

然後會跳轉到一個畫面，在這邊填入你網站的網址 ( 例如我的是 https://test.timidbear.co )，完成之後按下 start 按鈕。

確認 Contact Form 7 正確追蹤

接著會跳出 2 個畫面，分別為：

1. GTM 的 debug 視窗
2. 你的網站

先前往你網站的視窗，接著前往你要追蹤表單的頁面，並且發送一個測試的表單 ( 隨便寫點什麼 )。

接著前往 GTM 的 debug 視窗，在左邊的側邊欄中點選 gtm4wp.contactForm7Submitted 的一個事件，接著再點選右邊畫面中的 Data Layer，你就會發現這邊記錄了你剛剛發送表單時填寫的資料。

這樣代表什麼呢？這樣代表 GTM 有成功捕捉到你傳送的 Contact Form 7 這個事件了。

建立 GTM 觸發事件

接著回去 GTM 中，先點選左邊側邊欄中的觸發事件，接著新增一個觸發事件，並依序填入：

1. 名稱：這邊可以隨便填，例如我的是 Contact Form 7 Submitted。
2. 觸發條件類型：選擇自訂事件。
3. 事件名稱：gtm4wp.contactForm7Submitted。
4. 完成之後，按下右上角的儲存。

上面這樣做的意義是，之後只要有人提交你網站上的 Contact Form 7 表單之後，GTM 就會偵測到這個事件並且被觸發。

建立 GA 事件代碼

接著點選左邊側邊欄中的代碼，然後點選右上角新增一個代碼，並依序填入：

1. 名稱：這邊可以隨便填，例如我的是 GA - Contact Form 7 Submitted。
2. 代碼類型：選擇Google Analytics ( 分析 )：通用 Analytics ( 分析 )。
3. 追蹤類型：選擇事件。
4. 類別：填入轉換。
5. 動作：填入 表單提交。
6. 標籤：填入 Contact Form 7。
7. Google analytics ( 分析 ) 設定：選擇你之前儲存的 GA 追蹤碼變數，或是直接填入你的 GA 追蹤碼 ( ex. UA-123456789 )
8. 觸發條件：選擇前面建立的 Contact Form 7 Submitted 事件。
9. 完成之後，按下右上角的儲存。

而這一段這樣做的意義是，之後只要有人提交網站上的 Contact Form 7 表單之後，GTM 就會觸發這個事件，並且將資料傳達給 GA。

如此一來，我們之後才能在 GA 的報表中計算到轉換。

發布容器

最後，確認都設定好之後，點選右上角的提交按鈕進行發佈，GTM 的部分就到這邊告一個段落了，接下來我們要前往 GA。

設定 GA 目標

來到 GA 之後，請先點選左下角的齒輪 icon，並在資料檢視的欄位之中找到目標的選項。

接著我們要建立一個自訂的目標轉換，因此點擊自訂。