h5制作平台-taro小程序全埋点的思路与解决方法导

摘要: 情况在一个较为完善手机微信微信小程序中,以便统计分析每一个网页页面的个人行为,如统计分析网页页面PV、UV、对网页页面原素点一下等恶性事件开展监视,而且汇报到大家自身的...

--------

h5制作平台

------- 情况 GitHub新项目

taro-track
欢迎star,如有任何疑惑,欢迎提ISSUES开展探讨

思路

​ 大家要想要完成无侵入或低侵入的监管网页页面申明周期涵数,针对原生态的手机微信小程序,大家能够参照在网上的一个现有处理计划方案:小程序从手动式埋点到全自动埋点。

​ 实际上现基本原理关键是:根据代理商手机微信小程序的Page方式,在客户传送进来的生命周期钩子涵数外层包装一层wrapper涵数,并在wrapper涵数中完成统一数据信息上报的逻辑性,随后再启用客户界定的申明周期钩子涵数,这样,应用者即可以在无认知的状况下开展编号,全部的数据信息搜集与上报实际操作都能够在这个wrapper涵数中实行。

​ 但是,上述计划方案仅可用于原生态手机微信小程序,在根据Taro开发设计的手机微信小程序新项目中,因为在Taro中全部模块都是组件Component,而非Page,历经自己的不断实验,Taro在运作的全过程中,并沒有启用过Page方式,因而,根据代理商手机微信原生态Page方式这条路是行堵塞了。

​ 那末,既然在Taro中一切皆组件,大家能不可以根据代理商Component完成相近的逻辑性呢?历经实验,这个念头是可行的,但是因为Component的生命周期钩子跟Page的生命周期钩子不一样,因此大家需要对其做一定的转换。

实际完成
//// core/wx-tools.ts
 * 获得手机微信原生态Page
 * @returns {WechatMiniprogram.Page.Constructor}
