【Vue】16.vue项目里引入百度统计

参考官网：百度统计开放平台百度统计

最近往项目里面引入百度统计，也是在网上查了各种资料，把百度统计的官网api又好好的看了一下，顺着文档的步骤，一步一步走下来，其实还蛮简单的，首先先在百度统计注册一个账号，在管理页面填写好自己要监控的网站域名，网站的首页，填写完成以后，会自动生成一段代码，如下图所示，我这里已经填写过了，点击获取代码，就可以取到百度自动生成的代码。

但是在vue单页面开发中接入百度统计代码时，不能把这一段代码按照官网说的放到index.html的head标签里，因为vue是单页面路由切换的，这样的话就只能统计到一次，其他页面的切换就会统计不到，所以就把这一段代码加到入口文件main.js里面，把_hmt变量挂载到window下，这样_hmt就成了全局变量，就可以在任何地方访问了，要不然就会报_hmt变量找不到的错。

1.在main.js下百度统计代码添加

// eslint-disable-next-line
const _hmt = _hmt || [];
// eslint-disable-next-line
window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到
(function () {const hm = document.createElement('script');hm.src = 'https://hm.baidu.com/hm.js?6f2212ee8e3fd2f83702bd023606f48e';const s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(hm, s);
}());

这里要注意一下，如果安装的有ESLint代码校验的话，_hmt变量上面要加 // eslint-disable-next-line 让ESLint不检测这一行代码，因为现在的变量命名是不建议有_的，所以ESLint认为是不符合语法的，就一直报错，因为这个变量是百度的，里面的api都是通过这个变量调用的，我们不能更改，所以只能不让ESLint校验这个变量。

2.创建vueRouter后，调用beforeEach方法，每个路由跳转时都将其跳转的路由推给百度

router.beforeEach((to, from, next) => {// eslint-disable-next-lineif (_hmt) {if (to.path) {// eslint-disable-next-line_hmt.push(['_trackPageview', to.fullPath]);}}next();
});

这里因为我的路由mode是history，所以 _hmt.push(['_trackPageview', to.fullPath])，但是如果是hash的话，后面的路径要修改一下，改成

_hmt.push(['_trackPageview', '/#' + to.fullPath]);

这是监控页面的pv统计，如果想监控哪一个按钮点击的次数，就可以直接在按钮事件下调用百度api的事件方法，比如我的这个复制小程序昵称的方法，就可以统计到这个按钮点击的次数，也就是小程序昵称被复制的次数

      copyToBoard() {// eslint-disable-next-line_hmt.push(['_trackEvent', 'copy', 'copy', '复制小程序昵称', 10]);this.$copyText(this.message).then((e) => {console.log(this.message);console.log(e);this.$createToast({txt: '小程序昵称已复制',type: 'txt',time: 3000,}).show();}, (e) => {console.log(e);});},

运行代码大概20分钟以后，如果有人访问网站的话，百度统计里面就能看到统计结果了

【Vue】16.vue项目里引入百度统计相关推荐

在前端项目里引入字体
前言最近做可视化看板产品经理觉得默认字体丑,那么只能在项目里引入一下字体了. 注: vue项目项目里使用的是scss,对于css和less 没有进行测试实现分享一个下载ppt.字体的网址:第一 ...
如何在TypeScript/JavaScript项目里引入MD5校验和
摘要:MD5校验和则是其中一种数学算法,通常是使用工具对文件计算得出的一组32 个字符的十六进制字母和数字. 本文分享自华为云社区<TypeScript/JavaScript项目里如何做MD5校 ...
vue项目中加入百度统计
最近,在做本博客的改版,前台使用Vue,后台使用thinkphp6,做到前后分离.做百度统计的时候,遇到一系列问题,通过全方位查找资料,终于解决问题,本文主要记录一下解决Vue项目中,加入百度统计的具 ...
uniapp 项目中添加百度统计
需求描述在uniapp开发的H5项目中,需要通过百度统计代码将用户的操作信息进行记录统计. 1.新建 count.html 文件将文件放置在项目根目录下,文件名称自己随意. 2.百度统计代码 ...
angular2+onsenui--怎么在angular2项目里引入onsenui框架
在angular2项目里安装onsenui框架,这里使用npm命令. 一.在目录下,shift+鼠标右键–在此处打开命令窗口键入命令:npm install onsenui ngx-onsenui ...
react项目中引入百度地图
项目目录如下: 在此index.html中加入如下代码即可: <!DOCTYPE html> <html lang="en"><head>< ...
Vue项目里引入Muse-UI
一.在电脑中装好了node和vue的环境二.下载纯净的Vue项目 1.在指定文件夹中输入指令:vue init webpack (自定义的项目名称): 2.然后根据提示,一路回车. 注意:Use E ...
Vue项目实战引入百度地图（一）
一.在 http://lbsyun.baidu.com/ 申请秘钥二.在index.html文件中引入 <script type="text/javascript" sr ...
vue cli3.x 项目中引入 vux（一）：手动配置
最近做的一个项目,是使用vux组件库开发的,使用的时候发现vux在使用的时候需要做一些相应的配置,记录如下: 建议 node.js 版本在 7.6.0 以上. 1.引入vux # npm instal ...

【Vue】16.vue项目里引入百度统计

【Vue】16.vue项目里引入百度统计相关推荐

最新文章

热门文章