前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Nuxt 项目中如何引入百度统计?

Nuxt 项目中如何引入百度统计?

作者头像
子舒
发布2022-06-09 14:27:17
1.8K0
发布2022-06-09 14:27:17
举报
文章被收录于专栏:子舒的个人博客

在部署一个网站之后,我们最关心的事情无异于是访问量,以及对它的分析。国内的百度统计是一个不错的选择,基本的功能都是免费的。

只需要在head中引入一串 javascript 代码即可。

代码语言:javascript
复制
<!-- <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script> -->

上面是百度提供的统计代码,需要放在 <head></head>中。

但是在nuxt中,没有传统的 <head></head> 。所以要对他进行一些处理。

1. 首先在根目录下 /plugins 新建一个文件 baidu.js

代码语言:javascript
复制
// /plugins/baidu.js

export default ({app: {router}, store}) => {
  /* 每次路由变更时进行pv统计 */
  router.afterEach((to, from) => {
    /* 告诉增加一个PV */
    try {
      window._hmt = window._hmt || []
      window._hmt.push(['_trackPageview', to.fullPath])
    } catch (e) {
    }
  })
}

2. 配置 nuxt.config.js 文件

  1. plugins中:
代码语言:javascript
复制
plugins: [
  {
    src: '~/plugins/baidu'
  }
],
  1. head中:
代码语言:javascript
复制
head: {
  // ...
  link: [
    // ...
  ],
  script: [
    { src: 'https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxx' }
  ]
},

在script中写入百度统计提供的 url 即可,按照对应的字符。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022 年 01 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 首先在根目录下 /plugins 新建一个文件 baidu.js
  • 2. 配置 nuxt.config.js 文件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档