微信小程序从使用到分析快速解析

小程序公布新功能:

1、个人开放注册小程序

2、公众号可以与小程序绑定,从公众号菜单、模板消息、通知均可触发小程序

3、可以设置通过微信扫普通的二维码,直接打开指定的小程序(类似摩拜单车)

4、App 分享到微信的链接,可以直接打开小程序

在小程序上线3个月之后,小程序公布了几大主要新能力,再一次吸引着大家的目光,新功能意味着更低的使用门槛——个人注册、更多的流量通道——可借助线下已有二维码与APP链接、更多的触达手段——公众号绑定。

这些是不是让很多人心中蠢蠢欲动,感觉又可以挥洒一番?

现阶段来看,出行类小程序与线下场景结合较好,摩拜单车、滴滴、车来了等在小程序应用上用户数量都表现不错,是现在小程序应用上广受好评的应用场景;购物类小程序紧跟其后,在最近开放的新功能中,相信结合门店二维码,购物类小程序可能会有一定的增长;另外,还有一些小而美的工具类小应用,如群应用、查规范,表现出了不错的成绩。

那么,怎么做一个小程序呢?如何分析和运营一个小程序呢?

小程序简介

微信小程序是腾讯微信团队推出的基于微信生态的应用号,是一种跨平台,媲美原生App操作体验的web应用,它拥有,即用即走、离线存储、跨平台等特点。

小程序架构

Page Frame

Web应用在微信下实现如原生应用般顺滑的体验,主要靠Page Frame,Native会预先加载一个WebView,当打开小程序落地页面的时候,就直接通过下载CDN上的资源以及数据渲染页面,请求数据则局部刷新,页面返回直接history弹栈,退出小程序,View状态并不会销毁。

MVVM

微信小程序的前端架构设计,以及开发模式,充分参考了Vue、React这一类MV*的前端开发框架,我们简单举几个例子:

比如通过{{data-bind}}进行数据双像绑定,就像极了Vue的设计风格;

再比如一些标签语法糖,列表循环:

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

相信写过AngularJS 和 Vue的同学都不会陌生;

再比如,事件绑定:

<view bindtap="add"> {{count}} </view>
Page({
    data: {
      count: 1
    },
    add: function(e) {
        this.setData({
            data: this.data.count + 1
        })
    }
})

如果你开发过React,那么其里面有一个setState的方法可以用来改变状态的值,这里的setDate也是一样的,通过绑定的add方法来改变视图中count的值。

模块化思想这些都是现在前端框架必备基础。

组件

微信小程序框架与其他开发框架不同,比如vue react都是只管安心做好框架,UE层面的套件库都由各路使用者来贡献,比如饿了么的element,蚂蚁的ant-design,微信小程序直接提供了在小程序开发过程中常用的UE组件,小程序的组件遵循web component标准,并使用polymer框架实现web component。

视图容器、表单组件、导航、媒体组件、地图组件、画布这些基础的元素级组件

分享、登录、支付这些功能性组件

API

在appservice层,微信提供了N多API,其实就是jsbridge,用于提供js访问native的能力和通道,像:

wx.*storage* 访问存储相关接口
wx.*file* 文件操作相关api
wx.*systeminfo* 获取机型
wx.*network* 获取联网状态

还有更多媒体、界面的操作api不一一列举,可以直接参考文档-开发-API部分

利用分析工具透视微信小程序

当简单了解了小程序是什么之后,我们摸索着做了一个小程序的demo,利用豆瓣图书的api(做完了才发现git上已经有无数这样的demo),成功运行小程序之后,我们又有了对小程序做数据透视的想法,官方的数据分析模块有提供,但及其简单,只是基础的运营指标+自定义事件(自定义事件功能还是蛮屌的,实现了无埋点),业界搜索了一下,有微信小程序分析相关的平台or产品并不多,talkding data,hotapp,腾讯移动分析(MTA),这里,我们选择了MTA,接下来就针对MTA的sdk代码和功能,来看看如何利用数据分析工具运营小程序。

数据分析SDK源码解读

整个SDK对外暴露了三个对象App、Page、Event

mta.App.init({config_obj});

做统计信息的初始化,在应用入口app.js App.onLaunch方法中调用,很显然是做一些统计信息初始化的工作,其中除了常规的统计ID的初始化,我们发现有对使用分析统计功能的开关设计,通过反混淆源码发现:

以统计分享为例:

var a = getCurrentPages()[getCurrentPages().length - 1];
MTA_CONFIG.stat_share_app && a.onShareAppMessage && !
            function() {
                var b = a.onShareAppMessage;
                a.onShareAppMessage = function() {
                    MTA.Event.stat(MTA_CONFIG.prefix + "shareapp", {
                        url: a.__route__
                    });
                    return b.call(this, arguments)
                }
            } ()

获取当前页面的对象,重载页面对象的share event对应的handler方法,在执行框架方法之前,做统计平台的event统计上报,是个不错的好方法。

Page.init()

具体页面的统计接口,可以看到,页面的访问统计是挂在框架对外暴露的Page.onShow的方法,onShow方法会在加载,返回,后台导前台等页面展示的任何时机都上报,所以统计口径可能与官方有差异

