小程序统计来源信息的方案与具体代码

2024-04-02 19:04:59 122人浏览泡泡鱼

摘要

目录背景方案区分「内部跳转」还是「外部跳转」来源信息如何获得？主要来源信息有什么？在onLoad中统计来源具体代码全局修改跳转api增加特殊参数全局修改onLoad自动上报外部跳转总

背景

从用户认知的角度看，广义的小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

统计小程序来源信息并不容易，为什么？

小程序初次启动时，会调用App的onLaunch生命周期。里面有来源信息。
小程序有热启动和冷启动机制。冷启动时，并不会调用onLaunch这一生命周期，所以不能依赖onLoad做来源统计。
小程序每个页面都有onLoad生命周期，但是无论内部跳转、还是外部跳转，都会执行这一生命周期，我们无法区分，所以不能依赖onLoad做来源统计。

这样看，统计来源似乎是不可能的事情。

但是，如果你阅读过这篇文章《如何全局重写小程序 Page函数 wx对象？》和这篇文章《小程序安全指南：如何禁止外部直接跳转到小程序某页面》，也许你能自己想到最佳方案。

方案

区分「内部跳转」还是「外部跳转」

先用一种方式，区分「内部跳转」还是「外部跳转」。

具体方案：全局改写内部跳转API（wx.redirectTo、wx.navigateTo），每次内部跳转时，都带个特殊参数，在onLoad中，判断有没有这个特殊参数，就知道是来自内部还是外部了。

来源信息如何获得？

通过wx.getLaunchOptionsSync可以获得。
可以在App.onShow时获得。但这种方式需要把来源信息先保存到某个全局变量中（如app.globalData.xxx），才能方便的使用。

主要来源信息有什么？

scene场景值，这是小程序官方定义的来源场景，还是比较全面的。参考场景值列表，场景值指南。
referrerInfo.appId。来源的公众号APPID或者小程序APPID。

在onLoad中统计来源

在每个页面onLoad时，如果没有特殊参数，就上报来源信息。

但是不能傻乎乎的给所有页面都手动加这些上报逻辑，我们要用《如何全局重写小程序 Page函数 wx对象？》的方法，一次性给所有页面加上。

具体代码

全局修改跳转API增加特殊参数

function addFromInner(url) {
  const app = getApp();
  const symbol = url.includes('?') ? '&' : '?';
  return `${url}${symbol}fromInner=1`;
}

export function redirectToProxy(redirectTo) {
  return function (object) {
    return redirectTo({
      ...object,
      url: addFromInner(object.url),
    });
  };
}

function wxProxy(wx) {
  const newWx = { ...wx };
  newWx.navigateTo = redirectToProxy(wx.navigateTo);
  newWx.redirectTo = redirectToProxy(wx.redirectTo);
  return newWx;
}

wx = wxProxy(wx);

全局修改onLoad自动上报外部跳转

function onLoadProxy(onLoad) {
  return function (options) {
    // 如果没有参数fromInner，表明是外部跳转来的，就上报一次来源
    if (!options.fromInner) {
      const launchOptions = wx.getLaunchOptionsSync();
      // 这里上报launchOptions
      // 可以通过this.route 获得当前页面的路由信息，一并上报
    }
    if (onLoad) {
      return onLoad.call(this, options);
    }
  };
}

const PageProxy = (Page) => function (options) {
  const newOptions = {
    ...options,
    onLoad: onLoadProxy(options.onLoad),
  };
  Page(newOptions);
};

Page = PageProxy(Page);