200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > vuepress配置百度统计

vuepress配置百度统计

时间:2021-07-19 00:36:05

相关推荐

vuepress配置百度统计

vuepress配置百度统计

一、添加百度统计

获取百度统计代码

登录百度统计后台

创建站点

复制统计代码

var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "/hm.js?44212d6ce872df50b804d94b24889284";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();

#配置百度统计代码

vi ./config.js

head: [// 添加百度统计["script",{},`var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "/hm.js?44212d6ce872df50b804d94b24889284";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();`]]

::: tip

#切换页面时手工上报 pv 统计

目前存在一个问题,仅在访问首页或者刷新页面时,才会触发百度统计。

:::

因为 vuepress 是基于 vue 的单页面应用,所以页面切换过程中,不会重新加载页面,故而不会触发百度统计。

解决方法: 监听路由切换事件,当切换页面时, 手动上报百度统计, 具体实现如下:

vi .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();});};

::: tip

每当切换路由就会触发统计上报。所以发生如下行为时会上报统计:

:::

首次访问

刷新页面

切换到当前文章的其它章节

切换锚点,URL 会变化,所以会触发路由变化事件。

所以,当用户完整得浏览完一篇博客时,可能会触发多次上报。

百度统计官方 js-api 文档(/open/api/more?p=guide_overv)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。