px-tracker

螃蟹的埋点SDK

针对螃蟹项目做的定制化埋点SDK

使用

<script src="http://10.176.50.131:5500/dist/index.js"></script>
<script>
  const pxTracker = new window.PxTracker({
    reportUrl: 'xxx',
  });
  pxTracker.reportTracker('测试主动上报');
</script>

● 安装

npm install px-tracker

● 使用

1. 初始化

import PxTracker from 'px-tracker'
const pxTracker = new PxTracker({
  open: true,
  env: 'dev',
  entryRatio: 1,
  outRatio: 0.2
}:{
  /** 开关,默认true */
  open?: boolean;
  /** 使用哪个环境,默认dev */
  env?: 'dev' | 'prod';
  /** 触发算曝光的比例 0-1，默认1 */
  entryRatio?: number;
  /** 触发不算曝光的比例 0-1，默认0.2 */
  outRatio?: number;
  request?: (data: {
    url: string;
    header: Record<string, string>;
    method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'OPTIONS' | 'TRACE' | 'CONNECT';
    data: string;
  }) => void
})
// 可挂在到vue实例上
app.config.globalProperties.$pxTracker = pxTracker;

2. 暴露出来的一些方法

// 设置userid
pxTracker.setUserId('test')
// 设置游客Id
pxTracker.setVisitorId('test')
// 设置sessionId(new的时候会默认从cookie中获取sessionId，也可手动用此方法设置)
pxTracker.setSessionId('test')
// 设置token
// pxTracker.setToken('test')
// 设置页面pageCode
pxTracker.setPageCode('test')
// 主动上报PV
pxTracker.reportPV(code: string)
// 用户主动上报
pxTracker.reportTracker(spmCode: string, data: Record<string,any>)
// spmCode 实例 { spmCode: 'a.b.c.d', gameId:'', productId:''}
// 初始化埋点request请求(适合没有navigator?.sendBeacon的环境使用)，例：pxTracker.initRequest(uni.request)
pxTracker.initRequest(request: ({
  url: string;
  header: Record<string, string>;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'OPTIONS' | 'TRACE' | 'CONNECT';
  data: string;
}) => void)

3. pv使用

   pv为自动埋点，无需手动配置

4. 曝光度使用

// 参数为需观察元素的数组
pxTracker.initExposureTracker(HTMLElement[])
// 例（也可用Ref实例）
pxTracker.initExposureTracker([document.querySelector('.test1'), document.querySelector('.test2'), document.querySelector('.test3'), document.querySelector('.test4'), document.querySelector('.test5'), document.querySelector('.test6'), document.querySelector('.test7')])
// 注：每个元素必须要有独一无二的id，id中需包含index（列表中的角标，v-for的index）等其他信息，如数据那边想知道观察的这个元素的商品id，可写作index-goods-id,这里的数据格式由数据那边定义，这边只保存id
1. 曝光百分比使用
// 第一个参数为需观察元素的数组，第二哥参数为需观察元素所在的滚动区的元素
pxTracker.initExposurePercentTracker(HTMLElement[],HTMLElement)
// 例（也可用Ref实例）
pxTracker.initExposurePercentTracker([document.querySelector('.test7'), document.querySelector('.test5')], document.querySelector('.main'))
// 注：每个元素必须要有独一无二的id，id中需包含index（列表中的角标，v-for的index）等其他信息，如数据那边想知道观察的这个元素的商品id，可写作index-goods-id,这里的数据格式由数据那边定义，这边只保存id id: account-index ,type data-set