浙里办新版埋点方案

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天

1. 在index页面引入外部js文件（微信埋点需要使用新版的埋点方案，无需微信的可以使用旧版埋点）

<script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>

2. 埋点方案文档要求有许多必填的字段，统一封装成一个js文件（zwlog.js），在需要的地方调用。
3. 定义一个全局的log对象

let zwlog !: any;

4. 首先初始化用户，这一步在单点登录完成之后做

export const initZwlog = (userId:string, userName:string) => {
  zwlog = new window.ZwLog({  //这里不加window，代码编译可能会报错，不影响使用
    _user_id: userId, //用户Id
    _user_nick: userName, //用户昵称
  })
}

5.自定义点击事件

export const zwlogRecord = (code='', msg = '') => {
  if (!zwlog) return;
  const devCode = code;
  const devMsg = msg;
  zwlog.onReady(function () {
    zwlog.record(devCode, //埋点事件代码，注意是字符类型
    'CLK',//点击事件代码 为固定值
    {Name: devMsg}); //点击事件记录的信息，埋点成功zwlog会打印这部分信息
  });
}

6.PV埋点事件，这个埋点需要的参数比较多，有一点点复杂。其中页面加载时间我理解为进入页面到触发update的时间，页面响应时间：进入页面到beforeUpdate的时间。对Vue 生命周期不是很理解，给大家提供一种思路吧。注意这里有一个比较特殊的变量“浏览时长”，它需要离开页面时才能获取到。因此，我定义了一个变量暂存传入的字段信息。注意：一个日志发送完毕需要清空暂存的信息！

let info:any = {}  // 暂存信息
export const zwlogPv = ({
                          Page_duration = null,  //进入页面时间
                          t2 = null,   //离开页面时间
                          t0 = null,       //加载完的时间

                          pId = -1,  //页面Id
                          pName = ""  //页面名称
                        } = {}) => {
  if (!zwlog) return;
  //有值传入，保存
  if (Page_duration) info.Page_duration = Page_duration;
  if (t2) info.t2 = t2;
  if (t0) info.t0 = t0;
  if (pId !== -1) info.pId = pId;
  if (pName) info.pName = pName;
//值全部获取完毕
  if (info.Page_duration && info.t2 && info.t0 && info.pName) {
     //必填字段
    const pvDemo = {
      miniAppId: 'id', //app Id
      miniAppName: 'name',  //app Name
      log_status: '02', //登录状态
      Page_duration: info.Page_duration,  //停留时长
      t2: info.t2 / 1000 + '秒', //页面加载时间
      t0: info.t0 / 1000 + '秒', //页面响应时间
      pageId: info.pId,//页面Id
      pageName: info.pName, //页面名称
    };
    zwlog.onReady(function () {
      zwlog.sendPV(pvDemo); //发送日志
    })
    info = {} //清空暂存
  }
}

7.最重要的一点，就是时间的获取。我把它们都封装在一起了

export function zwlogApi(){
  const login = new Date().getTime()  //进入时间
  const upTime:any = ref(null)  //更新时间
  const beforeTime = ref()  //beforeUpdate
  const leaveTime = ref()  //离开时间
  //获取router-->meta中设置的页面Id、Name
  const pId = toRaw(router).currentRoute.value.meta.pageId;
  const pName = toRaw(router).currentRoute.value.meta.pageName;
  nextTick(() => {
    upTime.value = new Date().getTime()
  })
  onBeforeUpdate(() => {
    beforeTime.value = new Date().getTime()
  })
  //页面卸载之前触发
  onBeforeUnmount(() => { 
    leaveTime.value = new Date().getTime()
    //发送停留时间，页面Id、Name
    zwlogPv({Page_duration: (leaveTime.value - login) / 1000 + '秒', pId, pName})
  })
  //监听时间，时间拿到之后调用pv发送日志
  watchEffect(() => {
    if (login && beforeTime && upTime && (beforeTime.value - login) > 0 && (upTime.value - login) > 0) {

      zwlogPv({t2: (upTime.value - login), t0: (beforeTime.value - login)})
    }
  })
}

8.调用

  zwlogApi()  //PV埋点

zwlogRecord('code','msg') //点击事件