zoukankan      html  css  js  c++  java
  • Nuxt简单使用Google/Baidu Analyze


    博客地址: 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的情况下,直接验证即可。

  • 相关阅读:
    svg手写标签
    使用node搭建本地服务器
    window电脑上设置鼠标触屏板的开关
    本地git如何与gitlab连接
    utools中的内网穿透下架,可使用natapp替代。
    移动端rem.js
    扫码登录开发者工具时,提示:调试过程中开发者可通过以下公众号获得你的相关信息。怎么取消这个公众号啊?
    实现图片的延迟加载
    Chrome 中安装 Vue 扩展程序
    VMWare虚拟机Bridged类型网卡ping不通的原因和解决办法
  • 原文地址:https://www.cnblogs.com/mckc/p/12443407.html
Copyright © 2011-2022 走看看