XView 架构升级之路

xview,架构,升级,之路 · 浏览次数 : 145

小编点评

## XView升级方案概述 **背景:** * XView 传统的开发效率低,成本高,运营成本和操作门槛过高。 * 需要通过多个阶段的升级才能提升性能和曝光率。 **升级方案:** 1. **搭建流程**: 简化流程,降低成本,加快开发速度。 2. **策略配置**: 提供多种策略控制弹窗弹出,优化曝光效果。 3. **客户端展示**: 支持多种触发方式,提升曝光率。 4. **数据采集**: 帮助优化弹窗内容和策略。 5. **互斥管理**: 避免多个弹窗在同一个页面同时弹出。 6. **预加载**: 提前加载内容,提高启动性能。 7. **页面管理**: 支持多种技术栈页面上触发弹窗。 **升级目标:** * 降低运营成本。 * 提升曝光率。 * 增加内容生产能力。 * 优化用户体验。 **主要技术:** * H5 页面构建 * 策略配置 * 客户端展示 * 数据采集 * 互斥管理 * 预加载 * 页面管理 * 触发的机制

正文

作者:京东零售 胡本奎

一 背景

1 是什么

XView是一个透明的塑料袋(容器),基于通用的webview框架改造而来,通常用于大促弹窗等营销场景,展现形式如下图:

2 痛点

在实际的开发使用中XView存在产研过程效率低,曝光率不高的2个核心痛点。

1,产研过程低效: 在研发过程中比较繁琐,不仅需要前端开发弹窗内容还需要客户端接入XView SDK以及服务端数据配置,同时依赖发版,导致交付周期长,重复工作多。

2,曝光率不高: 升级前的XView 加载流程比较长,导致曝光率不高。

3 升级

为了解决以上XView 的诸多痛点,我们将XView 弹窗进行了3个时代的升级,具体如下:

1,客户端H5弹窗组件时代: 传统的xview 只支持h5链接,这样弹窗在加载过程中存在加载速度慢,性能差,曝光率低等问题。

2,弹窗配置化时代: 通过配置弹窗可以不仅支持h5链接,同时支持图片,Gif,视频,Lottile等多种类型的素材,通过SDK 的方式,提供统一的弹窗控制,保障了弹窗的稳定性,弹窗可以通过快速配置的方式最快可以做到2个小时内测试,交付上线,同时XView CMS提供数据中心查询,可以查询线上弹窗实时的数据动态,包括曝光量,点击量,点击率等弹窗数据,同时可支持生成数据报表,但是配置繁琐,概念多,理解成本高造成“客服”工作量大,同时内容生产能力弱,不能覆盖更上游的内容生产环节,提效上限有限。

3,弹窗可视化搭建时代: 采用原生搭建的方式,尽可能的使用原生方式渲染,这样提高了曝光率,从配置化时代进入页面弹窗搭建时代,丰富了弹窗的触发场景,新增了返回,摇一摇等多种触发形式。

二 升级方案

XView 的升级方案主要从搭建流程,互斥管理,预加载升级, 页面管理以及接入这几方面介绍。

1 搭建流程

XView 搭建整个流程包括4个阶段,CMS 弹窗搭建,策略配置,客户端展示以及数据采集:

1 弹窗搭建: 由运营或产品在XView 的CMS搭建平台上通过随意拖拽组件的方式完成弹窗的内容搭建,在搭建过程中XView CMS通过低代码引擎生成弹窗页面的描述文件Schema(json),导出终端代码搭建产物(出码),在点击弹窗保存时,搭建产物经协议转换,映射为通天塔DSL,生成通天塔可渲染的数据模版,这套数据模版发布在OSS平台上,最终客户端通过通天塔灵活化SDK进行弹窗内容渲染。

2 策略配置: 在弹窗模版生成的同时,会对弹窗的弹出策略进行配置,对于频次策略,可以通过客户端的本地频次控制也可以通过服务端曝光频次控制,同时支持定向的策略,包括版本的区间,生效时间,白名单,黑名单,定向人群等策略的配置下发。

3 客户端展示: 在CMS的配置完后,客户端通过通天塔灵活化SDK完成弹窗内容渲染,弹窗的触发方式包括进入页面自动弹出和手动弹出等弹出触发方式,为了提高弹窗的曝光率通过对资源预进行预加载。

