在之前的追蹤「表單提交」事件中，我們介紹了三種不用經由工程師協助，可以自行透過 GTM 就可以完成的追蹤方式，如果這三種方法依然無法幫助你完成表單的追蹤，那我們可以善用 Data Layer push 來幫助我們解決需求，而透過資料層的推送事件（Data Layer Push）進行 GTM 的設定，同時也是最為保險且穩定的方法。
如果對於 Data Layer 資料層是什麼還不熟悉，可以參考之前的文章：「Data Layer 資料層是什麼？」，幫助你更有效率的了解接下來的教學。
在文章開始之前，假設你的網站都已經安裝好了 Google Analytic 4，大部分會使用 GTM 傳送事件的朋友，都是結合 GA4 一起應用，希望藉此來觀察網站流量表現，因此如果還沒安裝 GA4 的朋友，可以先看這篇透過 GTM 安裝 GA4 的教學，其餘相關設定教學就不會在本篇文章中贅述。
設定 Data Layer Push
我們都知道 GTM 與網站之間的溝通是透過中間的 Data Layer 資料層，因此如果之前的方法對你的表單提交追蹤都無效，那我們就必須在網站的表單頁面推送事件到 Data Layer 中，接著使用這個事件透過「自訂事件」觸發條件類型觸發 GA4「表單提交」事件。
請工程師放入一段 JS 代碼
將下列這段代碼交給網站工程師，請工程師在使用者成功提交表單之後，推送這段代碼到網站的 Data Layer 當中，如果工程師對於 Data Layer 的使用不甚熟悉，可以請他參考 Google 官方的文件，就會知道怎麼操作了。
（在請工程師幫忙時，我們可以準備一份文件讓它們參考，而關於如何準備給工程師的 Data Layer 文件，可以參考這篇文章，這樣可以讓工程師比較好理解你需要他幫忙的事情，也可以減少出錯的情況，避免一來一往曠日費時且沒有效率。）
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'WebFormSubmit',
'form_type':'contact-us',
'form_location' :'Maldive-tour-page'
});讓我們來拆解一下這段代碼在做什麼事情，行銷人員在這邊的工作就是確認當表單成功提交之後，需要推送什麼樣的「事件名稱」、「參數名稱」以及「參數值」到 Data Layer 中，讓你在設定追蹤事件的時候可以透過 GTM 正確抓取，並將資料傳送到 Google Analytic 中。
紅框內就是行銷人員須確認的項目，這邊可以看到我們將事件名稱設定為「WebFormSubmit」，並推送了表單的類型「form_type」 以及表單的位置「form_location」，幫助我們了解使用者是在網站什麼地方填寫了什麼樣類型的表單，透過預覽模式都可以看到這些位於網站資料層的資料。
透過「預覽模式」確認
當網站工程師將上述 JS 代碼安裝完畢之後，我們就可以來到 GTM「預覽模式」當中，測試當表單提交成功之後，網站是否有將我們設定的資料推送到 Data Layer 資料層。
（不知道如何使用預覽模式的朋友，可以看這篇：如何用 GTM 「預覽模式」檢查代碼有無設定成功？）
如下圖所示，在我們提交表單之後，確實看到了前面設定的「事件名稱（event）」、「參數名稱（form_type & form_location）」以及「參數值（”contact-us” & “Maldive-tour-page”）」。
接下來，就可以開始設定 GTM 中的觸發條件了。
觸發條件的設定
左邊面板選擇「觸發條件」> 右上角「新增」> 選擇「自訂事件」觸發條件類型
這邊要注意的是，自訂事件中的事件名稱，必須要跟推送到 Data Layer 中的事件名稱完全一模ㄧ樣，才能正確觸發 GA4 事件代碼，因此在這邊的事件名稱中，我們會填入「WebFormSubmit」。
完成之後，就可以開始進行 GA4「表單提交」事件的設定了。
設定變數
在推送到 Data Layer 當中的 Javascript 當中，除了事件名稱之外，還另外送出了兩個參數，分別是「form_type」以及「form_location」，這兩個參數可以幫助我們了解使用者是在哪個頁面提交了哪分表單，如果要讓這兩個資料的值顯示在 GA4 的報告中，必須要先在 GTM 中進行變數的設定。
左邊面板選擇「變數」 > 下方使用者自定義變數區塊「新增」 > 變數類型「資料層變數」
在變數名稱的欄位中，輸入與 data layer 中完全一樣的名稱「form_type」，注意大小寫，必須要完全一樣的名稱（下圖），才有辦法抓到相對應的值，「form_location」也依樣畫葫蘆為其設定一個變數，稍後在GA4「表單提交」事件設定中，我們就會用到這兩個自訂的資料層變數。
設定 GA4 「表單提交」事件
在所有動作開始之前，我們透過 GTM 設定表單追蹤事件，首先來到 GTM 介面：
左邊面板選擇「代碼」 > 右上角「新增」 > Google Analytics (分析)：GA4 事件 > 設定「事件名稱」 > 新增「事件參數」 > 儲存
下方觸發條件的部分，選擇前面設定的自訂觸發條件，如此一來，這個代碼就會在 data layer 出現「WebFormSubmit」事件名稱時啟動，並且傳送帶著「form_type」以及「form_location」參數的「form_submit」事件到 GA4 當中。
確認代碼是否成功運作
設定完成之後，一樣透過預覽模式檢查代碼是否正常運作，在我們提交表單之後，可以看到預覽模式中的左側面板出現了「WebFormSubmit」事件，點選事件本身可以看到右側出現被觸發的 GA4 事件代碼「GA4Event-Form_Submit」。
點開代碼之後，可以看到事件參數「form_type」以及「form_location」也跟隨 GA4 事件帶出我們給工程師的 JS 代碼中所設定的參數值「”contact-us”」以及「”Maldive-tour-page”」。
接著來到 GA4 Debug View 以及即時報表，確認 GA4 是否有收到 GTM 觸發的事件，從下圖中可以看到「Form_Submit」事件有送入 GA4，且點擊「Form_Submit」後可以看到參數「form_location」以及「form_type」。
Debug View 的位置：
GA4 介面中 > 左下角齒輪 > 「資源設定」 > 「資料顯示」 > 「Debug View」
到這邊整個表單提交事件設定就已經完成了 90%，至於剩下的 10% 是什麼呢？
就是到 GA4 當中自訂維度。
GA4 自訂維度
雖然我們可以在即時報表以及 Debug View 當中看到事件的參數，但如果我們沒有去做特別設定的話，未來在製作報表的時候，我們是無法看到「form_type」以及「form_location」這兩個維度的，我們必須要先來到 GA4 的後台自行定義維度。
GA4 左下角「齒輪」 > 「資料顯示」> 「自訂定義」> 「建立自訂維度」
維度名稱欄位中，顯示的是報表中出現的維度名稱，這邊的命名可以自訂，但建議與原參數名稱一致就可以，重點是必須要好閱讀，簡單明白易懂，省去未來製作報告上的困擾。
用同樣的方法，自訂「form_type」以及「form_location」兩個參數，完成之後不會馬上看到自訂的維度，必須要等待 24-48 小時之後，才可以看到在報表中出現。
（在上圖底部「事件參數」的部分，如果下拉選單當中沒有看到你的參數名稱，也請稍待 24-48 小時後再回來看就可以看到了，或是你也可以自行輸入參數名稱，記得必須要跟 GTM 中的GA4 事件參數名稱完全相同。）
關於自定維度的設定方式，還可以參考這篇文章，回有更詳細的解釋以及步驟說明：如何使用 GA4 「自訂定義」中的「自訂維度」功能？
總結一下
- 行銷人員必須先想好在表單提交之後，行銷部門會想要知道什麼樣的訊息？幫助分析行銷活動的成效，完成之後將所需要的參數交給網站工程師，請他們用 data layer push 的方式，在使用者提交表單之後推送事件以及相關參數到 data layer。
- 透過 data layer 的事件建立觸發條件。
- 將資料層中跟表單提交相關的參數設定為變數，例如「form_type」以及「form_location」。
- 建立 GA4 事件代碼，綁定觸發條件以及變數。
- 預覽模式確認代碼有無正常啟動、GA4 確認有無收到事件。
- 建立自訂維度
完成以上步驟之後，我們就可以追蹤網站上的表單提交行為了，透過 data layer 可以說是最為保險且不容易出錯的，如果你的網站表單追蹤事件無法透過「網頁瀏覽」、「表單提交」以及「可見度元素」的方法來設定，希望本篇文章可以幫助你解決所面臨的問題。
延伸閱讀：
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
