Nuxt简单使用Google/Baidu Analyze

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

一般设置也比较简单，只需要把对应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的情况下，直接验证即可。

巴特西

Nuxt简单使用Google/Baidu Analyze

最新文章

热门文章