vue中引入百度统计
vue作为单页面的,引入百度统计,需要注意不少。
一、基本的流量统计
在index.html 入口文件中引入百度统计生成的一连串代码:
var _hmt = _hmt || [];
(function() {
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?f62fe3c5d9343dece386407e99be4e39';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
这个会统计页面总的流量。
二、页面中监听事件
需要在相应的vue 文件中加入相应的代码
methods: {
getDownIosUrl() {
window._hmt.push(['_trackEvent', 'IosDoctor', 'click', '来康医生IOS版', 'opt_value']);
window.location.href = 'itms-apps://itunes.apple.com/cn/app/id1233649213?mt=8';
},
}
PS:必须要写window._hmt.push 否则会监听不到
三、单个页面流量的检测
在路由的配置文件中,加入这行代码。
// 测试百度统计
routeInstance.beforeEach((to, from, next) => {
if (to.path) {
window._hmt.push(['_trackPageview', '/pro/#' + to.fullPath]);
}
next();
})
'/pro/#' 写相对路径,解决vue 路由 hash 模式下,百度统计无法统计单页面的问题。 四、广告途径的追踪 可以根据转化率来确定下载次数。在转化设置中,设置事件转化中的trackevent。 然后通过“报告中的入口页面中的转化分析”查看数据。
vue中引入百度统计的更多相关文章
- VUE 中引入百度地图(vue-Baidu-Map)
1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...
- vue中引入百度地图
xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...
- vue项目中使用百度统计
统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
- vue中引入json数据,不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- vue中实现百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- vue中引入mui报Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them的错误
在vue中引入mui的js文件的时候,报如下的错误: 那是因为我们在用webpack打包项目时默认的是严格模式,我们把严格模式去掉就ok了 第一步:npm install babel-plugin-t ...
随机推荐
- 《Python基础教程读书笔记》
第1章 快速构造:基础知识 1.2交互式构造器 不强制分号,一行就是一行.可以加上分号 1.4数字和表达式 加.减.乘.除.整除.求余.指数.取反(-例如-2**2,**的优先级比-大) from _ ...
- JAVA通过使用sort方法排序
java 代码: 对集合排序: //升序public void listSort1(){ List<Integer> list = new ArrayList<Integer> ...
- OSI-ISO 七层协议通信模型
- Resolving 'Root Partition Is Filling Up' Issue on Sophos UTM Firewall
from: https://wandersick.blogspot.com/2016/06/resolving-root-partition-is-filling-up.html This is a ...
- Item 51:写new和delete时请遵循惯例
Item 51: Adhere to convention when writing new and delete. Item 50介绍了怎样自己定义new和delete但没有解释你必须遵循的惯例. ...
- 【搞机】9.7英寸iPad Pro 上手开箱(图文)
前言 话说,去年就一直想买个iPad ,可是苦于iPad air 2 出的太早,立即就要更新了,就没有买. 今年出了9.7英寸的iPad Pro .看到添加了这么多新特性.就按耐不住心情预订了~ 还刻 ...
- Kick the ball!(dfs)湖南省赛第十届
Problem K: Kick the ball! Time Limit: 1 Sec Memory Limit: 128 MB Special Judge Submit: 109 Solved ...
- Spring MVC访问静态资源
http://www.cnblogs.com/yank/p/4477204.html SpringMVC访问静态资源 在SpringMVC中常用的就是Controller与View.但是我们常常会需要 ...
- How to reset your password in Ubuntu
There are many reasons you might want to reset a password: Someone gave you a computer with Ubuntu i ...
- TIP2
mktemp :建立暂存/临时文件 more to see 'man mktemp' 语 法 mktemp[选择参数] 功 能 mktemp 命令:用于建立暂存文件,提供给shell脚本安全的使用临时 ...