前言

百度统计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]);

根据参数数据进行埋点上报即可

最终展示效果: 以上只是对集成以及事件埋点的使用做简单的介绍

后续来说如果有需求，我想可以增加一下这些功能，比如：页面上下游（记录访客的点击路径，来研究顾客的访问习惯，从而优化网站）、页面点击图（展示页面上的点击热度）、事件分析（涉及button的点击等）、事件转化、时长转化、页数转化等。