我們在過去的文章中，曾經提到了許多追蹤「表單提交」事件的方法，不管是透過 GTM 內建的「表單提交」觸發條件、用 Ajax 監聽器（Ajax Listener）或是工程師協助的「資料層事件」，都可以幫助我們追蹤表單是否成功提交，並且將結果傳送到 GA4 當中。
但如果我們還想要進一步知道使用者提交的內容，並且將表單中特定欄位或是選項的「值」傳送給 GA4，以便我們使用 GA4 的「目標對象」功能做進一步的受眾設定呢？
例如：針對活動參加意願的調查表單中，勾選「尚不確定」的使用者，投遞廣告或是搭配 User ID 發送可以提升其參加意願的誘因？
接下來的文章中，我們將會帶你結合多種技巧，用 GTM 抓取表單中如：打勾選單、單選按鈕 Radio Button 或是下拉選單中的「值」，會需要用到一點點 Javascript 以及「 CSS 選取器 」的技巧，如果以上這些都不懂沒關係，照著接下來的內容操作，一樣可以幫助你完成任務。
如果趕時間，想要盡快完成設定，可以直接跳到這段。
延伸閱讀 》 如何使用 GTM 的「CSS 選取器」(CSS Selectors)？
本篇重點
找到表單選項的 HTML 結構
假設表單欄位為「單選按鈕 （Radio Button）」 的形式，該欄位有 3 個選項（如下圖），我們希望抓取選項中的「值」，將其隨著「表單提交」事件一起傳送給 GA4。
ㅤ
先在該表單欄位按滑鼠右鍵，選擇「檢查」，進入網頁開發者工具，確認該欄位的 HTML 架構。
由於我們使用的是「 WP Form」的外掛表單，因此可以在欄位中看到 name 以及 value 屬性，在稍後的操作中，我們將會透過「 CSS 選取器 」的方式，選擇該欄位，因此確認這邊的 name 以及 value 屬性名稱相當重要。
（如果你的網站不是透過 WordPress，可以試著找找看有無類似的屬性名稱，或是請工程師加上去。）
測試 Javascript 代碼是否正常運作？
將下列這段 Javascript 代碼複製貼上於網頁開發者工具的 Console 頁籤中，確認代碼是否有抓取到表單的「值」。
（因為表單 HTML 結構的不同，你的屬性名稱可能也會不一樣，記得更改下方代碼紅色粗體字的部分，替換成符合你表單結構的屬性名稱，下方代碼紅字粗體的部分對應的是上一段落中的 name 屬性名稱與值以及 value 屬性名稱。）
document.querySelector('[name="wpforms[fields][11]"]:checked').value看不懂這段代碼沒有關係，這已經屬於 Javascript 的範疇，身為行銷人員的你可以不需要理解到這部分（當然，有多餘時間的話，學好與 GTM 相關的 Javascript 是有幫助的。）
如果將這段代碼翻譯成白話文，就是指：
選擇文件表單中 name 屬性為 wpforms[fields][11] 的元素，同時也是這個表單中已經被選中（：checked）的元素，接著取出該元素的「值（.value）」
再白話一點就是：
這段代碼會查找表單中名稱為 wpforms[fields][11] 並且已經被選中（：checked）的元素，然後獲取它的「值」。
ㅤ
將這段代碼貼到網頁開發者工具的 console 頁籤之後，預期應該要能夠看到被我們選擇的欄位選項「值」，依照我們範例所選擇的來看，其「值」必須為「 一定到 」。
ㅤ
先在 console 頁籤中測試的好處，就是步驟相對簡單且快速。
我們也可以直接把代碼貼到 GTM 的「 自訂 javascript 」變數當中，然後透過「預覽模式」測試，觀察該變數是否有抓取到我們想要的「 值 」，只是這個過程就相對繁瑣，如果出錯了，就必須回到 GTM 重新設定變數，一來一往，較為費時。
也因此才會建議先在網頁開發者工具的 console 中進行測試，確認沒問題之後，再開始進行 GTM 的設定，了解以上的原理並確認 Javascript 代碼可以正確抓取到「值」之後，我們就可以開始進入 GTM 設定的環節。
建立「自訂 javascript」變數
我們在上一段簡單解釋了該 Javascript 代碼運作的原理，但我們接下來會在 GTM 的「自訂 javascript」變數中使用更完整的代碼，以避免使用者沒有在表單中選擇任何選項時，代碼回傳了錯誤的「值」，影響運作。
GTM 左側面板選擇「變數」 > 下方「使用者定義的變數」區塊右上角選擇「新增」 > 選擇「自訂 Javascript」
ㅤ
將下列這段代碼複製貼上到「自訂 Javascritpt 」變數的欄位當中。
（注意，紅色粗體是要更換的部分，記得替換成符合你表單欄位 HTML 結構的屬性名稱。）
function() {
var formValue = document.querySelector('[name="wpforms[fields][11]"]:checked');
if (formValue) {
return formValue.value;
}
return undefined; // 確保未找到時返回 undefined
}
ㅤ
用網頁開發者工具先行測試
我們一樣可以先把這段代碼放到網頁開發者工具的 console 中進行測試，但必須要加入 4 個括弧（下方紅色標示），否則無法在 console 中運作。
(function() {
var formValue = document.querySelector('[name="wpforms[fields] [11]"]:checked');
if (formValue) {
return formValue.value;
}
return undefined; // 確保未找到時返回 undefined
})()ㅤㅤㅤ
如果代碼正常運作，預期應該會在網頁開發者工具的 console 頁籤中看到以下畫面，代表我們可以正確抓取到表單選項的「值」
ㅤ
「預覽模式」測試變數
確認沒問題之後，就可以將「自訂 Javascript」變數儲存，在這邊我們將該變數命名為「 CJSV | Form Answer Join or Not? 」（這邊只是舉例命名，你可以自行更改），接著就可以來到「預覽模式」進行測試。
ㅤ
（尚不知道預覽模式如何使用的朋友，可以參考這一篇文章》如何用 GTM 「預覽模式」檢查代碼有無設定成功？）
預期應該要在點選表單選項之後，看到變數「 CJSV | Form Answer Join or Not? 」帶有該選項的「值」（如下圖）
（預覽模式畫面）
↓
ㅤ
確定沒有問題之後，我們就可以將該「自訂 Javascript」變數放到「表單提交」追蹤事件當中，一起跟著事件傳送到 GA4（如下圖）。
關於用 GTM 設定「表單提交」追蹤事件的方式，我們在過往的文章中已經有提到過不少方式了，這邊就不再贅述。
最後，由於這是我們自行創建的事件參數（join_or_not），GA4 無法辨別，如果想要在報表中可以選到這個參數，別忘了要去 GA4 後台「自訂定義」中「自訂維度」，該參數才能在報表中的「維度」清單被選到。
延伸閱讀》如何使用 GA4 「自訂定義」中的「自訂維度」功能？
「勾選框」形式的「值」也可以抓取嗎？
ㅤ
「勾選框（Checked box）」這種欄位形式雖然不一樣（其實都是勾選的意思），但基本結構是相同的，所以可以用同樣的 Javascript 代碼進行設定，記得替換欄位的 name 屬性名稱就可以了。
下拉式選單的「值」該如何抓取？
ㅤ
如果是下拉選單呢？也可以用一樣的方法嗎？
基本上，也是大同小異，但是會稍微有點不同，在這邊我們一樣用 WordPress 外掛表單「 WP Form 」來做示範（你我網站表單設計方式可能都不太一樣，基本邏輯就是找到欄位的 name 以及 value 屬性，替換至 Javascript 代碼中，就能解決大部分的問題。）
ㅤ
從上圖可以看到，value 屬性的位置跟我們前面舉的表單欄位類型有點不同（不依附在同一個欄位元素裡面），同時因為不是「勾選框（Checked box）」或是「單選按鈕 （Radio Button）」 類型的欄位，因此在 Javascript 代碼中，我們的「 CSS 選取器 」不需要有:checked，最後代碼會如下方所示：
（記得將紅字粗體部分，替換成符合你網站表單的屬性名稱。）
function() {
var formValue = document.querySelector('[name="wpforms[fields][10]"]');
if (formValue) {
return formValue.value;
}
return undefined; // 確保未找到時返回 undefined
}一樣，可以將這段代碼貼進網頁開發者工具中先行測試，確定沒問題之後，再到 GTM 當中進行「自訂 Javascript」變數的設定。
我可以用「自動事件變數」嗎？
如果有閱讀過這篇「GTM 變數介紹：自動事件變數(Auto Event Variable)，該如何應用？」文章的朋友，在面對這種抓取表單欄位「值」的任務時，腦海中可能會先想到使用「自動事件變數」。
可惜，這是行不通的，因為「自動事件變數」抓取的是所有點擊行為時，其點擊位置元素的屬性值，以前述範例中我們要抓取的 value 屬性來看，如果一個頁面裡，有很多元素都有 value 屬性，那麼便無法準確抓到指定的欄位「值」。
就算使用者一進到表單頁面後，什麼都不點，直接點擊該表單選項，此時「自動事件變數」確實會抓到正確的 value 屬性「值」，但如果在提交表單之前，不小心點到了畫面中任一空白處或是其它元素，此時該「自動事件變數」就會被覆蓋掉，變成 undefined 、空白或是該點擊元素的 value 屬性「值」。
好，我們知道，上面說的雖然都是中文，但你看完之後可能還是會一頭霧水，沒關係，只要記得面對這樣的情況，「自動事件變數」是行不通的就可以了。
總結一下
在這篇文章中，我們解釋了如何應用 GTM 中的「 自訂 Javascript 」變數以及「 CSS 選取器 」來抓取表單選項的「值」，身為行銷人員的你不用刻意背下這些代碼沒有關係，只要知道有這樣的工具可以協助我們獲取需要的資訊，且知道哪裡有答案可以幫助你完成 GTM 的設定就可以，記得收藏這篇，當有一天需要用到時，希望這篇的內容可以幫助你解決問題。
（當然，可以多懂一點更好，最起碼可以看懂 Javascript 運作的邏輯。）
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）