javascript - 如何通过百度统计官方提供的JS api正确的发送事件？

问题描述

问 题

官方提供的统计代码如下，很好理解，异步加载统计的js代码

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

官方提供的触发事件如下[参考页面]：

_hmt.push(['_trackEvent', 'music', 'play', 'Hey Jude']);

可是如果把push方法直接写到代码底部的话，会出现一个问题，百度统计的代码还没有异步加载成功；待异步加载成功之后之前_hmt.push添加的指令被覆盖了

那么请问，如何正确添加百度触发的事件呢？

我个人的想法，是不是能通过获取//hm.baidu.com/hm.js，加载完成来进行触发呢，那么问题来了，我如何知道//hm.baidu.com/hm.js这个JS什么时候加载完成并添加到Dom TREE中了呢？

解决方案

看第一行

var _hmt = _hmt || [];

为什么会默认为[]呢？因为即使百度的统计JS未加载完，但是_hmt初始值为数组，数组是有push方法的。
在_hmt加载完成后，可以重置掉_hmt对象，假设如下

var _hmt = {
    push:function(){
        //
    }
};

这个时候_hmt对象还是具有push方法。
那么问题来了，如果在百度统计JS加载完之前已经push了数据怎么办？加载完成后会不会丢失呢？答案是不会。
我做过的一个统计系统关键代码如下，（百度统计JS也是一样的原理）：

    if (Object.prototype.toString.call(window._hmt) === '[object Array]') {
      var queue = window._hmt || [];
        window._hmt = {
            /**
             * 外部接口
             */
            push: function (event) {
               
            }
        };
        //遗留事件处理
      while (queue.length > 0) {
        window._hmt.push(queue.shift());
      }
    }

如果页面上的_hmt是数组，证明统计JS没加载，把当前_hmt数组中保存的数据保存到一个临时变量（因为加载城后_hmt会被重置），初始化_hmt变量后，正常调用push方法就可以处理JS加载完成之前的数据了。

这篇关于javascript - 如何通过百度统计官方提供的JS api正确的发送事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！