js sdk开发

为了能够在pc端记录用户的访问轨迹和行为，我们需要进行埋点，也需要开发属于项目的sdk，分享一下开发的思路、代码以及很多有用的集成方法。

注：这适用于pc端，app的sdk戳这

(function (win, doc) {
  // ajax
  function CBFX_JSSDK_AJAX(type, url, data, success, failed) {
    var xhr = null;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          success(xhr.status);
        } else {
          if (failed) {
            failed(xhr.status);
          }
        }
      }
    }
  };
  var isOpenPageCloseEvent = true;
  win.HAIHE_JSSDK_FUC = function (payload) {
    // 控制初始化需要开启哪些事件
    this.isOpenCollect = true;
    if (payload['isOpenCollect'] == false) {
      this.isOpenCollect = false;
    };
    this.id = payload['id'] || '';
    this.data = payload['data'] || {};
    this.userId = payload['userId'] || '';
    this.url = payload['url'] || '';
    return this.init();
  };
  HAIHE_JSSDK_FUC.prototype = {
    init: function () {
      // 获取ip
      var url = "http://pv.sohu.com/cityjson?ie=utf-8";
      var script = document.createElement('script');
      script.setAttribute('type', 'text/javascript');
      script.setAttribute('src', url);
      document.getElementsByTagName('head')[0].appendChild(script);
      if (this.isOpenCollect && this.isOpenPageStartEvent) {
        var ip = ''; // ip地址
        var sendData = {
          "encrypt": "txt",
          "secret": "",
          "version": "",
          "body": {
            "eventId": "onPageStartEvent",
            "dateTime": new Date().getTime(),
            "ip": ip,
            "id": this.id,
            "sdkVersion": "v.0.0.0.1",
            "userId": this.userId,
            "domain": window.location.hostname,
            "url": window.location.href,
            "ref": document.referrer || '',
            "data": this.data
          }
        };
        CBFX_JSSDK_AJAX('post', this.url + '/js/collector', sendData, function (res) {
        }, function (error) {
        });
      }    
    },
   
    // 文章开启事件
    onPageStartEvent: function (callback) {
      if (this.isOpenCollect) {
        var ip = returnCitySN && returnCitySN["cip"] || ''; // ip地址
        var sendData = {
          "encrypt": "txt",
          "secret": "",
          "version": "",
          "body": {
            "eventId": "onPageStartEvent",
            "dateTime": new Date().getTime(),
            "ip": ip,
            "id": this.id,
            "sdkVersion": "v.0.0.0.1",
            "userId": this.userId,
            "domain": window.location.hostname,
            "url": window.location.href,
            "ref": document.referrer || '',
            "data": this.data
          }
        };
        CBFX_JSSDK_AJAX('post', this.url + '/js/collector', sendData, function (res) {
          if (res === 200) {
            if (callback) {
              callback(res);
            }
          }
        }, function (error) {
          if (callback) {
            callback(error);
          }
        });
      }
    },
    // xxxx事件
    xxxx: function(cb) {
        // ......
    }
  };

})(window, document)

网站埋点：

1. 在页面中引入jssdk.js。<script src="https://XXX.jssdk.js"></script>
2. 脚本调用配置

初始化：
// 初始化配置 
var jssdk = new JSSDK({
      id: ‘1deqdqs', // 租户id
      url: 'http://127.0.0.1', // 存储地址
      data: { //文章开启(onPageStartEvent)、xxx事件
        articleId: ‘123123', // 原文ID
        articleTitle: ‘这是一条测试评论', // 文章标题
        articleUrl: 'http://xxxxxxx442.shtml', //链接信息
        catalogId: ‘123123', // 栏目id
        atype: ‘', // 文章类型
        ......
      },
    }，
    isOpenCollect：false, // 是否开启采集，不开启传false，默认true开启
    // isOpenPageStartEvent：false, // 是否开启打开文章时自动触发文章开启事件，不开启传false，默认true开启
    // isOpenPageCloseEvent：false, // 是否开启关闭文章时开启文章关闭事件，不开启传false，默认true开启

);

3. 方法使用

// 立即上报事件，如果要检验上报效果建议使用这种方式
// 页面离开时触发
window.onbeforeunload = function() {
	haihe_jssdk. onPageCloseEvent();
}
// 文章开启事件
jssdk.onPageStartEvent({...data});
// xxxx事件
jssdk.xxxxx({......})