這個方法是透過 Contact Form 7 在正確送出表單後，會顯示一串傳送成功的訊息，我們利用它「只有送出成功才會出現的特性」來作為轉換目標的設定。

因此我們會需要兩樣資訊：

1. 傳送成功訊息的Class名稱

2. 傳送成功訊息的內容

// 進入正題

步驟一：確認表單屬性(Class)以及傳送成功訊息的內容

首先，你得實際成功送出一張表單，以正常未經過特殊設定的Contact Form 7表單來說，會在傳送成功後，給你一串訊息。而我們在這串訊息直接點「右鍵 > 檢查」(Chrome瀏覽器)，就可以看到圖中資訊。

以範例網站的資訊來說：

1. 傳送成功訊息的Class名稱：「wpcf7-response-output」

2. 傳送成功訊息的內容：「感謝你的留言，已將留言傳送給站務人員。」

備註：Class基本上不會變動，但是訊息內容可以改變(圖2)，若是有修改，在後續的步驟也記得一併修改，否則便不會觸發轉換追蹤。

步驟二：設定GTM觸發條件「元素可見度」

進到GTM中，我們在「觸發條件」處「新增」一個觸發條件，並選擇「元素可見度」。

接著開始設定：

1. 選取方式

選擇「CSS選取器」

2. 元素選擇器

填入剛剛記錄的Class名稱，「.wpcf7-response-output」

