如果你的網站表單在提交後沒有重新載入或引導至感謝頁面，網址也沒有改變，那麼我們可能無法使用「 網頁瀏覽」觸發條件來啟動表單提交的追蹤代碼，即使改用 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 以外，我們還可以看到更多關鍵資料可供我們使用，其中最重要的就是參數 response ，它告訴我們表單是否成功提交，我們將會運用到這個參數來幫助我們設定觸發條件。
設定「資料層變數」
在設定觸發條件之前，我們需要先抓取到資料層中的 response 參數底下 success 參數的值，透過其回傳 true 或是 false 來 判斷表單是否有成功提交 ，如果是 true 就會符合觸發條件，進一步啟動事件代碼。
GTM 左側面板選擇「 變數」> 使用者定義的變數區塊選擇「新增」> 點擊中間「選擇變數類型以開始設定」> 右側選單選擇「 資料層變數 」
接著在設定畫面中，於資料層變數欄位中輸入 attributes.response.success 。
這邊要注意，如果直接輸入 success 是無法取得其值的，因 success 位處巢狀結構（ success 位於 response 內，而 response 又位於 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 內建的「 表單提交」觸發條件處理的表單，可以嘗試採用本篇文章的方式來設定追蹤事件，如果依然無法，我們則可以改用 「元素可見度」觸發條件或是與 工程師合作推送事件到資料層 中，來協助追蹤表單提交事件。
