vue加百度统计代码(亲测有效)
申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码;所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量。
解决方法
在main.js文件中调用vue-router的afterEach方法,将统计代码加入到这个方法里面,这样每次router发生改变的时候都会执行一下统计代码,这样就达到了目的,代码如下:
router.afterEach( ( to, from, next ) => {
setTimeout(()=>{
var _hmt = _hmt || [];
(function() {
//每次执行前,先移除上次插入的代码
document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?xxxx";
hm.id = "baidu_tj"
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
},0);
} );
转载自:https://blog.jae.sh/article/v924mq.html
vue加百度统计代码(亲测有效)的更多相关文章
- vue单页应用中根据不同城市不同业务添加百度统计代码
问题描述: 我们知道一般的百度统计代码是添加在html的head里的:但是,因为目前项目是用vue开发的单页应用,所以在路由跳转之间不会刷新页面, 统计代码如果放在项目里的index.heml的hea ...
- 如何给WordPress安装百度统计代码
1.注册并登录百度统计,点击页面顶部的“网站中心”,然后点击右上角“+ 新增网站”,填写网站域名确定后,点击“复制代码”:2.登录 WordPress 后台,点击左侧导航栏“外观”里的“编辑”,然后点 ...
- Wordpress网站中添加百度统计代码
百度统计是流量分析平台,帮助收集网站访问数据,提供流量趋势.来源分析.转化跟踪.页面热力图.访问流等多种统计分析服务,同时与百度搜索.百度推广.云服务无缝结合,为网站的精细化运营决策提供数据支持,进而 ...
- PHP小程序后端支付代码亲测可用
小程序后端支付代码亲测可用 <?php namespace Home\Controller; use Think\Controller; class WechatpayController ex ...
- uniapp增加百度统计代码(h5)
做了个微信公众号文章互相阅读的h5界面,http://mptask.wintp.top/(只能微信浏览器打开),其中用到了统计代码,记录如下. 1.新建 tj.html 界面 可放置在项目的根目录,文 ...
- 单页面vue引入百度统计的使用方法!
最近组长安排着做一个项目,h5的应用下载项目,想着做起来还是比较容易,可是看到提出的需求,我就有点懵逼了!需要对应用的下载进行统计!!!我当时就想着我前端怎么对页面点击按钮就行数据统计啊!我以前的项目 ...
- nuxt.js 加百度统计
Mark一下: 在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件.统计统计分析我们可以获取网站pv,uv ...
- c++ builder TListView控件按字符串排序(根据网上代码亲测ok)
//--------------------------------------------------------------------------- /* 首先将一个列表框控件安放在Form上, ...
- STM32—中断详解(配合按键中断代码,代码亲测)
在STM32中执行中断主要分三部分: 1.配置NVIC_Config()函数 2.配置EXTI_Config()函数 3.编写中断服务函数 (注:本文章所用代码为中断按键代码,实现了按键进入中断从而控 ...
随机推荐
- 【转】ExtJS获取父子、兄弟容器元素方法
原文地址:http://www.cnblogs.com/linxiong945/p/3961732.html 1.当前对象的父对象(上级对象) this.ownerCt: 2.当前对象的下一个相邻的对 ...
- 几种经典的Hash算法的实现(源代码)
来源声明: http://blog.minidx.com/2008/01/27/446.html 先保存下来,以备后面研究,现在还看不懂! 哈希算法将任意长度的二进制值映射为固定长度的较小二进制值,这 ...
- [Timer]应用层实现sleep
转自:https://www.cnblogs.com/longbiao831/p/4556246.html Select只能做延时,可以做回调吗? 本文讲述如何使用select实现超级时钟.使用sel ...
- ios开发,app调用资源文件到C++的方法
为了读取资源文件到cpp.供opencv处理,采取的方式是把之前的cpp文件的后缀改成:.mm 然后会出现各种报错,原因是因为命名冲突,前面加上cv::就行. const char* imagePat ...
- Java8中list转map
第一种: 取list中某2个字段作为Map的K,V public Map<Long, String> getIdNameMap(List<Account> accounts) ...
- android开发(41) Fragment中使用POP_BACK_STACK_INCLUSIVE达到一次跳转到栈底。类似Activity的 采用FLAG_ACTIVITY_CLEAR_TOP
需求场景: 在开发中遇到下面这样场景: 1.创建 Fragment A 显示. 这时栈的结构是: .Fragment A 2.创建 Fragment B 并 显示. 从下到上看,这时栈的结构是: ...
- c# 16进制转int
//十进制转二进制Convert.ToString(69, 2); //69为被转值//十进制转八进制Convert.ToString(69, 8); //69为被转值//十进制转十六进制Conver ...
- mongoDB 删除集合后,空间不释放
mongoDB 删除集合后,空间不释放,添加新集合,没有重新利用之前删除集合所空出来的空间,也就是数据库大小只增不减. 方法有: 1.导出导入 dump & restore 2.修复数据库 r ...
- Dapper:安装Dapper时报错
今天在使用VS 2013安装Dapper的时候报错,具体报错信息如下: 经过网上查找错误原因,发现是安装的Dapper版本过高,.Net Framework版本不支持该版本的Dapper. 解决方案: ...
- 史上最全 Css Hack汇总
前言 每次要找个东西都得慢慢去翻自己收集的一些东西,每次都是那么花时间,再加上有时存放时间久远就忘了当时是存在哪了,为了方便查询及阅读,决定把一些Css Hack 收集起来... 1.区别不同浏览器, ...