郑州正规网站设计价格,网站建设服务网络服务,网站怎么做第三方登录,近期10大新闻事件短短几年的时间#xff0c;微信小程序已经从一颗小小的萌芽成长为参天大树#xff0c;形成了较大规模的开发者生态系统#xff0c;尤其是在支付、线下垂直领域潜力巨大。 作为领先的生活服务平台#xff0c;美团的技术团队在小程序领域也进行了很多的探索和实践。像mpvue就… 短短几年的时间微信小程序已经从一颗小小的萌芽成长为参天大树形成了较大规模的开发者生态系统尤其是在支付、线下垂直领域潜力巨大。 作为领先的生活服务平台美团的技术团队在小程序领域也进行了很多的探索和实践。像mpvue就是一款使用Vue.js开发微信小程序的前端框架而且已经在美团点评多个实际业务项目中得到了验证详细介绍大家可以阅读《用Vue.js开发微信小程序开源框架mpvue解析》一文。目前mpvue已经开源项目地址是https://github.com/Meituan-Dianping/mpvue。 本文将介绍扫码付小程序的实践根据美团前端工程师陈瑶在美团第31期技术沙龙点击可以查看这次沙龙四场演讲的Slides和视频的演讲《金融扫码付H5迁移小程序拓荒之旅》整理而成。 什么是扫码付小程序 美团扫码付是一款面向C端消费者推出的线下收单业务相信大家已经在线下很多餐馆和其他生活服务商家体验过了。这项业务主要就是通过小程序提供服务的而在实际场景中用户先使用微信“扫一扫”功能扫描商家二维码系统会自动调用扫码付小程序进入支付页面最后输入金额完成商品的支付。 目标及数据分析 支付服务最核心的指标显然就是用户支付成功的占比我们称之为支付转化率。对扫码付业务而言支付转化率的百分比越高扫码付业务的营业额也就越高其带来的收益是正相关的。因此提升扫码付小程序的支付转化率就成为我们技术团队的重要工作。经过数据分析我们发现转化率流失主要存在于以下两个环节 扫码到进入小程序环节外部环节进入小程序到支付环节内部环节从扫码到进入小程序环节微信会完成小程序基本信息获取、资源准备代码下载或更新等准备事项。在准备事项中如果准备失败或等待时间过长就会导致用户离开这部分由微信控制的环节我们称之为外部环节。 在进入小程序到支付环节页面会进行渲染、数据请求等如果渲染时间长、数据请求时间长也容易导致用户离开同样如果数据请求失败也会造成用户使用过程的终止这部分由我们美团扫码付技术团队控制的环节称之为内部环节。 如何提升外部环节转化率 对于小程序开发者而言扫码到小程序调起这个环节是黑盒的我们无法得知其中的细节。而我们在扫码付小程序中尝试和微信的同学做了一次梳理发现扫码付小程序在外部环节的丢失率较高查询数据后我们发现其中大部分用户手动点击了右上角的退出。 从业务视角出发用户使用扫码付小程序可认为他们有强需求进行支付而造成用户手动点击退出的部分原因可能是等待时间过长。而在这个环节对时间造成影响更多的是资源准备即小程序代码下载或者更新的行为。根据经验影响下载和更新时间可能的因素包括两个方面一个是网络另一个是代码包。 因为用户的网络是我们无法控制的只能尝试从代码包开始下手。而在当时未使用分包的情况下我们的主包大小约为3M这意味着新用户和无缓存小程序用户均需要在首次使用时等待下载3M左右的包。在这种情况下虽然用户享受了小程序离线缓存包的福利却丢失了大部分新用户的体验。于是我们尝试从包代码层面做一些优化 增加分包加载机制。用户在使用扫码付业务时会按需进行加载优化小程序首次启动的下载时间。减小主包和分包大小。按照空主包的概念进行优化。在进行分包加载机制后主包因为无法最小化而影响首次下载时间。一方面原有的3M整包中图片大小占用了50%大小我们将所有的内含二进制和Base64图片分发到了CDN另一方面部分可移出的业务分发到了其他分包。在做了这些事情后扫码付分包从原先的整包3M缩减到了361K主包300K分包61K而外部环节的转化率也提升了3%。虽然转化率提升了但前置环节的转化率仍然有部分丢失理论上继续缩减300K的主包能有效提升但由于业务性质的原因无法再继续缩减于是我们向微信小程序提出了独立分包的概念用户在使用独立分包时无需下载主包。 通过独立分包加载程序使用期间下载更新阶段只需要加载61K的分包大小。目前这个功能还在灰度阶段扫码付小程序团队也在作为第一批的内测用户进行体验优化效果在之后的实践中我们也会分享出来大家可关注美团技术团队公众号持续关注我们。 如何提升内部环节转化率 在进入小程序到支付这个环节属于我们的业务流程。在这个环节中的转化率丢失虽然我们能够掌控但是必须有所依据才能对症下药。所以我们做了一些数据监控 业务核心流程监控。业务核心流程指用户进入小程序后所涉及的影响最终支付的中间流程中间流程的丢失会直接影响业务整个转化率丢失所以这里必须进行监控。而业务核心流程监控需要可监控的具体指标我们对进入小程序和支付进行了关键动作拆解从开始扫码到用户看到页面再到点击支付、初始化订单、支付成功。拆解完这些关键动作再针对每一步可控环节进行技术指标的拆解。从入口到出口的每一步制定关键指标扫码加载转化率、点击意愿等见下图形成一个至上而下的漏斗产出多个可量化指标来做业务流程的监控。对于这部分可量化指标可以通过长期的观察分析来提升转化率。 异常监控。页面的任何异常都可能导致支付页面的渲染失败从而无法正常支付。我们对页面的接口异常、微信API异常进行了监控。接口异常可在APIwx.request的fail函数中直接捕获从而上报监控对于接口超时则只能通过全局的app.json进行全局设置默认60s时间过长对用户体验较差此前我们曾尝试在小程序中设置全局的5s请求超时但实际应用中并非所有场景需要设置统一的超时最终我们单独封装了接口请求超时。微信API的异常通过微信的一些fail中进行监控即可。 性能监控。小程序内部转化环节中关注进入小程序后的白屏时间和可交互时间。内部白屏时间从onLoad处打点到页面onReady处结束内部可交互时间从onLoad处打点到页面数据请求结束后的可点击支付时间截止。日常监控中我们也发现了一些问题例如接口调用超时、接口调用失败这些问题会导致页面流程终止。针对这些问题我们做了一些优化 接口合并。支付页面的外网链路接口请求数量较多任意一个接口的失败都会导致问题合并接口则可以减少问题出现概率提升中间流程的转化率。增加重试机制。在出现接口异常的情况下会直接导致页面阻塞如果通过重试能成功则可以提升转化率。整个流程中可重试的有两类自有的接口请求异常小程序API调用异常。对于这两类异常在接口超时、调用失败时采取重试。而为了避免在极端情况下服务端流量陡增、峰值倍数增加页面的可重试次数会在前置获取全局配置时根据“可重试次数”进行控制并且每次重试需要在一段时间后用户手动触发。超过重试次数时则流程终止。 如何监控内部和外部环节 前面我们也提到对于小程序开发者而言扫码到小程序调起这个环节是黑盒的我们开发者无法得知此处的细节所以说在监控外部环节这方面我们开发者似乎可做的事情屈指可数。但是不知道细心的同学有没有发现微信在每次扫码后会给我们在query参数上附带一个scancode_time字段。其实这个字段表示的是用户在使用扫一扫时微信服务端记录的时间所以基于这个字段的考量我们做了如下尝试针对以下两个参数值分别做了实时监控 支付页面的白屏时间用户看到首屏的客户端时间—用户微信扫一扫服务端时间服务端客户端差额时间。支付页面的用户可交互时间页面Loading完毕时间—用户微信扫一扫服务端时间服务端客户端差额时间。由于客户端的时间戳是获取本地手机系统的时间可能存在差异。所以为了保证上报的准确性我们在每次onLoad的时候取了一次我们服务端的时间记录了客户端的时间与服务端的一个时间差额并且在后续所有涉及到服务端的时间都参照这个时间差额做计算网络100-200ms级别的传输时延暂可忽略。 但由于我们扫码付小程序的特殊应用场景就是为了保障用户进行快速可靠的支付既然在外部环节可控度不高那是不是可以考虑在内部的业务流程方面把监控统计做的细粒度一点做到能对每一个可能影响到支付的环节有数据可循呢我们针对这个方向区别于传统的PV、UV统计并对业务上报做了如下分类 根据上报的场景划分实时性监控部分与统计部分。根据上报的类型划分Error类型、Event类型普通生命周期事件、Metric类型自定义Event类型维度可自定义、自定义测速类型延时趋势与分布。基于上述方案的探索我们团队基本上做到了对可能影响支付环节的很多业务指标进行了整体的把控。从而在下一步针对每个潜在的可优化点做进一步思考与考量然后作出及时的策略优化与更新。通过对扫码付小程序的探索我们积累了很多优化经验。美团的价值观是追求卓越对于能优化的方面我们还会进一步去探索也欢迎更多的同学跟我们一起讨论。 作者简介 陈瑶2015年校招入职美团此前参与过美团平台移动端触屏版的前端开发工作从0到1参与了智能支付应用层的前端建设工作现负责美团收单业务扫码付小程序业务。招聘 如果对我们“智能支付大前端团队”感兴趣可直接简历发送给chenxuan03meituan.com。欢迎加入美团跟我们一起探索未来。
