如何利用GTM记录下拉菜单选项
利用GTM记录下拉菜单选项
下拉菜单是我们在网页中最常用到的控件之一。许多时候我们不单想要了解用户提交表单时选择了什么,我们还可能想知道那些未提交的表单中用户都选择了什么。上周GTM专家Simo Ahava分享了使用GTM来跟踪下拉菜单的方法,极诣将在本篇进行二次分享。
新建一个Custom HTML Tag
我们在Google Tag Manager中,新建一个Tag。类型选Custom HTML Tag,然后把下面的代码贴进去。
新建标签,贴代码
<script>
(function() {
(function() {
// 下面可以填入相对应的CSS选择器
var selectMenu = document.querySelector(‘select#xuanxiang_id’);
//也可以用’select.xuanxiang_class’ 或者 getElementsByName(“xuanxiang_name”)[0]
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
});
};
var selectedOption = e.target.options[e.target.selectedIndex];
window.dataLayer.push({
event: ‘selectionMade’,
selectedElement: selectedOption
});
};
selectMenu.addEventListener(‘change’, callback, true);
})();
</script>
})();
</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″>html下拉菜单的制作方法艾斯奥特曼</option>
<option value=”5″>泰罗奥特曼</option>
<option value=”6″>佐菲奥特曼</option>
</select>
<option selected=”selected” value=”1″>初代奥特曼</option>
<option value=”2″>杰克奥特曼</option>
<option value=”3″>赛文奥特曼</option>
<option value=”4″>html下拉菜单的制作方法艾斯奥特曼</option>
<option value=”5″>泰罗奥特曼</option>
<option value=”6″>佐菲奥特曼</option>
</select>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论