vue中如何添加百度统计代码

一、在百度统计网站中添加自己的网站

1、官网地址：https://tongji.baidu.com/web/welcome/login。

2、在'管理‘一栏中选择‘网站列表'，然后选择新增网站，添加成功后点击代码获取，可以获取统计代码。

二、 在maim.js下百度统计代码添加

var _hmt = _hmt || [];
window._hmt = _hmt; // 必须把_hmt挂载到window下，否则找不到
 (function () {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?"+ 百度站点id;
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
 })();

三、创建vuerouter后，调用beforeEach方法，每个路由跳转时都将其跳转的路由推给百度。

router.beforeEach((to, from, next) => {
 if (_hmt) {
  if (to.path) {
   _hmt.push(['_trackPageview', '/#' + to.fullPath]);
  }
 }
 next();
});

一般等待个20分钟就可以在官网上看到自己的数据了。

也可将百度统计上的数据显示在自己的网站上，在管理一栏中，找到

以上就是vue中如何添加百度统计代码的详细内容，更多关于vue 添加百度统计代码的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 单页面vue引入百度统计的使用方法示例详解

    前言 最近组长安排着做一个项目,h5的应用下载项目,想着做起来还是比较容易,可是看到提出的需求,我就有点懵逼了!需要对应用的下载进行统计!!!我当时就想着我前端怎么对页面点击按钮就行数据统计啊!我以前的项目也有对应用的下载量就行数据统计的,可是那些项目都是后台人员编写进行数据统计的.我当时就有点不知所措了.想着怎么进行统计,怎么搞定这个!百度得知,百度统计可以帮着解决这个问题,可是没有用过啊!硬着头皮,进入自己的踩坑之旅! 方法如下 1.首先还是先在百度统计注册账号,并且新增网站,设置网站域名.

  • laravel + vue实现的数据统计绘图（今天、7天、30天数据）

    laravel + vue实现的数据统计绘图（今天、7天、30天数据）

    前言 本文主要是按照时段统计今天.7天.30天的数据,利用laravel+vue实现的,下面话不多说了,来一起看看详细的介绍吧 效果图: 1. 前端vue 使用vue-highcharts <highcharts :options="options"></highcharts> data() { return { options: { title: { text: '' }, xAxis: { categories: [] }, yAxis: { title:

  • vue单页应用加百度统计代码（亲测有效）

    申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到一个问题,Vue.js项目是单页应用,每次用户浏览网站时,访问内页时页面是不会刷新的,也就意味着不会触发百度统计代码:所以最终在百度统计后台看到的效果就是只统计到了网页入口的流量,却无法统计到内页的访问流量. 解决方法 在main.js文件中调用vue-router的afterEach方法,将统计代码加入

  • Vue自定义指令上报Google Analytics事件统计的方法

    发现问题 一般前端开发离不开数据统计,我们经常需要接入统计服务以方便运营,例如现在需要统计一个按钮 <template> <button @click="handleClick" /> </template> <script> export default { methods: { handleClick() { window.alert('button click') } } } </script> 引入 ga 后是这样上报

  • Vue中使用matomo进行访问流量统计的实现

    前言 之前做到了一个页面及接口访问流量统计的需求, 然后在网上找了很多帖子,发现有些有的但是写的都不是很详细,所以今天就整理了一下 正文 第一步 首先自然是引入matomo npm i vue-matomo 第二步 在main.js中注册一下matomo import VueMatomo from 'vue-matomo' Vue.use(VueMatomo, { host: 'http://matomo.na.xyz', // 这里配置你自己的piwik服务器地址和网站ID siteId: 3

  • vue中如何添加百度统计代码

    vue中如何添加百度统计代码

    一.在百度统计网站中添加自己的网站 1.官网地址:https://tongji.baidu.com/web/welcome/login. 2.在'管理'一栏中选择'网站列表',然后选择新增网站,添加成功后点击代码获取,可以获取统计代码. 二. 在maim.js下百度统计代码添加 var _hmt = _hmt || []; window._hmt = _hmt; // 必须把_hmt挂载到window下,否则找不到 (function () { var hm = document.createE

  • vue中使用heatmapjs的示例代码（结合百度地图）

    vue中使用heatmapjs的示例代码（结合百度地图）

    业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面.代码如下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .heatmap { width:1900px; height:1900px; } </style> <script src="js/h

  • 如何在vue中使用ts的示例代码

    如何在vue中使用ts的示例代码

    本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可

  • Vue中v-show添加表达式的问题(判断是否显示)

    一.需求场景 1.先来说说我的需求,有数据来源和标签类型两行选项,如下图所示: 2.根据需求,我需要在点击上面的某个数据来源的时候,下面的标签类型自动切换, 需求说明如下: 3.一开始 是想写死的,就是把各种情况写死在页面上,后来查看官方文档一会,数据来源的集合可以这样写,id为各个类型的标识,name为名称,mark为点击某个数据来源 的时候标签类型根据当前点击的数据来源进行判断切换.如下图: infoTypeList: [ { id: 11, name: '新闻', mark: 'news'

  • vue中使用GraphQL的实例代码

    上篇给大家介绍了Java 使用 Graphql 搭建查询服务详解.这里我们讲讲如何在Vue中使用GraphQL. 1. 初始化vue项目 npm install -g @vue/cli vue create vue-apollo-demo 选择默认cli的默认模板就可以了 添加 /src/graphql/article.js . /src/utils/graphql.js 两个文件. ├── node_modules └── public │ ├── favicon.ico │ └── inde

  • vue中动态添加class类名的方法

    vue 动态添加class类名,灵活得让你发狂,下面示例几个 <template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <!-- 对象的形式: 用花括号包裹起来,类名用引号, --> <!-- 优点: 以对象的形式可以写多个,用逗号分开 --> <p :class="{'p1'

  • 在vue中使用vue-echarts-v3的实例代码

    特征 •轻量,高效,按需绑定事件 •支持按需导入ECharts.js图表​​和组件 •支持组件调整大小事件自动更新视图 一.安装 npm install --save echarts vue-echarts-v3 二.用法 用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件 1.webpack 1.x 修改成如下 { test: /\.js$/, loader: 'babel', include: [ path.join(prjRoot,

  • vue中v-text / v-html使用实例代码详解

    废话少说,代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例中的数据,事件和方法</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><

  • vue中倒计时组件的实例代码

    子组件: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <script> export default { data(){ return { content: ''

随机推荐