前言
百度统计Tongji API可以为网站接入者提供便捷的获取网站流量数据的通道, 从而使网站接入者可向网站帐号提供数据分析、运营监控、网站推广等服务。
因公司业务需求,本人花了半天时间研究了下百度统计分析,并且在公司的项目中成功集成使用,以下来说说本人的心路历程
上手前准备: 百度统计账号,这个自己自行注册,注册完成后登录进去
百度统计使用
依次打开 网站统计 > 管理 > 网站列表
新增网站 按照提示规则输入正确的域名, 点击确定保存
保存成功后你就会看到*网站下有刚刚新增的一条信息, 点击获取代码
获取代码后复制对应的代码即可
<script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); // 注意: xxxxxxxxxxxxx 就是你自己网站的key hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxx"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script>不管是 vue react 或者是html 页面,都有自己对应的入口文件,按照 代码安装说明添加这段代码即可
代码安装说明 安装实例 建站工具中的安装方法
1. 请将代码添加到网站全部页面的</head>标签前。
2. 建议在header.htm类似的页头模板页面中安装，以达到一处安装，全站皆有的效果。
3. 如需在JS文件中调用统计分析代码，请直接去掉以下代码首尾的，<script type="text/javascript">与</script>后，放入JS文件中即可。
如果代码安装正确，一般20分钟后，可以查看网站分析数据。
3. 代码检测
代码安装完成后，您可以在“代码安装检查”页面自动检测或手动检测代码安装情况。
到这一步基本集成完成了
由于公司开发使用 umi3开发的,找了好久没有找到入口文件,翻阅官方文档,发现umi3自己已经集成了百度统计插件,获取网站的key就可以直接使用,具体使用方法看umi3插件
@umijs/plugin-analytics
链接: https://umijs.org/zh-CN/plugins/plugin-analytics
事件埋点 trackEvent
本文重点讲下采用 trackEvent 对事件进行埋点
打开 管理 > 转化设置 > 事件转换 > TrackEvent > 添加事件转化事件转换有三种方式,这个自行去尝试,各有各的有点
在触发事件的地方进行埋点
window._hmt.push(['_trackEvent', category, action, opt_label, opt_value]);| 参数 | 说明 |
| category | 要监控的目标的类型名称，通常是同一组目标的名字，比如"视频"、"音乐"、"软件"、"游戏"等等。该项必填，不填、填"-"的事件会被抛弃。 |
| action | 用户跟目标交互的行为，如"播放"、"暂停"、"下载"等等。该项必填，不填、填"-"的事件会被抛弃。 |
| opt_label | 事件的一些额外信息，通常可以是歌曲的名称、软件的名称、链接的名称等等。该项选填，不填、填"-"代表此项为空。 |
| opt_value | 事件的一些数值信息，比如权重、时长、价格等等，在报表中可以看到其平均值等数据。该项可选。 |
根据参数数据进行埋点上报即可
最终展示效果: 以上只是对集成以及事件埋点的使用做简单的介绍
后续来说如果有需求，我想可以增加一下这些功能，比如：页面上下游（记录访客的点击路径，来研究顾客的访问习惯，从而优化网站）、页面点击图（展示页面上的点击热度）、事件分析（涉及button的点击等）、事件转化、时长转化、页数转化等。