如何用 GTM 抓取表單中選項的「值」？（例：下拉選單、勾選框）

我們在過去的文章中，曾經提到了許多追蹤「表單提交」事件的方法，不管是透過 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 」變數的欄位當中，也可以到 Github 進行複製（建議）。

（注意，紅色粗體是要更換的部分，記得替換成符合你表單欄位 HTML 結構的屬性名稱，如果你是直接跳到這段的朋友，可以看這邊了解如何查找表單欄位的 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
}

一樣，可以將這段代碼貼進網頁開發者工具中先行測試，同樣也可以到 Github 上複製（建議），確定沒問題之後，再到 GTM 當中進行「自訂 Javascript」變數的設定。

ㅤ

抓取「複選」表單的「值」

上述的方式，可以協助我們抓取單選表單的「值」，但如果今天的表單欄位可以複選呢(如下圖)？我們可以怎麼抓取？

ㅤ

抓取的方法跟前述都差不多，這次比較不同的是，我們必須在 Javasciprt 代碼中創建一個「陣列（Array）」來把抓取到的「值」儲存進去。

可以直接複製以下代碼，或是到 Github 中複製也可以，一樣，將紅字的部分，替換成你的表單屬性值

function getCheckedValues() {
    // 選擇表單內所有名稱為 "wpforms[fields][14][]" 的複選框（根據實際表單名稱修改）
    var checkboxes = document.querySelectorAll('[name="wpforms[fields][14][]"]:checked');
    
    // 創建一個陣列來存儲選中的值
    var checkedValues = [];

    // 將每個被選中的「值」添加到陣列中
    checkboxes.forEach(function(checkbox) {
      checkedValues.push(checkbox.value);
    });

    // 以陣列形式返回選中的值
    return checkedValues;
}

ㅤ

如此一來，用這組 JS 代碼，我們就可以抓到複選表單的「值」，並如同前面幾段的操作一樣，將其傳送到 GA4 當中。

如果將該「 Javascript 變數 」隨著「表單提交」事件一起發送到 GA4 中，預期應該要能在 Debug View 中看到以下畫面，所有複選的「值」都有一起被傳送進來。

（事件參數名稱是我們隨便取的，建議還是要依據你們表單的規劃，設置規格化的事件參數名稱，讓所有表單提交事件可以共用，最後也別忘了，要去 GA4 後台自訂維度，否則是無法在報表中使用的喔！）

ㅤ

我可以用「自動事件變數」嗎？

如果有閱讀過這篇「GTM 變數介紹：自動事件變數(Auto Event Variable)，該如何應用？」文章的朋友，在面對這種抓取表單欄位「值」的任務時，腦海中可能會先想到使用「自動事件變數」。

可惜，這是行不通的，因為「自動事件變數」抓取的是所有點擊行為時，其點擊位置元素的屬性值，以前述範例中我們要抓取的 value 屬性來看，如果一個頁面裡，有很多元素都有 value 屬性，那麼便無法準確抓到指定的欄位「值」。

就算使用者一進到表單頁面後，什麼都不點，直接點擊該表單選項，此時「自動事件變數」確實會抓到正確的 value 屬性「值」，但如果在提交表單之前，不小心點到了畫面中任一空白處或是其它元素，此時該「自動事件變數」就會被覆蓋掉，變成 undefined 、空白或是該點擊元素的 value 屬性「值」。

好，我們知道，上面說的雖然都是中文，但你看完之後可能還是會一頭霧水，沒關係，只要記得面對這樣的情況，「自動事件變數」是行不通的就可以了。

總結一下

在這篇文章中，我們解釋了如何應用 GTM 中的「 自訂 Javascript 」變數以及「 CSS 選取器 」來抓取表單選項的「值」，身為行銷人員的你不用刻意背下這些代碼沒有關係，只要知道有這樣的工具可以協助我們獲取需要的資訊，且知道哪裡有答案可以幫助你完成 GTM 的設定就可以，記得收藏這篇，當有一天需要用到時，希望這篇的內容可以幫助你解決問題。

（當然，可以多懂一點更好，最起碼可以看懂 Javascript 運作的邏輯。）

延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）

同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）