最近在和产品经理反复拉扯一个历史遗留问题是否还需要保留的过程中,突然发现一个不可思议的事情。一套使用多年的平台竟然还没有做埋点处理。导致所有的功能实施上线之后,对于用户的事件分析、PV、UV等一些数据基本都是无源的状态,更别说以后还要分析用户画像了。基于目前状态battle已经没用了,赶紧做一套埋点统计的功能是重中之重了,起码以后让产品经理别再埋头苦干(xjbg)了。由于出一套埋点不仅需要后端出接口,还需要出一套页面方便以后查询,感觉这样工期会拉长,故综合考虑利用百度统计进行埋点统计。
本段是在预研过程中了解到的目前市面上的几种埋点方式还有埋点的意义。不敢兴趣可直接跳过此段 此处快进⏩
埋点意义
- 了解用户行为,有助于完善用户体验
- 有利于产品对新功能有整体预期,方便作出决策
- 对已发布产品有容错能力,便于之后修改完善
埋点类型
以下开始正式介绍网站如何接入百度统计进行事件埋点
一、申请账号
本步骤较为简单可以自行进行注册 🔗链接直达🔗
二、添加站点
- 点击使用设置->网站列表->新增网站
- 填写相应的网站信息
三、安装代码
- 代码管理->代码获取
- 以vue项目为例,找到项目目录下的index.html文件,添加复制好的代码
四、代码安装检查
代码检查有多种方式,每种方式检查结果会差异。最终只要有一种方式成功即可
- 代码管理->代码安装检查
- 网站首页
- 其他网页:输入网站其他地址进行检测
- 手动检测:在浏览器中按F12打开调试模式,选择Network选项,如果找到hm.js?XXXXXX即可
正常情况下会在window下挂载_hmt对象 需要添加埋点的地方(可以是按钮、标签、链接、下载等),调用事件跟踪代码即可
参数说明:
举例:
效果:
概括-> 事件分析中就可以查看事件数据。注意:显示数据不会立刻显示需要等待20-30分钟左右
下面是我简单做了一个自定义指令可以直接用到元素上,旨在想要做的把埋点逻辑和业务代码隔离。可以在指令中直接调取上报接口等操作。指令只做了简单封装能有而已,如遇到bug还请见谅(大家自己看着改吧)
注意:前提是百度统计已经安装成功前提下
- 在项目下创建directives目录存放trackEvent.js文件
- 在main.js中注册全局指令
- 在目标元素上使用
重点来了,我突然发现一个很方便的类库,基于友盟统计埋点改造的百度埋点,封装好了官方的api和指令。真的是很方便。推荐使用!!
具体使用点这里
1. 下载
2. 引用
3. 安装
4. 使用
track-event
track-pageview
整体下来个人感觉接入百度统计不是很复杂,对于不打算做一套埋点系统的应用使用它还是非常快捷方便的。而且利用百度统计也能展示非常全面的统计数据。不知道大家怎么认为呢?
以上就是本篇文章【vue结合百度统计实现事件埋点】的全部内容了,欢迎阅览 ! 文章地址:http://houdi.cs-ej.cn/quote/607.html 行业 资讯 企业新闻 行情 企业黄页 同类资讯 网站地图 返回首页 成事e家移动站 http://houdi.cs-ej.cn/mobile/ , 查看更多