(前面加「.」是因為CSS語法選擇器為Class的關係，如果是ID則是用「#」有興趣可以去參考CSS基礎教學)

3. 啟動此觸發條件的時間

選擇「每個網頁一次」

4. 最低可見百分比

填寫「1」，意思為當有元素出現馬上就觸發。

5.  勾選「觀察 DOM 改變情形」

6. 這項觸發條件的啟動時機

點選「部分可見度事件」，選擇「Click Text」「等於」傳送成功訊息的內容：「感謝你的留言，已將留言傳送給站務人員。」設定完後按下右上角的儲存。

備註：再次提醒，若是有去後台修改訊息內容，要在這邊修改，否則不會觸發。這也可以衍伸成不同表單的觸發條件，例如：可以針對三個不同的需求開立三個表單，並在傳送成功訊息內容做出差異化，便可以追蹤不同的表單轉換。

步驟三：設定GTM代碼「GA通用版事件」

(GA4的設定方法後續更新)

完成觸發條件設定後，回到主畫面，點選「代碼」，新增「Google Analytics (分析)：通用 Analytics (分析)」。

在追蹤類型選擇「事件」，下方有事件追蹤參數，分別是「類別」、「動作」、「標籤」、「值」填寫的越完整，越可以在GA分析到更深的層面，但如果資訊不夠或不多，建議起碼填上「類別」、「動作」(參考圖7)，詳細的事件追蹤參數可以參考官方「事件簡介」。

這邊所設定的事件追蹤參數，請一定要記錄起來，因為還要設定到GA的「目標」才能有效的在GA內將事件變成目標轉換數。

下方的GA分析設定，記得選擇網站目前的GA代碼，下方的觸發條件，就選擇剛剛步驟二設定的元素可見度觸發條件。

正確完成以上步驟後，主頁面便會多一個代碼，觸發條件為步驟二設定的元素可見度。

在送出前建議先到瀏覽模式，在瀏覽模式的網站中，實際送出一張表單，若成功設置，便會在表單送出後，左側出現「Element Visibility」右側的Tags Fired處會出現剛剛設定的代碼(圖10)，這樣表示成功觸發，可點進去看觸發的記錄(圖11)

在預覽模式都確認沒問題之後，記得回到GTM主畫面，按下「提交 > 發布」並大方的唱首歌！

步驟四：設定GA「目標」

剛剛有說到，要把GTM設定事件追蹤參數記錄起來，以便在GA的目標中，將事件透過目標記錄成轉換。

前往GA後台，並找到目標，按新增目標，設定如下：

目標設定：自訂

名稱：聯絡我們表單 (可自行變更)

目標類型：事件

事件條件：類別及動作，就是設定剛剛GTM設定的事件追蹤參數(圖7)

目標設定完成，可以實際透過GA即時功能，測試事件與轉換是否有設定成功。前往前台實際送出聯絡表單，並進到GA「即時」報表，分別在「事件」及「轉換」處，觀察是否在送出表單後，GA有正確記錄到，如果都有，恭喜你成功了。

以上四步驟，簡單教大家如何更準確的去記錄Contact Form7的表單傳送轉換，未來不論是透過廣告或者其他行銷活動，都能過透過GA的數據追蹤，更容易去評估表單所帶來的效益。

備註：如果要設置成Google Ads的轉換代碼，只要新增一個Google Ads轉換代碼，並把步驟二的觸發條件加上，就完成了。至於要如何設定Google Ads轉換代碼？可參考「運用GTM埋設GOOGLE ADS轉換追蹤代碼，以LINE加入好友連結為例」內的第二步。

參考資訊：「事件」簡介、元素可見度觸發條件

謝謝大家觀看，有任何操作問題，隨時歡迎透過 LINE 向我諮詢。

這篇文章 用GTM元素可見度來設定WordPress Contact Form 7轉換追蹤 最早出現於 韓哥數位行銷私塾。

// 零程式基礎也能輕鬆做GA點擊事件追蹤

隨著Wordpress的主題多樣性、外掛擴充性、後台便利性持續不斷的多元更新，同時在廣告費日益高漲的情況下，廠商逐漸重視SEO的重要，而通常要做SEO的第一步會先檢視網站架構與體質，往往在檢視網站體質這部分，企業就會再度花費許多人力成本，而Wordpress迷人之處在於網站架構很適合做SEO，只要有正確的觀念，用對外掛、主題並做細部的調校，往往在SEO上都能有不錯的成效。也因此開始有許多的廠商，不論是B2B、B2C，都逐漸將網站的架構改為Wordpress，這也使得Wordpress所架設的網站越來越普及化。

// 未來再詳細介紹使用Wordpress做SEO的眉角

然而一個網站成形了，不論你是賣東西亦或者你是內容型網站，你可能會開始佈局各種網路資源，想盡辦法的讓大家看到你、知道你，例如：Facebook廣告、Google Ads廣告、部落客KOL合作以及SEO等。這時候你可能會透過Google Analytics來追蹤你佈局在各個來源媒介下的流量，進而去擬定下一步的策略。

「只看流量這個變數來擬定策略夠嗎？」

一般來說若有人回答我這個問題，我通常會先反問他，你的目標是什麼？

假設今天你佈局出去的網路資源，目標是要做大量的曝光，那以廣告來說，可以去看取得1個流量花費多少成本，再經過廣告數據以及流量的分析後，我們可以把廣告費花在獲取流量成本相對低的廣告上。

但在這每個廣告成本都斤斤計較的世道下，不是太多種類型的廣告會只看曝光和進來的流量。一般來說若是電商網站，會看流量進來後有沒有做購買；若是內容型或比較B2B性質亦或者非直接購買性質的網站，可能會想看到流量進來後有沒有填寫表單？有沒有點擊我們期望他點擊的按鈕？

「不論是購買或者填寫表單等等流量進來我們所期望他完成的動作，我們統稱它為”轉換”」

// 廢話這麼多是到底要不要開始教

// 正文開始

本篇案例的情境為，想知道流量進來後，使用者有沒有填寫表單並按下按鈕送出？

(以圖1為例，就是有沒有按下”申請彌月試吃”)

因此我們將流量進來後，使用者按下”申請彌月試吃”，定義為此次要追蹤的「轉換目標」

第一步：開啟GTM內建變數

從 [工作區] > [變數] > [設定] 中，可以將GTM預設的變數開啟，本篇案例會使用到的變數為 [Click Classes] ，先確定他有被打勾。(圖2)

第二步：設定觸發條件

從 [工作區] > [觸發條件] > [新增] 中，選擇 [所有元素]。(圖3)

觸發條件可依照欲新增之事項命名，這邊選擇 [部分點擊]，變數為 [Click Classes]，條件是”等於” [wpcf7-form-control wpcf7-submit]。(圖4)

為什麼這邊條件是等於 [wpcf7-form-control wpcf7-submit]？是因為此Class為Wordpress外掛Contact Form 7對於送出按鈕的定義，查看的方法為，在Chrome瀏覽器對”申請彌月試吃”按鈕，按 [右鍵] > [檢查]，我們可以發現這個按鈕的Class被定義為 [wpcf7-form-control wpcf7-submit]，如下圖5。

// 若您今天不是使用Contact Form 7 表單外掛，而是其他表單或者是自行架設的網站所自製的表單，定義會有所不同，用相同的方法檢視並替換即可。

// 當然，剛剛上面也提到內建變數不只有 [Click Classes]，同樣的邏輯可以自行應用在 [Click Text]、[Click ID]等。

第三步：新增代碼

從 [工作區] > [代碼] > [新增] 中，選擇 [Google Analytics (分析)：通用 Analytics (分析)]。(圖6)

代碼可依照欲新增之事項命名，追蹤類型選擇 [事件]，事件追蹤類型之類別 [申請彌月試吃 or 表單追蹤]、動作 [Click or 播放、下載等]、標籤 [{{Click URL}} (通常用於區分相同類別與動作時的追蹤狀況)]。(圖7)

// 若不清楚類別、動作、標籤、值的概念，參閱：Google官方「事件」簡介

Google Analytics (分析) 設定記得要選擇追蹤碼的變數，下方觸發條件，選擇剛剛設定好的變數 “點擊申請彌月試吃”。(圖8)

第四步：透過預覽模式與GA即時報表測試

設定到這邊，基本上已經透過GTM完成一個基礎表單按鈕的點擊追蹤，但先別急著發佈，切記！在發佈任何修改版本前，一定要先透過”預覽”模式來檢視設定有被正確觸發。

我們在工作區的右上角可以發現”預覽”按鈕，點擊後會出現如下方的預覽模式確認通知。(圖9)

此時，在相同的瀏覽器上，將你的網站重新整理，下方就會出現GTM的預覽工作視窗，前往我們剛剛設定按鈕點擊追蹤的表單上，找到按鈕並嘗試做點擊，若是剛剛設定的代碼有成功被觸發，則在”Tags Fired On This Page”上，就會出現剛剛自行所設定的代碼名稱，本篇範例代碼為”CF7申請彌月試吃”。(圖10)

你可能會問，如果在我按下按鈕後，代碼沒出現在”Tags Fired On This Page” (意即未觸發成功)，該怎麼辦？這時候可以從旁邊的狀態列，點擊”Click” (因為我們是追蹤點擊行為)，點進去設定好應該要被觸發的代碼，往下會找到”Firing Triggers”，這時候你會看到我們設定的觸發條件呈現打”x” (其他觸發條件也同理)，打”x”意指在這次的點擊事件中，此觸發條件並未正確被觸發，因此要回去重新修正觸發條件。(圖11)

// “Click”要選擇當我們點擊欲追蹤按鈕的時候所出現的那次Click，因為在預覽模式下，任何在網站上的點擊都會被記錄一次”Click”動作，因此要確保你檢查的Click是當你按下按鈕後的那一次Click動作。

若是在預覽模式下，確認點擊按鈕有成功觸發到代碼，就可以放心的提交出去，提交後可以到網站實際送出一次表單，然後到GA的 [即時] > [事件] 報表中確認是否有被GA收錄 (圖12)。若要看完整的事件追蹤數據，GA會將其收錄在 [行為] > [事件] 報表中 (圖13)。若要觀察各種不同維度下的事件追蹤流程，則到 [行為] > [事件] > [事件流程] 下，篩選出想要觀察的維度即可 (圖14)。

同場加映：將事件追蹤設定成為GA目標

做到這邊，基本上已經使用GTM完成了一個很基礎按鈕事件點擊追蹤，對於零程式基礎的行銷人員來說，想必也多了許多以往不同的思維和經驗。但只做點擊事件追蹤，在擬定行銷策略上肯定是少了什麼，特別是以這種表單來說，行銷人員要知道的不單單是按鈕是否有被點擊，而是這些點擊的流量從何而來，以及流量進到網站後，有完成此點擊的比例。

// 以此篇案例來說，我們可將「流量進來後有點擊表單」稱作「轉換」，而流量與此轉換的比例稱作「轉換率」

然而若只使用點擊事件追蹤的話，在GA是無法看到其轉換率的，因此我們需要配合GA的「目標」設定來達成。從 [GA設定] > [目標] > [新增目標] > [自訂] > [事件] 設定，目標詳情的 [類別] 及 [動作] 要填的條件是我們在GTM所設定的類別與動作名稱作為事件條件設定 (圖15)。成功設定後即可在 [客戶開發] > [所有流量] > [來源/媒介] 中詳細地看到各個不同來源的流量以及其轉換 (圖16)。

後續探討：關於點擊事件追蹤的數據落差

聰明的你，做完這邊是不是有哪裡覺得怪怪的？本篇的教學，可以很快速的讓零程式基礎的行銷人員在不透過工程師的情況下自行設定完按鈕點擊事件追蹤，但確實存在著幾點追蹤落差，是哪幾點？如果你有猜到，看看是不是以下幾點：

1. Class相同的追蹤落差

因Wordpress Contact Form 7 Class相同的關係，以此篇來講只適合僅存在一個聯絡表單的Wordpress網站，否則按照上面的做法，若是今天存在兩個以上不同表單，當他們皆被觸發時，將無法分別是被觸發哪個。

2. 點擊後表單尚未送出的追蹤落差

因為表單通常會設定 [*必填] 條件，若使用者在並填寫正確就點擊送出，則一樣會追蹤到點擊並計算成轉換，但實際上的表單並未在這次點擊上完成，若是這類的情況經常發生，則會降低點擊轉換數據的準確性。

3. 惡意點擊表單的追蹤落差

呈第2點，若是遇到未填寫完成又持續點擊的使用者，或者是習慣點擊按鈕多次的使用者，都將影響這些點擊轉換數據的落差。

若是您想要追蹤的按鈕是較直覺型 (例如：點擊即過頁、點擊即確認等)，並沒有像表單型按鈕的條件限制 (例如：必填欄位)，基本上不用太擔心追蹤出來的數據會有過大的落差，後續我也將延續此篇的內容，介紹另外一種的Wordpress CF7表單追蹤方法，此方法將更確保表單有確實送出才會觸發事件與記錄轉換。

請參閱：「用GTM元素可見度來設定WORDPRESS CONTACT FORM 7轉換追蹤」。

這篇文章 如何使用GTM設定GA點擊事件追蹤？以WordPress聯絡表單7為例 最早出現於 韓哥數位行銷私塾。