vuepress-reo主题 | 配置百度统计
个人博客地址,更多精彩内容
vuepress 配置百度统计
添加百度统计
获取百度统计代码
- 登录百度统计后台
- 创建站点
- 复制统计代码
var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?44212d6ce872df50b804d94b24889284";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);
})();
配置百度统计代码
修改 ./config.js
head: [// 添加百度统计["script",{},`var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?44212d6ce872df50b804d94b24889284";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();`]]
切换页面时手工上报 pv 统计
目前存在一个问题,仅在访问首页或者刷新页面时,才会触发百度统计。
因为 vuepress 是基于 vue 的单页面应用,所以页面切换过程中,不会重新加载页面,故而不会触发百度统计。
解决方法: 监听路由切换事件,当切换页面时, 手动上报百度统计, 具体实现如下:
修改 .vuepress/enhanceApp.js
export default ({ router }) => {/*** 路由切换事件处理*/router.beforeEach((to, from, next) => {console.log("切换路由", to.fullPath, from.fullPath);//触发百度的pv统计if (typeof _hmt != "undefined") {if (to.path) {_hmt.push(["_trackPageview", to.fullPath]);console.log("上报百度统计", to.fullPath);}}// continuenext();});
};
每当切换路由就会触发统计上报。所以发生如下行为时会上报统计:
- 首次访问
- 刷新页面
- 切换到当前文章的其它章节
- 切换锚点,URL 会变化,所以会触发路由变化事件。
- 所以,当用户完整得浏览完一篇博客时,可能会触发多次上报。
百度统计官方 js-api 文档
个人博客地址,更多精彩内容
vuepress-reo主题 | 配置百度统计相关推荐
- Nuxt配置百度统计,并公开统计解决
文章优先发布在个人博客,欢迎访问小站 https://www.xdx97.com/article?bamId=643100658550964224 1.Nuxt配置百度统计 1-1:配置插件 /** ...
- vuepress 2.x 集成百度统计
注册百度统计 百度统计 百度统计-用户手册 注册并登录百度统计账号 注意 这里有两种账号,本文介绍的是百度普通版统计,而非商用版 新增网站 通常情况下网站域名和网站首页一致 网站类型根据自己情况填写 ...
- Hexo Next主题添加百度统计
1.首先你要有个百度账号,然后登录百度统计https://tongji.baidu.com新增网站,添加完毕后到代码获取拿到统计脚本,如下: <script> var _hmt = _hm ...
- vuepress+百度统计 API 调用+源码
⭐️ ⭐️ 这是百度普通版统计 API 使用,而非百度商用版 API 百度统计 百度统计-用户手册 这里有各式各样的请求参数和示例,总能找到你想要的返回数据 1 必要条件 1.1 在 vuepress ...
- VuePress 添加百度统计代码
获取百度统计代码 百度统计官网 登陆 - 点击 "获取代码" 添加到vuepress中 编辑 @/docs/.vuepress/config.js 对应的 head 部分信息 mo ...
- vuepress侧边栏配置_VuePress默认主题配置(default theme config) - VuePress中文网
# 默认主题配置(default theme config) 提示 此页面上列出的所有选项仅适用于默认主题.如果你使用的是自定义主题,则选项可能会有所不同. # 主页(Homepage) 默认主题提供 ...
- Hexo的Next主题配置
使用Next主题 在这里Downloads Next主题代码 将下载的代码放在myBlog/theme/next目录下 设置站点myBlog/_config.yml的theme字段值为next 生成新 ...
- hexo个人博客搭建(二)butterfly主题配置
Butterfly主题安装文档(二)之主题配置 一.回顾安装butterfly主题 1.在hexo项目根目录下执行操作clone主题 git clone -b master https://githu ...
- Butterfly主题安装文档(三)之主题配置2
图片设置 站点图标 站点图标又称站点icon(favicon.ico) 修改主题配置文件_config.butterfly.yml: favicon: /img/favicon.png # 将图片放入 ...
最新文章
- 【OpenCV 4开发详解】图像二值化
- Windows10下的AlphaPose配置,人体摔倒姿态识别
- MapReduce 源码分析(一)准备阶段
- 笔试面试收获(持续更新中)
- python数据库管理软件_数据库管理工具神器-DataGrip,可同时管理多个主流数据库[SQL Server,MySQL,Oracle等]连接 - Python社区...
- SystemTap Errors Introduce
- HCIA-RS(2019最新题库)
- 谈谈我的感受:VS Code和Code Runner
- windows10下whisper的安装使用和CUDA的配置
- 快来带您了解中秋节的前世今生
- java计算两个时间差的方法_java计算两个时间相差天数的方法汇总
- rabbitmq配置guest用户远程访问失败
- Hive中4个By Sort By 、Order By、Distrbute By、 Cluster By区别
- 计算机微格教学教案设计表,微格教学教案设计表模板
- 数学学习在计算机研究领域的作用和重要性
- 手机上的计算机黑屏怎么办,手机黑屏是怎么回事,详细教您苹果手机黑屏怎么办...
- mysql 数据备份
- 刷脸支付在新零售行业线上线下加速融合
- 一种为MP3生成字幕文件的方法
- java http头_JAVA如何获取HTTP请求头