title: StReport埋点上报

StReport埋点上报

使用场景

有数据上报需求的所有项目, 针对没有特殊需求的项目请在 <head> 标签中加入以下代码用于类似百度的自动埋点上报:

  1. <script src="//zhcdn01.xoyo.com/xassets/lib/st-report-sdk/0.2.x/st-report-sdk.min.js"></script>
  2. <script>
  3.     // 如果 config 不进行设置或者为 undefined, 则当前网页将自动根据内置列表分类进行上报, 可直接使用 window.StReportSdk.autoTrack(); 即可.
  4.     var config = {
  5.       projectIdentifier: 'jx3',
  6.       eventGroup: 'jx3_jiayuan_yuyue_pc_20200417',
  7.       eventTags: ['pc','jiayuan']
  8.     };
  9.     window.StReportSdk.autoTrack(config);
  10. </script>

依赖

  1. <script src="//zhcdn01.xoyo.com/xassets/lib/st-report-sdk/x.x.x/st-report-sdk.js"></script>

其中x.x.x是版本号，请询问官网负责对接的同学当前应使用什么版本。

使用方法

一般情况下，让西山居运营平台官网组的同学提供一个写有各种埋点实现方法的js文件，直接在引用st-report-sdk.js之后，引入这个统计js文件即可；

  1. <head>
  2.     <script src="//zhcdn01.xoyo.com/xassets/lib/st-report-sdk/0.2.4/st-report-sdk.min.js"></script>
  3.     <script src="./tracker.js" type="text/javascript"></script>
  4. </head>

以下是生成的tracker.js文件的样例，可能会因为版本不同而不同。 特别要注意的是，和官网同学确认这个文件的语法是 es5 还是 es6 的。

  1. //初始化stReport时需要的参数
  2. var config = {
  3.   projectIdentifier: 'jx3',
  4.   eventGroup: 'jx3_jiayuan_yuyue_pc_20200417',
  5.   name: '家园预约专题pc端',
  6.   identify: 'jx3',
  7.   eventTags: ['pc','jiayuan'],
  8.   debug: true,
  9. };
  11. //引入stReport
  12. var stReportSdk = new StReportSdk.getInstance(config);
  14. //创建统计实现对象tracker
  15. var tracker = createTracker(stReportSdk) 
  17. function createTracker(stReportSdk) {
  19.   Number.isInteger =
  20.     Number.isInteger ||
  21.     function(value) {
  22.       return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
  23.     };
  25.   //检测参数类型，参数类型若不符合，则上报失败
  26.    function checkTypeHOF(type) {
  27.     switch (type) {
  28.         case 'int':
  29.         return Number.isInteger;
  30.         case 'float':
  31.         return value => typeof value === 'number' && !Number.isInteger(value);
  32.         case 'boolean':
  33.         return value => typeof value === 'boolean';
  34.         case 'string':
  35.         return value => typeof value === 'string';
  36.         default:
  37.         setTimeout(() => {
  38.             throw new Error('st-report: invalid value type = ' + type);
  39.         }, 0);
  40.         return null;
  41.     }
  42.   }
  44.   return {
  45.     loadPage: function() {
  46.       stReportSdk.report({
  47.         eventName: 'load_page',
  48.         eventDescription: '页面加载(默认上报，页面全部加载完才上报)',
  49.         eventDataValue: {
  50.           td_pl: StReportSdk.getDiffRouteTime()
  51.         },
  52.         types: {
  53.           td_pl: checkTypeHOF('int')
  54.         }
  55.       });
  56.     },
  57.     pageLeave: function() {
  58.       stReportSdk.report({
  59.         eventName: 'page_leave',
  60.         eventDescription: '离开页面(默认上报)',
  61.         eventDataValue: {
  62.           td_pl: StReportSdk.getDiffRouteTime()
  63.         },
  64.         types: {
  65.           td_pl: checkTypeHOF('int')
  66.         }
  67.       });
  68.     },
  69.     loadPageStart: function() {
  70.       stReportSdk.report({
  71.         eventName: 'load_page_start',
  72.         eventDescription: '页面加载(默认上报，进入页面就上报)'
  73.       });
  74.     }
  76.   }
  77. }

具体需要埋点的位置和业务点，也让官网组同学一并提供；一般会是一张图，如 https://static-xsjgw.xoyo.com/data/data/event/77/af/77afe3d6753c785cfadc07b5aff55155?_r=0.3783992622516392&_r=0.1111605430483964

最后，在业务中，调用刚刚创建的 tracker 对象中的各种上报方法实现数据上报即可

  1.    tracker.loadPage();
  3.     //点击上报
  4.     $(".btn").on('click',function(){
  5.         tracker.clickxxxx(arg1, arg2, ...argn)
  6.         //业务代码
  7.     })

数据核对

上报完成后，需要判断这个上报是否成功

方法如下： 打开控制台→选中network→选择image类型→过滤器中输入web?

失败的请求则表示上报失败。

最后，让官网同学在埋点后台的对应专题中确认所有上报点都成功后，则数据埋点完成啦~。