如果你的網站表單在提交後沒有重新載入或引導至感謝頁面，網址也沒有改變，那麼我們可能無法使用「網頁瀏覽」觸發條件來啟動表單提交的追蹤代碼，即使改用 GTM 內建的「表單提交」觸發條件也無法正常運作。
仔細觀察表單提交後的網頁動作，你會發現畫面並未重新載入，而是直接在原地顯示表單提交成功的訊息，如果是這樣的情況，你的表單很可能是使用了 Ajax 技術將資料傳送到伺服器上，這也是為何前述的觸發條件無法正常運作的原因。
所以，我們要如何知道這是否使用 Ajax 技術提交的表單呢？
這篇文章將會教你如何使用「Ajax 監聽器」並且搭配「自訂事件」觸發條件來完成表單提交的追蹤，過程中你不需要撰寫任何一行代碼，只要知道如何複製貼上就可以了。
安裝 Ajax 監聽器（Ajax listener）
首先，我們必須複製以下這段代碼，並透過 GTM 中的「自訂 HTML」代碼將其安裝到網站當中，原檔案由 Marko Sulamägi 改寫 Lunametrics 的代碼後放在 Github 上，是歷史相當悠久的 Ajax 監聽器，我們可以直接透過 github 複製。
接著來到 GTM 中，將這組程式碼複製貼上到「自訂 HTML」代碼中。
GTM 左側面板選擇「代碼」> 右上角點擊「新增」 > 點擊「選擇代碼類型以開始設定」> 選擇「自訂 HTML」
將代碼複製貼上於「HTML 欄位」中 > 觸發條件可以選擇「全頁觸發（All Pages）」或是只在該表單頁面觸發
（尚不熟悉「網頁瀏覽」觸發條件的朋友，可以參考這篇文章：認識 GTM 網頁觸發條件：同意聲明初始化、初始化以及網頁瀏覽）
測試 Ajax 監聽器
設定完成之後，我們可以開始測試 Ajax 監聽器是否有正常運作，一樣來到「GTM 預覽模式」，透過預覽模式的畫面提交表單，如果是運用 Ajax 技術提交的表單，我們應該要在預覽模式左側的面板上，看到 ajaxComplete 事件。
當看到 ajaxComplete 事件出現時，就代表該表單是使用 Ajax 技術將表單資料提交到伺服器上，這也是為什麼我們無法使用「網頁瀏覽」以及內建的「表單提交」觸發條件的原因。
(如果沒有出現 ajaxComplete 事件，後面就不用看下去了，代表你的表單不是用 Ajax 技術提交，此時我們必須要改用「元素可見度」觸發條件或是與工程師合作推送事件到資料層中，來協助追蹤表單提交事件)
現在，既然我們的資料層有資料了，熟悉如何運用「資料層 Data Layer」的朋友應該知道要怎麼做了，如果對於「資料層」還不是太了解的朋友，可以先看看這篇：Data Layer 資料層是什麼？
但你如果趕時間不看也沒關係，可以先跟著以下的設定步驟繼續看下去。
設定「表單提交」追蹤事件
進一步展開剛剛預覽模式中的資料層，除了事件 ajaxComplete 以外，我們還可以看到更多關鍵資料可供我們使用，其中最重要的就是參數 respone ，它告訴我們表單是否成功提交，我們將會運用到這個參數來幫助我們設定觸發條件。
設定「資料層變數」
在設定觸發條件之前，我們需要先抓取到資料層中的 respone 參數底下 success 參數的值，透過其回傳 true 或是 false 來判斷表單是否有成功提交，如果是 true 就會符合觸發條件，進一步啟動事件代碼。
GTM 左側面板選擇「變數」> 使用者定義的變數區塊選擇「新增」> 點擊中間「選擇變數類型以開始設定」> 右側選單選擇「資料層變數」
接著在設定畫面中，於資料層變數欄位中輸入 attributes.response.success 。
這邊要注意，如果直接輸入 success 是無法取得其值的，因 success 位處巢狀結構（success 位於 respone 內，而 respone 又位於 attributes 內），必須要一層一層的往下探尋，才能抓到我們要的 true。
（關於取得資料層資料的方式，可以參考文章：GTM 資料層變數介紹，在那邊我們會有更詳細的解說。）
資料層內的名稱有可能會因為不同的表單格式，而有不同的參數值，這點請在提交表單之後自行確認，因此，你的資料層結構以及參數名稱可能會跟我們範例中的不一樣，要注意。
測試一下
變數設定完成之後，一樣來到「GTM 預覽模式」測試資料層變數是否有正常運作，在成功提交表單之後，有無抓取到我們要的 true 值（代表表單成功提交），而預期看到的畫面應該會如下圖：
確認沒有問題之後，我們就可以開始設定觸發條件了，稍後我們會用到這個「資料層變數」來進行設定。
設定「自訂事件」觸發條件
GTM 左側面板選擇「觸發條件」> 右上角「新增」> 點擊中間「選擇觸發條件類型以開始設定」> 右側選單選擇「自訂事件」
在成功提交表單之後， Ajax 監聽器偵測到有 Ajax 動作完成，因此推送「ajaxComplete」事件到資料層中，我們將在自訂事件中使用「ajaxComplete」事件名稱，並搭配剛剛設定的「資料層變數」來完成觸發條件的設定，你的設定畫面應該會如（類似）下圖。
將上述的設定翻譯成中文就是：
當資料層出現事件名稱為 ajaxComplete 的事件，同時該資料層中 success 參數值等於 true 時，該觸發條件將被滿足。
設定表單提交 GA4 事件代碼
GTM 左側面版選擇「代碼」 > 右上角「新增」 >「Google Analytics(分析)」>「Google Analytics(分析)：GA4 事件」
由於 GA4 本身已經有預設了表單提交事件的名稱，例如：加強型評估事件中的 form_submit 以及建議事件中的 generate_lead，在沒有特別的需求下，我們會建議可以直接沿用預設的事件名稱，避免未來事件名稱管理上的混亂，製作報表需要篩選時也會比較好處理。（如果為每種表單都設定一種事件名稱，僅管你自己看得懂，但未來接手的同仁鐵定很容易頭痛）
(如果使用 form_submit 作為事件名稱，我們會建議將 GA4 加強型評估事件中的表單提交事件也一同關閉，未來所有的表單追蹤事件都透過 GTM 來設定就可以。)
確認事件名稱之後，你的「GA4 事件」代碼設定完成的畫面應該會如下圖：
測試一下
完成之後，我們應該要預期當表單提交之後，該 GA4 事件代碼會被啟動，並傳送 form_submit 事件到 GA4 中，此時透過 GTM 預覽模式測試應該要看到像是下圖的畫面。
點開代碼卡片，我們可以看到設定的事件名稱 form_submit 傳送到 GA4，下方觸發條件都打了綠勾，代表資料層中的參數 success 為 true 且有抓到資料層事件 ajaxComplete，觸發條件皆被滿足，所以 GA4 事件代碼才會啟動。
既然發送事件沒問題了，同樣的，我們也必須到 GA4 的 Debug View 中確認是否有接收到 form_submit 事件，這個檢查流程我們在許多文章中都有提到，因此這部分就不再贅述。
如果都沒問題，記得要將代碼發佈，很多朋友常常測試完之後以為沒問題了，忘記發佈，等到需要追蹤表單提交的成效時，才發現大事不妙。
總結一下
回顧一下本篇文章，為了要追蹤採用 Ajax 技術提交表單的事件，我們執行了以下步驟：
- 透過「自訂 HTML」安裝 Ajax 監聽器，協助我們判斷表單是否透過 Ajax 技術提交資料。
- 利用 Ajax 監聽器推送到資料層的「事件」以及「參數」設定「自訂事件」觸發條件。
- 建立 GA4 事件代碼，並綁定「自訂事件」觸發條件。
- 進行測試。
就是這麼簡單，未來，如果遇到沒有感謝頁面（頁面沒跳轉）或是無法用 GTM 內建的「表單提交」觸發條件處理的表單，可以嘗試採用本篇文章的方式來設定追蹤事件，如果依然無法，我們則可以改用「元素可見度」觸發條件或是與工程師合作推送事件到資料層中，來協助追蹤表單提交事件。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