4 数据采集: 为了验证和提高弹窗的曝光率和点击率,XView 提供一整套的数据采集和展示方案,通过数据埋点以及异常埋点的分析建模,保障了弹窗曝光的成功率。

2 互斥管理

同一个页面可能同时存在多个弹窗,每个弹窗的弹出先后顺序,优先级也可能不一样,因此需要对弹窗进行互斥管理,互斥管理的流程如下:

1 同一个时刻互斥(同时触发优先级才有用),高优先级的弹过,才允许弹出低优先级的。

2 互斥组号相同的时候,对于排他设置,设置不排他,按天排他,有效期内排他,当两个弹窗同时参与排他,那么同一个时段,一个弹过,另一个就不会弹出了。

3 预加载升级

H5 时代: 手动预加载,预加载成功率不高。

配置时代: 支持图片和视频以及webview预加载,在App启动时触发预加载,可以配置提前多少天缓存以及缓存的天数,预加载成功率不高,影响App启动性能。

搭建时代: 支持图片,视频,webview,Lottie,DSL 文件等预加载,在App启动或者进入目标页面时会触发预加载,预加载的元素的优先级会根据权重,优先级组合条件进行排序决定预加载先后顺序。

4 页面管理

原生页面: 对只有Activity只配置Activity 的路径,对页面中含有Fragment或者多tab的页面,同时配置Activity 和 Fragment 的路径进行页面标示。

H5页面: 通过页面Url 链接中 host 和 path 进行匹配标示。

RN页面: 通过RN 的moduleName进行匹配标示。

通天塔页面: 通过活动acitivityId进行标示匹配或者和H5页匹配规则保持一致。

Flutter页面: 待完善。

动态化搭建页面:待完善。

5 接入:低成本

三 升级后框架

升级后XView包括外部依赖,CMS后台,CMS搭建引擎,客户端四个部分。

外部依赖: 包括对通天塔,水滴,投放,Switchquery开关平台,子午线,鲁班,果盾屏蔽系统等系统的依赖。

CMS后台:处理数据库数据,低代码引擎搭建产物和通天塔灵活化协议的转换,用户权限的设置以及搭建过程中上传图片,视频等文件处理,业务方接入发布审批,以及第三方数据源的编排等。

CMS搭建引擎:管理,配置弹窗,复制,删除弹窗。对弹窗内容的搭建目前支持关闭按钮,内嵌网页,以及布局等单例组件,还支持热区,图片,文本,视频,Lottie等基础组件的搭建。同时包含实时UV数据,弹窗性能等指标数据的建设。

客户端:包括客户端接口的处理,客户端SDK对触发时机,触发策略,元素预加载策略,事件协议处理等;对不同技术栈页面上触发弹窗的处理;对弹窗容器动效,交互处理;通天塔灵活化对弹窗内容的渲染等。

四 数据中心

数据中心支持分平台数据实时统计,包括曝光总量,关闭点击量,以及部分可点击元素的点击总量,同时支持点击率,曝光率等数据指标的统计。

****通过饼状图直观的展示弹窗的点击率数据,建立漏洞模型展示弹窗的曝光率等数据指标,未来可通过对用户人群等数据分析,提高弹窗的业务价值。

弹窗实时数据查询,让业务方能实时了解弹窗数据情况。

五 现状和未来规划

1 现状

目前赋能业务数量10+ ;覆盖首页,秒杀,新品,互动(领京豆),短视频,发现好货等业务,弹窗生产耗时可缩短到半个小时以内。

2 未来规划

XView 未来主要从技术赋能和业务价值两方面规划

技术赋能: 降低运营和产品的学习成本和操作门槛,同时提供更强大的内容生产能力,可以使得部分H5页通过原生搭建的方式实现,同时能做到自助上线,精准投放达到降本增效的目的。

业务价值: 尽可能采用原生渲染,提升曝光率,支持更多的素材类型和展现形式,包括动态数据,事件绑定等灵活化交互,同时支持更丰富的触发形式,包括返回,摇一摇,下拉刷新等多种触发场景,引入动画交互,提升点击转化达到提升业务价值的目标。

与XView 架构升级之路相似的内容: