Nuxt简单使用Google/Baidu Analyze

Posted 2021-03-06 mckc

博客地址： https://www.seyana.life/post/17

具体账号注册方法和绑定方法可以去到官网下，都有相应的指南，

一般设置也比较简单，只需要把对应js代码添加到head中即可，

这里主要是在Vue中使用Nuxt plugin添加这些信息，并且在后台管理analyze id。

百度analyze，其中baidu_analyze是我的id

/* eslint-disable */

export default ({
  app,
  store
}) => {
  /**
   * 只在生产环境使用
   */
  if (process.env.NODE_ENV === 'development') return

  const options = store.state.option.data
  //查看是否设置id
  if (!options || !options.baidu_analyze || options.baidu_analyze === '')
    return
  const baidu_analyze = options.baidu_analyze

  /*
   ** baidu 统计分析脚本
   */
  var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?" + baidu_analyze;
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();


  /*
   ** 每次路由变更时进行pv统计
   */
  app.router.afterEach((to, from) => {
    var _hmt = _hmt || [];
    (function () {
      document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?" + baidu_analyze;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  })
}

google analyze在nuxt官网上有教程,这里只需要把UAxx改成自己的，或者从接口得到的id即可

/*
** 只在生产模式的客户端中使用
*/
if (process.client && process.env.NODE_ENV === 'production') {
  /*
  ** Google 统计分析脚本
  */
  (function (i, s, o, g, r, a, m) {
    i.GoogleAnalyticsObject = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga')
  /*
  ** 当前页的访问统计
  */
  ga('create', 'UA-XXXXXXXX-X', 'auto')
}

export default ({ app: { router }, store }) => {
  /*
  ** 每次路由变更时进行pv统计
  */
  router.afterEach((to, from) => {
    /*
    ** 告诉 GA 增加一个 PV
    */
    ga('set', 'page', to.fullPath)
    ga('send', 'pageview')
  })
}

之后只需要Nuxt.config中添加plugin，用client模式可以使插件只在客户端运行

plugins: [
  { src: '~plugins/ga.js', mode: 'client' },
  { src: '~plugins/baidu.js', mode: 'client'},
]

谷歌在设置好analyze之后，还可以绑定Google search control，在绑定了analyze的情况下，直接验证即可。