export function getWxPage():WechatMiniprogram.Page.Constructor {
 return Page;
 * 重新写过手机微信原生态Page
 * @param newPage
export function overrideWxPage(newPage: any):void {
 Page = newPage;
 * 获得手机微信原生态App
 * @returns {WechatMiniprogram.App.Constructor}
export function getWxApp():WechatMiniprogram.App.Constructor {
 return App;
 * 重新写过手机微信原生态App
 * @param newApp
export function overrideWxApp(newApp: any): void {
 App = newApp;
 * 获得手机微信原生态Component
 * @returns {WechatMiniprogram.Component.Constructor}
export function getWxComponent():WechatMiniprogram.Component.Constructor {
 return Component;
 * 重新写过手机微信原生态Component
 * @param newComponent
export function overrideWxComponent(newComponent: any): void {
 Component = newComponent;
//// overrideWxPage.ts
import { getWxComponent, getWxPage, overrideWxComponent, overrideWxPage } from @kiner/core/es 
// 需要代理商的生命周期钩子,包括Page和Component的钩子
const proxyMethods = [
 onShow ,
 onHide ,
 onReady ,
 onLoad ,
 onUnload ,
 created ,
 attached ,
 ready ,
 moved ,
 detached ,
// 开启钩子的回调函数涵数中的原始化主要参数
export interface OverrideWechatPageInitOptions {
 __route__?: string
 __isPage__?: boolean
 [key:string]: any
// 开启钩子是启用的回调函数涵数种类
export type OverrideWechatPageHooksCb = (method: string, options: OverrideWechatPageInitOptions)= void;
// 用于储存全部的回调函数涵数
const pageHooksCbs: OverrideWechatPageHooksCb[] = [];
export class OverrideWechatPage {
 // 手机微信原生态Page方式
 private readonly wechatOriginalPage: WechatMiniprogram.Page.Constructor;
 // 手机微信原生态Component方式
 private readonly wechatOriginalComponent: WechatMiniprogram.Component.Constructor;
 // 是不是应用taro架构
 private readonly isTaro = true;
 public constructor(isTaro:boolean=true) {
 this.isTaro = true;
 // 根据之后将会需要适配头条、百度搜索小程序需要,将全部实际操作原生态手机微信小程序的操都独立抽离到独立的控制模块中开展维护保养,
 // 若之后需要适配别的小程序,只需要在盖某块內部开展api动态性特定切换便可
 // 储存手机微信原始Page目标,以便大家在消毁时修复原状
 this.wechatOriginalPage = getWxPage();
 // 储存手机微信原始Component目标,以便大家在消毁时修复原状
 this.wechatOriginalComponent = getWxComponent();
 public initialize(pageHooksCb: OverrideWechatPageHooksCb): void {
 const _Page = getWxPage();
 const _Component = getWxComponent();
 // 将回调函数涵数放入序列中,在开启原生态生命周期钩子时先后启用
 pageHooksCbs.push(pageHooksCb);
 (`原始Page目标`, pageHooksCbs, this.wechatOriginalPage);
 const self = this;
 // 依据是不是应用Taro架构挑选需要代理商的钩子涵数
 // 若应用Taro则需代理商组件的生命周期钩子,若应用原生态小程序则代理商Page的生命周期钩子
 const needProxyMethods = proxyMethods.filter(item= this.isTaro?!item.startsWith( on ):item.startsWith( on 
 * 完成代理商Page|Component的逻辑性
 * @param {OverrideWechatPageInitOptions} options
 * @returns {string}
 const wrapper = function(options: OverrideWechatPageInitOptions){

const _originalHooks = options[methodName]; const wrapperMethod = function (...args: any[]) { // 先后开启网页页面生命周期回调函数 pageHooksCbs.forEach((fn: OverrideWechatPageHooksCb)= fn(methodName, options)); // 若客户有界定该生命周期钩子则实行这个钩子涵数 return _originalHooks _originalHooks.call(this, ...args); // 重新写过options,用新的包装涵数遮盖原始钩子涵数 options = { ...options, [methodName]:wrapperMethod // 应用新的options开展原始化实际操作 let res = if(self.isTaro){ res = _Component(options); }else{ _Page(options); // 因为在Taro中,一切皆组件,大家需要了解当今组件是网页页面组件還是一般组件 // 手机微信小程序原生态的Component实行结构涵数后会立即回到当今组件的相对路径,如:pages/index/index // 因而,大家能够将这个相对路径储存在大家的wrapper中,便捷大家出外部分辨当今组件是不是是网页页面组件 options.__router__ = wrapper.__route__ = res; options.__isPage__ = res.startsWith( pages/ (`重新写过手机微信小程序Page目标`, options, res); return res; wrapper.__route__ = wrapper.__isPage__ = false;
overrideWxPage(this.wechatOriginalPage); overrideWxComponent(this.wechatOriginalComponent);
//// entry.ts
 * 原始化手机微信小程序生命周期监视
 * @param {string | undefined} baseUrl 推送的系统日志服务器,默认设置为生产制造服务
 * @param {TransporterType} transporter 选用的提交安全通道计划方案是elk還是console
 * @param {string | undefined} appVersion 当今小程序版本号
 * @param {string | undefined} appName 当今小程序的名字
 * @param {boolean} showLog 推送取得成功是不是复印系统日志
 * @param {number} 凡科抠图tInterval applet-凡科抠图t恶性事件循环系统上报時间间距,默认设置为:5000
 * @param extraData 附加主要参数,sdk中没法立即获得的字段,如appid等
 * @param {{[p: string]: string}} extraData
export function initAppletLifecycleListener(
 {baseUrl,
 isTaro,
 transporter,
 appVersion,
 appName,
 showLog = false,
 凡科抠图tInterval = 5000
 }: InitAppletLifecycleOption,
 extraData: { [key: string]: string } = {}
 const logger = Logger.create( initAppletLifecycleListener 
 const logStyle = background: green; color: #FFFFFF; padding: 5px 10px; 
 const tpr = initTransporter(transporter, {
 baseUrl: baseUrl,
 query: {
 app_name: appName,
 app_version: appVersion,
 ev_type: client_ub 
 let timer = null;

// 对网页页面的onLoad和onReady开展监视 overrideWechatPage.initialize(async (methodName: string, options) = { if (!options.__isPage__) { return; // const hooksName = CompAndPageHookMap[methodName]; console.log(`dolphin-wx/entry:${methodName}-${CompAndPageHookMap[methodName]}`); const openTime = Date.now(); const baseExtFields = getBaseExtFields(extraData); const baseFields = await getBaseFields(extraData); const extraExt = extraData.ext || {}; function sendPv() { const now = Date.now(); const sendData = { ev: applet-pv , ...baseFields, ...extraData, time: now, ext: { ...baseExtFields, ...extraExt, time: now - openTime tpr.send(sendData, () = (`%capplet-pv上报取得成功:`, logStyle, sendData)); function sendPst() { const now = Date.now(); const sendPstData = { ev: applet-凡科抠图t , ...baseFields, ...extraData, time: now, ext: { ...baseExtFields, ...extraExt, time: now - openTime, url: getWxCurrentHref() tpr.send(sendPstData, () = (`%capplet-凡科抠图t上报取得成功:`, logStyle, sendPstData));
tpr.send(sendPvOutData, () = (`%capplet-pvout上报取得成功:`, logStyle, sendPvOutData));
case proxyWxLifeHooks.ready: // 若开启onLoad或attached时当今url与缓存文件的url不一样,表明产生网页页面跳转,开启pvout if(prevUrl prevUrl!==getWxCurrentHref()){ sendPvOut(); sendPv(); timer = setInterval(() = { sendPst(); }, 凡科抠图tInterval); break; case proxyWxLifeHooks.onUnload: case proxyWxLifeHooks.detached: sendPvOut(); break;
最后完成实际效果

近期有一些朋友了解我这类方式是不是真正可行,再度表明一下,历经自己在企业新项目中具体运用,确认是可行的,尽管不算非常完善,可是是彻底能做到大家的目地的。
注:因为taro是第三方架构,版本号升級不能控,因而,大家只是对特殊个版本号,如2.1.5开展适配,别的版本号并未做适配解决

线上演试视頻

本新项目早已将关键作用抽离到github中,有兴趣爱好的朋友能够去看一下,欢迎star和issue
taro-track

---------

h5制作平台

------------


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网站建设文章