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中引入百度统计的更多相关文章

  1. VUE 中引入百度地图(vue-Baidu-Map)

    1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...

  2. vue中引入百度地图

    xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...

  3. vue项目中使用百度统计

    统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...

  4. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  5. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  6. vue中引入babel步骤

    vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...

  7. vue中引入json数据,不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  8. vue中实现百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  9. 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 ...

随机推荐

  1. 《Python基础教程读书笔记》

    第1章 快速构造:基础知识 1.2交互式构造器 不强制分号,一行就是一行.可以加上分号 1.4数字和表达式 加.减.乘.除.整除.求余.指数.取反(-例如-2**2,**的优先级比-大) from _ ...

  2. JAVA通过使用sort方法排序

    java 代码: 对集合排序: //升序public void listSort1(){ List<Integer> list = new ArrayList<Integer> ...

  3. OSI-ISO 七层协议通信模型

  4. 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 ...

  5. Item 51:写new和delete时请遵循惯例

    Item 51: Adhere to convention when writing new and delete. Item 50介绍了怎样自己定义new和delete但没有解释你必须遵循的惯例. ...

  6. 【搞机】9.7英寸iPad Pro 上手开箱(图文)

    前言 话说,去年就一直想买个iPad ,可是苦于iPad air 2 出的太早,立即就要更新了,就没有买. 今年出了9.7英寸的iPad Pro .看到添加了这么多新特性.就按耐不住心情预订了~ 还刻 ...

  7. Kick the ball!(dfs)湖南省赛第十届

    Problem K: Kick the ball! Time Limit: 1 Sec  Memory Limit: 128 MB  Special Judge Submit: 109  Solved ...

  8. Spring MVC访问静态资源

    http://www.cnblogs.com/yank/p/4477204.html SpringMVC访问静态资源 在SpringMVC中常用的就是Controller与View.但是我们常常会需要 ...

  9. 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 ...

  10. TIP2

    mktemp :建立暂存/临时文件 more to see 'man mktemp' 语 法 mktemp[选择参数] 功 能 mktemp 命令:用于建立暂存文件,提供给shell脚本安全的使用临时 ...