【用户行为分析】-JS端埋点

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ldb987/article/details/84392929

需求

在用户购买会员卡时埋点，获取的事件属性包括：神策预置属性、卡类型、卡名称、购卡支付金额等数据。

事件设计

实现

引入Js SDK

将获取到的代码放入html 的 head 里面，靠前的位置处。
JS SDK获取方式，参考神策官网：https://www.sensorsdata.cn/manual/js_sdk.html。

<script>
   //神策数据接入
      (function(para) {
          var p = para.sdk_url, n = para.name, w = window, d = document, s = 'script',x = null,y = null;
          if(typeof(w['sensorsDataAnalytic201505']) !== 'undefined') {
              return false;
          }
          w['sensorsDataAnalytic201505'] = n;
          w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}};
          var ifs = ['track','quick','register','registerPage','registerOnce','trackSignup', 'trackAbtest', 'setProfile','setOnceProfile','appendProfile', 'incrementProfile', 'deleteProfile', 'unsetProfile', 'identify','login','logout','trackLink','clearAllRegister','getAppStatus'];
          for (var i = 0; i < ifs.length; i++) {
              w[n][ifs[i]] = w[n].call(null, ifs[i]);
          }
          if (!w[n]._t) {
              x = d.createElement(s), y = d.getElementsByTagName(s)[0];
              x.async = 1;
              x.src = p;
              x.setAttribute('charset','UTF-8');
              y.parentNode.insertBefore(x, y);
              w[n].para = para;
          }
      })({
          sdk_url: 'http://static.sensorsdata.cn/sdk/1.12.3/sensorsdata.min.js',
          heatmap_url: 'http://static.sensorsdata.cn/sdk/1.12.3/heatmap.min.js',
          name: 'sensors',
          web_url: 'https://tuiying.cloud.sensorsdata.cn/?project=default_yhtoc',
          server_url: 'http://tuiying.datasink.sensorsdata.cn/sa?token=edd25955ac38cd3d&project=default_yhtoc',
          // server_url: 'D:/log1/access.log',
          heatmap:{}
      });
      if(sessionStorage.memberCode){
          sensors.login(sessionStorage.memberCode);
};
sensors.quick('autoTrack');
</script>

以上代码需要我们注意的地方是几个url的值。如果是以上代码是用神策平台代码生成工具自动生成的，这些url会自动配置好。
sdk_url:sensorsdata.min.js 文件的地址，也可以从 GitHub 获取并且放在你们自己网站目录下，然后引入。
heatmap_url: heatmap.min.js 文件的地址，也可以从 GitHub 获取并且放在你们自己网站目录下，然后引入。
server_url: 数据接收地址，即数据库的地址，注意神策云服务和私有化部署，这个地址是有区别的。具体请参考神策官网。

用户标识

在所有事件前面。也就是在 sdk 载入代码后面，先使用 sensors.login（如果此时有这个 user_id 的话），然后再用 sensors.quick(‘autoTrack’) 等，这样后续的事件才会使用这个更改后的 userid。

 sensors.login(sessionStorage.memberCode);
 sensors.quick('autoTrack');

进行事件追踪

success:function(data){
        if(data.resultCode == '0'){
            sessionStorage.removeItem("bindPhoneParam");
            data.resultData.bindType="";
            data.resultData.orderType=2;
            data.resultData.actualPayment = data.resultData.orderPrice;
            var me = this,
         //追踪购卡事件
         hasCalled = false,
         cardType = cardV.popInfo.cardType,
         cardName = cardV.popInfo.cardName,
         cardAmount = (cardV.popInfo.cardPrice - cardV.popInfo.cardFee) / 100
         trackObj = {
           cardType : cardType,
           cardName : cardName,
           cardAmount : cardAmount
         };
      setTimeout(track_a_click, 400);  //如果没有回调成功，设置超时回调
      function track_a_click(str){
        var _this = this;
          if (!hasCalled) {
              hasCalled = true;
              location.href = path + "/page?pagePath=pay/payOrder&params="+encodeURIComponent(JSON.stringify(data.resultData))+"&companyCode="+sessionStorage.movieCode;;  //把 A 链接的点击跳转,改成 location 的方式跳转
          }
      }
      sensors.track('buyCrad',trackObj, track_a_click); //把跳转操作加在callback里

事件追踪的代码应该放在目标事件执行成功后。事件追踪的核心代码就是：sensors.track(‘buyCrad’,trackObj, track_a_click);这是神策用于上报事件的接口，三个参数分别是要追踪的事件名、这个事件的属性、发送完数据之后的回调。

成功演示

这样，前端代码埋点就实现了，这只是一小部分，还有更强大的操作，有待实践。