nuxt.js网站接入百度统计

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

前言

公司项目需要对官网的访问数据进行统计，对比了市面上各种 统计API，最后选择了百度统计，主要是因为它比较全面，并且提供了丰富的接口，供用户进行二次开发。

公司的项目使用了 nuxt 框架，接入 统计 功能时踩了一些坑，本文梳理其接入方法。

nuxt接入

使用的百度的统计，都会要求使用者在网站中埋入以下一段代码：

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

这段代码的主要功能只要有两个：

1. 在全局创建一个数组 hmt，这个数组用于收集用户的操作数据；
2. 在页面插入一个 script 标签，主要是向百度的服务器请求统计相关的程序代码；

直接通过 plugins 接入这段代码，总是会报错；因为使用 nuxt 启用了 ssr，在服务端不存在 window 对象，而百度统计需要用到 window.hmt 这个数组，所以访问不到，就会报错。

找了许久的解决方法，发现在 nuxt 可以在 nuxt.config.js 文件中配置网站 head，通过配置直接创建相应 script 标签，向百度服务器请求统计相关的代码：

// nuxt.config.js
export default {
    //...

    head: {
        // ...
        script: [
             { type: 'text/javascript', src: 'https://hm.baidu.com/hm.js?xxxxxxxxxxxxxxxxxxxx' }
         ]
    },
    
    // ...
}

这样会在客户端才执行这段 script 标签请求下来的脚本：

那这样，还差创建一个全局的 hmt 数组供统计功能使用，但是这个其实不需要使用者去手动创建，在上面 script 请求的下来的代码中，本身就会创建一个 hmt 数组，所以不用进行手动创建也是可以：

除了自动统计的数据之外，也可以手动添加需要统计的数据。

因此，再封装手动统计的函数，注入全局，方便使用，个人封装代码如下，主要是检测是否存在 hmt：

/**
 * 判断window上是否存在_hmt
 * @returns { boolean } 是否可以使用window._hmt
 */
function checkWindowHmt () {
  // 如果是在服务端调用该函数，直接返回 false
  if (!window) {
    return false
  }
  // 创建全局 hmt
  window._hmt || (window._hmt = [])
  return true
}

/**
 * 轨迹数据收集
 * @param { Array<any> } track 需要被收集的轨迹数据，如：['_trackPageview', pageURL]
 * @returns { boolean } 是否收集成功
 */
function baiduTongjiPushTrack (track) {
  // 判断是否存在收集数据的数组 hmt，以及需要收据的数据是否为空
  if (!checkWindowHmt() || !track || track.constructor !== Array) {
    return false
  }
  // 添加统计数据
  window._hmt.push(track)
  return true
}

export { baiduTongjiPushTrack }