如何利用GTM记录下拉菜单选项

利用GTM记录下拉菜单选项

利用GTM记录下拉菜单选项

下拉菜单是我们在网页中最常用到的控件之一。许多时候我们不单想要了解用户提交表单时选择了什么,我们还可能想知道那些未提交的表单中用户都选择了什么。上周GTM专家Simo Ahava分享了使用GTM来跟踪下拉菜单的方法,极诣将在本篇进行二次分享。

新建一个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元素。

接下来我们要给它添加一个触发器,在这个例子中我们只要它在本文触发。因此这个触发器看上去这样:

指定页面DOM Ready后触发

指定页面DOM Ready后触发

保存后我们的第一步就完成了,当页面http://maxket.com/gtm-drop-down-menu-tracking/载入时,这个Tag就会在DOM准备就绪时加载。

我们来讲解一下代码,这段代码的作用是为下拉菜单的监听器附上一段函数,该函数将当前所选择的下拉菜单的选项推送到数据层datalayer。当下拉菜单的选择内容改变(change)时,该函数就会被调用。

将数据推送给Google Analytics

既然数据已经到datalayer了,各位老司机一定都轻车熟路了。我们新建一个GA Event标签。最新版的界面长这样:

新建GA Event标签将数据推送给GA

新建GA Event标签将数据推送给GA

这里我们用了三个参数。第一个是选项里的文本InnerText,第二个是选项的value。我们可以按照下面两图进行新建。

InnerText就是用户看到的文字

InnerText就是用户看到的文字

选项的value就是HTML中赋予该选项的值

选项的value就是HTML中赋予该选项的值

第三个GA Config仅仅存储了GA的Property ID,你可以进一步设置。这是GTM新版本搞出来的新花样,不过挺省力的,今后你可以不必为每个GA属性设置半天,直接调用这个Config就可以了。

我们需要一个Trigger来触发这个标签,这里就要用到我们先前在代码中推到数据层的event。下图显示了具体的做法:

Event呈现宜选择后触发GA Event标签

Event呈现宜选择后触发GA Event标签

小结

纳尼?你过了GAIQ了?恭喜你,你终于入门了。GTM为GA带来了无限可能性和便捷性,今天我们介绍的例子就是其中之一。如果你想要查看效果,不妨用调试工具选择本文章上面这个下拉菜单(当然在微信推文中不可以哦)。举一反三,单选框和多选框会做吗?