下拉菜單是我們在網頁中最常用到的控件之一。許多時候我們不單想要了解用戶提交表單時選擇了什麼，我們還可能想知道那些未提交的表單中用戶都選擇了什麼。上週GTM專家Simo Ahava分享了使用GTM來跟踪下拉菜單的方法，HubSpot One將在本篇進行二次分享。
新建一個Custom HTML Tag
我們在Google Tag Manager中，新建一個Tag。類型選Custom HTML Tag，然後把下面的代碼貼進去。
<script>
(function() {
// 下面可以填入相對應的CSS選擇器
var selectMenu = document.querySelector(‘select#xuanxiang_id’);
//也可以用’select.xuanxiang_class’ 或者getElementsByName(“xuanxiang_name”)[0]
var callback = function(e) {
var selectedOption = e.target.options[e.target.selectedIndex];
window.dataLayer.push({
event: ‘selectionMade’,
selectedElement: selectedOption
});
};
selectMenu.addEventListener(‘change’, callback, true);
})();
</script>
這裡請注意你需要找到你的下拉菜單的id。通過查看HTML代碼，你可以確定其id。比如有下面這樣的下拉菜單：
<select id=”xuanxiang_id” class=”xuanxiang_class” name=”xuanxiang_name”>
<option selected=”selected” value=”1″>初代奧特曼</option>
<option value=”2″>傑克奧特曼</option>
<option value=”3″>賽文奧特曼</option>
<option value=”4″>艾斯奧特曼</option>
<option value=”5″>泰羅奧特曼</option>
<option value=”6″>佐菲奧特曼</option>
</select>
在HTML中就顯示為這樣：
這個下拉菜單的id就是xuanxiang_id。那麼select#xuanxiang_id又是什麼呢？我們在CSS選擇器一文中曾經介紹過，這是一個CSS選擇器，它可以快速定位HTML中的DOM元素。
接下來我們要給它添加一個觸發器，在這個例子中我們只要它在本文觸發。因此這個觸發器看上去這樣：
保存後我們的第一步就完成了，當頁面https://hubspot.one/gtm-drop-down-menu-tracking/載入時，這個Tag就會在DOM準備就緒時加載。
我們來講解一下代碼，這段代碼的作用是為下拉菜單的監聽器附上一段函數，該函數將當前所選擇的下拉菜單的選項推送到數據層datalayer。當下拉菜單的選擇內容改變（change）時，該函數就會被調用。
將數據推送給Google Analytics
既然數據已經到datalayer了，各位老司機一定都輕車熟路了。我們新建一個GA Event標籤。最新版的界面長這樣：
這裡我們用了三個參數。第一個是選項裡的文本InnerText，第二個是選項的value。我們可以按照下面兩圖進行新建。
第三個GA Config僅僅存儲了GA的Property ID，你可以進一步設置。這是GTM新版本搞出來的新花樣，不過挺省力的，今後你可以不必為每個GA屬性設置半天，直接調用這個Config就可以了。
我們需要一個Trigger來觸發這個標籤，這裡就要用到我們先前在代碼中推到數據層的event。下圖顯示了具體的做法：
小結
納尼？你過了GAIQ了？恭喜你，你終於入門了。 GTM為GA帶來了無限可能性和便捷性，今天我們介紹的例子就是其中之一。如果你想要查看效果，不妨用調試工具選擇本文章上面這個下拉菜單（當然在微信推文中不可以哦）。舉一反三，單選框和多選框會做嗎？