vue脚手架项目接入百度统计PV UV_yanghouqing的博客-程序员宝宝

技术标签: 前端  vue.js  javascript  

vue脚手架接入百度统计实现PV UV展示实战 简单清晰

1.打开百度统计后台: http://tongji.baidu.com/sc-web

找到代码获取 > 点击复制代码

2.打开vue项目,找到项目下的index.html插入从百度统计后台复制的的脚本代码

3.找到自己项目中对应的路由router.js文件插入代码。注:我的文件位置可能和你文件位置不一样

router.beforeEach((to, from, next) => {
    // 百度统计
    // 创建vuerouter后,调用beforeEach方法,每个路由跳转时都将其跳转的路由推给百度
    if (_hmt) {
        if (to.path) {
            _hmt.push(['_trackPageview', '/' + to.fullPath]);
        }
    }
    next();
});

4.验证是否成功,启动你的项目后F12调式看到如下请求说明安装成功。

大功告成

注:第一次可能会提示代码安装未生效,多等一会就好了。

为了各位五湖四海的大侠们能够快速上手,部分代码已经放到github及gitee。包括触发事件相关代码

github:https://github.com/yanghouqing/baidutongji-vue

gitee:https://gitee.com/yanghouqing/baidutongji-vue

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yanghouqing/article/details/124613279

智能推荐

多个if与多个else if详解_lvmengmengzp的博客-程序员宝宝_多个if 和else if

下面两句代码,执行结果形式如下if ……if……if……else if ……else if …… else if……else……通过观看下面的代码与结果截图可以明白多个if与多个else if 及else执行的情况,简单说就是如果是多个else if的话,只要第一个if条件成立,即使满足else if的条件也不会执行else if及else的内容,如果是多个if的话,最后的else

EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位_weixin_30483495的博客-程序员宝宝

EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便之前我们说过如何用Onvif协议进行设备的发现,探测,以及云台控制等,今天我们来说一下如何使用Onvif进行预置位的操作流程获取设备能力Capabilities获取设备的能力,并且可以获取到Media和PTZ的...

SQL优化 第二章 获取执行计划_※宋健※的博客-程序员宝宝_mysql sql调优之执行计划 罗海雄

参考资料:本系列博客主要参考资料有CUUG冉乃纲老师数据库教学笔记,《SQL优化核心思想》(罗炳森,黄超,钟侥著),《PostgreSQL技术内幕:查询优化深度探索》(张树杰著),排名不分先后。执行计划就是SQL执行的步骤,因为我们写的SQL不一定就是按照我们写的执行,数据库优化器会根据统计信息(统计信息后面讲解)进行SQL改写(SQL改写后面讲解),生成执行计划,但是下面三种执行计划...

.net报“System.MissingMethodException: Method not found(找不到方法)”错误的解决方法_uncleAndyChen的博客-程序员宝宝

看文版本提示:System.MissingMethodException: 找不到方法:...英文版本提示:System.MissingMethodException: Method not found:...导致此异常的原因是引用程集版本冲突,通常可能是因为同一个项目(DLL)被多个项目(DLL)引用,导致新加的方法找不到,但是不会抛编译期异常,而是抛运行期异常。解决方法:修改引用的项目的AssemblyInfo.cs下的版本号,重新编译、发布。

开发者“造”起来!WAVE SUMMIT+2020深度学习开发者峰会定档12.20_百度智能云的博客-程序员宝宝

2020年末的一场“极客盛宴”即将在本周日开启!由深度学习技术及应用国家工程实验室与百度联合主办的 WAVE SUMMIT+ 2020深度学习开发者峰会将于12月20日在北京798艺术...

随便推点

仓库管理工具Git之git clone和git pull的区别_lofate的博客-程序员宝宝

1.需不需要本地文件夹是仓库git clone是将整个工程复制下来所以,不需要本地是仓库(没有.git文件夹)git clonegit pull需要先初始化本地文件夹文一个仓库git pull2.切换分支的问题切换分支3.push的问题...

BZOJ4539: [Hnoi2016]树 (倍增)_DZYO的博客-程序员宝宝_4539: [hnoi2016]树

传送门题解:一开始看错题了以为可以拷贝新加的点的,仔细一看是一道倍增裸题。 首先建一颗虚树,只存拷贝的根节点。 注意到询问两点最后肯定是到某个虚树的节点内部求lcalcalca。那么直接在虚树上倍增到同一个节点再在原树上倍增到lcalcalca即可。 时间复杂度O(nlogn)O(nlog⁡n)O(n \log n)。 注意还要求的是一个子树中第kkk大的节点是哪一个,这个直接用df...

7-2 装箱问题 (20分)_32进制的博客-程序员宝宝

7-2装箱问题(20分)假设有N项物品,大小分别为s​1​​、s​2​​、…、s​i​​、…、s​N​​,其中s​i​​为满足1≤s​i​​≤100的整数。要把这些物品装入到容量为100的一批箱子(序号1-N)中。装箱方法是:对每项物品, 顺序扫描箱子,把该物品放入足以能够容下它的第一个箱子中。请写一个程序模拟这种装箱过程,并输出每个物品所在的箱子序号,以及放置全部物品所需的箱子数目。输入格式:输入第一行给出物品个数N(≤1000);第二行给出N个正整数s​i​​(1≤s​i​​≤100,表..

Java Code Examples for net.fortuna.ical4j.model.PeriodList_wintersweetforever的博客-程序员宝宝

https://www.programcreek.com/java-api-examples/?api=net.fortuna.ical4j.model.PeriodList

使用verdaccio 搭建npm私有仓库_weixin_30776863的博客-程序员宝宝

使用verdaccio 搭建npm私有仓库1. 为什么要搭建私有的npm仓库? 随着公司的业务越来越复杂,项目迭代速度也越来越快,那么项目间的常用的业务代码共享变得非常之有必要。但是对于公司的业务代码是不能对外开放的,因此我们有必要搭建一个类似于 http://npmjs.org这个的一个私有平台来管理公司业务相关的组件及代码。 更简单的描述就是我们需要在公司内部搭建一个npm仓库...