Event.stat(eventid, {params_obj})

自定义事件的上报接口,用户可以在管理台配置好自定义事件,拿到合法的统计id和事件id后,在任何需要统计的事件场景下进行统计

其他内部实现,多是利用框架提供的system/network等接口来上报环境、网络等信息

实时刷新的透视数据

MTA提供了访问次数、访问人数、应用打开次数等基础指标在各个分析模型下的组合、计算和应用,并且做到了几乎全站分析模型的实时化:

真正做到了所见即所得的运营数据

环境分析,让微信小程序开发者更了解运行环境

MTA提供了地域、运营商那个、机型、网络、操作系统、平台等一系列用户客户端环境分析的报表,可以很好的帮助开发者、运营者了解自己的小程序都运行在什么的宿主环境中,其中地域分析提供了各省份及其附属市区的覆盖数据,这些应该都是拿的用户ip,然后匹配腾讯公共的ip库做的映射:

而微信版本、网络连接类型、机型、操作系统等这些都是利用微信的getSysteminfo getNetworkType等接口取值上报进行了汇总、统计:

使用分析,特定场景下的用户行为分析

以上两个功能都是不需要用户参与的,MTA自动帮大家采集和计算的,而使用分析则不是,比如我们需要统计有多少用户分享了我的小程序、有多少用户触发了页面的下拉刷新等动作,如此精细化的用户行为分析,MTA这边也提供了配置化的上报接口:

在mta.App.init({
         "statPullDownFresh":true,
      "statShareApp":true,
          "statReachBottom":true
})

前提是已经获得并配置了合法的click_id

这样平台就会采集这样的用户行为数据,并进行计算

举例分享分析,还提供了具体的分享页面列表,让开发者了解自己的小程序哪些页面的内容质量更高。

自定义分析,给用户行为洞察更多的灵活性

有很多场景,比如我想统计demo小程序中,搜索图书这个按钮的点击量(搜索图书这个事件的事件发生次数),并且我想知道每次用户都输入了什么值来搜索图书,我用MTA的自定义事件,并配置了对应的事件id和参数

mta.Event.stat('btn_search',{search:'用户输入的值'})

实时访客轨迹,实时透视用户行为的鹰眼

这个功能是我觉着帮助透视小程序运营数据很有特色的一个功能,可以帮助开发者实时的查看当前应用的活跃用户的行为轨迹,并且提供了当前用户的一些基本属性:第一次访问小程序的时间,用户类型,地域,受访页面url等,很清晰,有种坐在monitor屏幕后面窥视用户的感觉:

目前利用诸如MTA这样的小程序数据分析平台来做小程序的基础和精细化运营,摸索小程序发展的未来方向,也期待有更多用户洞察的功能以及对小程序开发者和运营者更有价值的功能推出。

文章来源:【腾讯大数据】微信号:tencentbigdata

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

前言 初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目...

4809
来自专栏ytkah

微信公众平台增加批量获取用户基本信息接口

  为了帮助开发者提高效率,微信公众平台的用户管理接口中,新增了批量获取用户基本信息的接口。    同时,为了保障公众号第三方平台的业务运营,该接口已放入用户管...

5337
来自专栏无原型不设计

如何设计出一款出色的结账表单

毫无疑问,结账体验是所有网上商店最重要的一部分,表单的设计直接关系着电子商务网站的转换率 – 更快,更方便用户填写的表单,就意味着将获得更高的转换率。 作为用户...

3344
来自专栏资深Tester

测试流程之缺陷

1742
来自专栏知晓程序

小程序没条件做真机测试?微信官方免费帮你测 | 小程序问答 #46

对于个人开发者而言,解决兼容性问题很麻烦,因为他们通常只会用自己的手机来测试小程序。

1563
来自专栏苦逼的码农

给大家推荐几个常用谷歌浏览器插件(不用翻墙也能使用谷歌搜索了)

虽然一直知道谷歌浏览器有很多插件,但并不知道还有一些这么好的插件,不知道是不是我太落后了,今天我就给大家介绍几款自己常用的插件。

43.9K13
来自专栏腾讯大数据的专栏

微信小程序从使用到分析快速解析

引言 小程序公布新功能: 1、个人开放注册小程序 2、公众号可以与小程序绑定,从公众号菜单、模板消息、通知均可触发小程序 3、可以设置通过微信扫普通的二维码,直...

2628
来自专栏Youngxj

[seo]实用的博客SEO优化方案

1697
来自专栏企鹅号快讯

微信更新到版本了,带来了哪些抢眼的功能呢?

在新年前夕,微信又放出了大招,更新了6.6.1版本,而且这次是安卓、iOS同时更新,并带来了3个新的功能: ? 新增小游戏 除了最近备受大家宠爱的“跳一跳”。在...

2139
来自专栏EAWorld

前后端分离,是为了彼此更好

一、被误解的前后端分离 在Web应用开发过程中,业界对前后端的分界线似乎一直都没有确定的概念,不过大多数人以浏览器作为前后端的分界线。将浏览器中为用户进行页面展...

38311

扫码关注云+社区