Taro小程序关于数据埋点的处理方式

1,113 阅读1分钟

场景:当数据接口需要记录浏览文章的进入时间,离开时间以及总共停留时间时,我们会在进入该页面的时候记录开始时间,离开页面时记录离开时间并在离开的时候调用后端接口。

原本是简单的在useEffect中简单return函数上调用,在正常流程进入点击返回时可以调用成功,但是当该文章被分享的时候点击进入没有返回健,左上角只有home键,此时会发现部分取于store或者文章详情的数据会丢失。 解决方法:当不管是分享进入还是自行进入时,都将数据保存至本地

import { useStore, observer } from '@store';
import dayjs from 'dayjs';
import MD5 from 'js-md5';
import ajax from '@server';
const { CommonStore } = useStore();
const { appStartTime, initTime } = CommonStore;
const setParams = () => {
let newInfo = storage.getLocalStorage('newInfo');
let newDetail = storage.getLocalStorage('newDetail');
if (newInfo && newDetail) {
  newInfo = JSON.parse(newInfo);
  newDetail = JSON.parse(newDetail);
  const { id, userId, headCompany, branchFirst, branchSecond, department } = newInfo;
  const { name, code } = newDetail;
  const traceId = userId + appStartTime.valueOf();
  const viewQuery: any = {
    headCompany: headCompany,
    investmentAdvisorId: id,
    branchFirst,
    branchSecond,
    department,
    enterTime: appStartTime,
    traceId: MD5(traceId.toString()).substring(8, 24).toUpperCase(),
    productId: myparams[0],
    productName: name, //产品名
    productCode: code, //产品代码
    title: name,
    productType: 2,
  };
  return viewQuery;
}
return {};
};
//用户产品<浏览>数据 保存浏览数据
 const postProduceRecord = () => {
    const viewQuery = setParams();
    viewQuery.duration = dayjs().diff(appStartTime, 'second');
    viewQuery.leaveTime = dayjs();
    ajax.postProduceRecord(viewQuery).then((res) => { });
  };
//进入页面时初始化时间,获取详情
useEffect(() => {
  initTime();
  getFinacialDetail();
}, []);
//获取到详情的时候存本地
useEffect(() => {
    if (detail?.name && adviserInfo.name) {
        const newInfo = JSON.stringify(adviserInfo);
        storage.setLocalStorage('newInfo', newInfo);

        const newDetail = JSON.stringify(detail);
        storage.setLocalStorage('newDetail', newDetail);
    }
}, [detail, adviserInfo]);
//离开页面时调用接口
useEffect(() => {
return () => {
  postProductRecord();
};
}, []);
//common.ts
import { observable, action } from 'mobx';
import dayjs from 'dayjs';
class CommonStore {
    @observable appStartTime = dayjs();
    @action.bound
    initTime() {
        this.appStartTime = dayjs();
    }
}

export default new CommonStore();
export interface ICommonStore extends CommonStore { }