教师端H5埋点的现状与改进

        数据很重要。用户的行为数据就好比给了我们一双天眼,清晰的观察用户的习惯和需求,同时也能从中看出我们自己产品设计和经营中的一些不合理存在。大数据时代背景下,海量数据喷涌而出,“数据收集——数据整理——数据分析——数据可视化”,势在必行。
        数据第一步:数据收集。实现方式: 埋点。
教师端埋点现状
        提前封装好js片段,当需要统计的行为发生时,触发脚本执行,发送统计信息。
教师端埋点–每个页面统一的配置信息 和 页面统一入口 http://note.youdao.com/noteshare?id=f65209f833f444fbeb06b8a872c56928&sub=9C87991238584D7FA1C54461952DB75F
        教师端埋点–某些页面需要特殊配置的地方,就行单独处理 http://note.youdao.com/noteshare?id=cf762255544e27dc23f5a0a3a6fd7225&sub=96734D456CEA4F208DBF095E7E001EA0
        教师端埋点–stat.js(发送统计信息的方法和一些逻辑处理)http://note.youdao.com/noteshare?id=ae7ae2a06d973e173a294eb38fa34153&sub=3F5F4ECCE54149CB84FF8E825C0D9A7A
        大部分信息在大部分场景是通过统一配置和相应的过滤、映射等方式获取,个别除外。信息部分:进入首页的方式(refer)必须从客户端插件获取,共有登陆,启屏,开机视频,修改密码4种,这个只有客户端自己清楚,而H5只有通过调用原生插件,才能获取到。场景部分:某个按钮的点击(去分享按钮),tab的切换(首页底边栏4个,班级详情顶部栏3个),这些目前是手动触发的,可以参考第二个链接中的代码。
教师端埋点改进
        H5在埋点方面已经实现一定程度上的自动化,统一的配置、统一的入口拦截和发送。又或者当我们又增加了新的页面时,只需在views里做统一配置,然后去stat.js里面作统一映射,就可以了。但是,有些事臣妾做不到。比如IOS的事件有统一管理栈,可以作统一拦截和处理,但H5并没有这样机制,H5只能自己去做标识,再去跟自己自己做的标识作相应的监听处理,它跟我们的需求数据(即收集的数据)有莫大的关联,只能根据BI小组的需求去做相应的特殊处理。这种方式已经在PC的埋点中有一定的实践和应用,确实在一定程度上减少了前端的工作量和以后扩展的成本,这个也可以应用到教师端,作为改进部分方案,可在一定程度上解决“大部分场景”的问题,实现可配置的自动化,当然,相应的js脚本也得跟着变化,需求去执行监听和处罚的操作。
        这些优化只能算是局部优化,离完全自动化的埋点还有很大差距,欢迎老司机们献计献策~
        随着公司的发展壮大,对数据的需求会变化,之前很多额埋点信息会作废,推倒重新来埋不是不可能,为了面对这种情况,埋点的可扩展,可更改,高效率的实现方式很重要,一劳永逸永远是代码的最高境界。但,我们在寻求这个方式的前提下,不得不去考虑
        1、数据的准确性;
        2、性能。
        数据的全面、及时很重要,但数据的准确、可靠才是其价值的根基。
        扯这段没别的意思,只是想提醒一下,所有的埋点的解决方案都必须以数据的准确可靠作为基础。

html2canvas的那些事:如何生成高清canvas图片

前几天产品提出一个问题,教师端app绘制出的用于微信分享的排行榜图片像素比较差,部分老师不愿意分享。针对这个问题,我去尝试做了一些优化。

方案一:
原理如下:先画个2倍的所谓的渣像素的图片,然后缩小2倍显示。
代码如下:(最终生成base64)

        getBase64 (ref) {
             returnnewPromise ((resolve) => {
                   setTimeout(() =>{
                           var _canvas = document.createElement(“canvas”),
                                  w = ref.offsetWidth,
                                  h = ref.offsetHeight;
                           _canvas.width = w * 2;
                           _canvas.height = h * 2;
                           _canvas.style.width = w + “px”;
                           _canvas.style.height = h + “px”;
                           var context = _canvas.getContext(“2d”);
                           //然后将画布缩放,将图像放大两倍画到画布上
                           context.scale(2,2);
                           html2Canvas(ref, {
                                canvas: _canvas,
                                onrendered: (canvas) => {
                                       resolve(canvas.toDataURL(“image/png”));
                                }
                           });
                    });
               });
           }
但是遇到一个问题:部分安卓手机,比如华为P9,会崩掉,猜测是Hbuiler打开webview的内存限制,而oppo R9就可以绘制出高清的图片。由于不能适配所有手机,故没有采用这种方案。
方案二:

如果保存为JPEG图片,还可以通过第二个参数指定图片质量:

var imgsrc = myCanvas.toDataURL('image/jpeg', quality);

quality的取值范围为0.0-1.0,0.0代表图片质量最差,1.0代表图片质量最好。

但是,此方案需要客户端修改截取base64数据的位数,即客户端需要更新,暂时放弃此法,可作为以后参考用。

目前,优化搁浅,尚未找到合适的方案。后面我会尝试确认方案一中手机崩掉的具体原因,并尝试解决。网上很多人都是通过该方法解决canvas绘制图片的清晰度的问题的,证明此法应该是行得通的,可能是自己哪里配置/写法有问题。

如有好的意见或者方法,欢迎提出来。我也会持续跟进更新这个问题。。。