如何利用GTM记录下拉菜单选项.docx
- 文档编号:24698249
- 上传时间:2023-05-31
- 格式:DOCX
- 页数:6
- 大小:69.64KB
如何利用GTM记录下拉菜单选项.docx
《如何利用GTM记录下拉菜单选项.docx》由会员分享,可在线阅读,更多相关《如何利用GTM记录下拉菜单选项.docx(6页珍藏版)》请在冰豆网上搜索。
如何利用GTM记录下拉菜单选项
如何利用GTM记录下拉菜单选项
利用GTM记录下拉菜单选项
下拉菜单是我们在网页中最常用到的控件之一。
许多时候我们不单想要了解用户提交表单时选择了什么,我们还可能想知道那些未提交的表单中用户都选择了什么。
上周GTM专家SimoAhava分享了使用GTM来跟踪下拉菜单的方法,极诣将在本篇进行二次分享。
新建一个CustomHTMLTag
我们在GoogleTagManager中,新建一个Tag。
类型选CustomHTMLTag,然后把下面的代码贴进去。
新建标签,贴代码
(function(){
//下面可以填入相对应的CSS选择器
varselectMenu=document.querySelector(‘select#xuanxiang_id’);
//也可以用’select.xuanxiang_class’或者getElementsByName(“xuanxiang_name”)[0]
varcallback=function(e){
varselectedOption=e.target.options[e.target.selectedIndex];
window.dataLayer.push({
event:
‘selectionMade’,
selectedElement:
selectedOption
});
};
selectMenu.addEventListener(‘change’,callback,true);
})();
这里请注意你需要找到你的下拉菜单的id。
通过查看HTML代码,你可以确定其id。
比如有下面这样的下拉菜单:
在HTML中就显示为这样:
这个下拉菜单的id就是xuanxiang_id。
那么select#xuanxiang_id又是什么呢?
我们在CSS选择器一文中曾经介绍过,这是一个CSS选择器,它可以快速定位HTML中的DOM元素。
接下来我们要给它添加一个触发器,在这个例子中我们只要它在本文触发。
因此这个触发器看上去这样:
指定页面DOMReady后触发
保存后我们的第一步就完成了,当页面
我们来讲解一下代码,这段代码的作用是为下拉菜单的监听器附上一段函数,该函数将当前所选择的下拉菜单的选项推送到数据层datalayer。
当下拉菜单的选择内容改变(change)时,该函数就会被调用。
将数据推送给GoogleAnalytics
既然数据已经到datalayer了,各位老司机一定都轻车熟路了。
我们新建一个GAEvent标签。
最新版的界面长这样:
新建GAEvent标签将数据推送给GA
这里我们用了三个参数。
第一个是选项里的文本InnerText,第二个是选项的value。
我们可以按照下面两图进行新建。
InnerText就是用户看到的文字
选项的value就是HTML中赋予该选项的值
第三个GAConfig仅仅存储了GA的PropertyID,你可以进一步设置。
这是GTM新版本搞出来的新花样,不过挺省力的,今后你可以不必为每个GA属性设置半天,直接调用这个Config就可以了。
我们需要一个Trigger来触发这个标签,这里就要用到我们先前在代码中推到数据层的event。
下图显示了具体的做法:
Event呈现宜选择后触发GAEvent标签
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 利用 GTM 记录 下拉 菜单 选项
![提示](https://static.bdocx.com/images/bang_tan.gif)