页面效果验证

本部分主要介绍监控和分析数据需要注意的地方和常用的方法，以及一些TGideas总结的数据结论。

新技术和新创意往往会带来影响力和口碑，提升技术能力和知识储备，但却不能忽略一些问题。如，项目需求的初衷是什么，需求方期望达到什么样的目的，技术和创意在应用后能给需求方和项目带来什么，项目上线后的实际效果怎样，以及用户会这么操作这些页面等。

往往在项目上线后，通过数据监控发现，一些之前觉得好的创意，在上线后，由于资源和加载量太大，导致用户在Loading阶段大量丢失，一些觉得很出色的页面设计，由于没有突出重要按钮，导致转化率很低，一些动画效果绚丽的互动页面，反而转化率比同样功能的常规页面低很多，一些费了大功夫、很多精力和资源做出来页面，由于缺乏推广，造成访问量很少，这些问题层出不穷，但开发人员往往却还沉浸在技术和创意的喜悦中。

为了能更好的达到需求的实际目标，提升用户体验及持续优化后续的需求，需要对页面进行各种数据埋点，在上线后进行数据分析，从数据的角度研究需求的实际效果，用户的实际行为及后续的改进措施。

在数据埋点方面，页面的PV、UV，各个按钮的点击量，页面停留时长，内容的曝光度，用户的操作，页面的转发量，页面的来源渠道，页面浏览的操作系统和平台，以及用户的访问路径等，都需要进行监控。以此，可以计算出用户的操作行为，丢失位置，丢失比例，按钮的点击率及用户的转发率等数据，以便帮助运营和开发人员进行研究。

TGideas出品的移动H5页面用户行为报告：

• 第一期
• 第一期

数据埋点

什么是数据埋点？
在页面代码中安插数据上报的统计代码，每次执行到这段代码就会向服务器上报一个数据并记录，安插统计代码的行为叫做数据埋点。

例如，需求是要统计某个按钮的点击次数，移动端页面一个完整的点击行为可用tap表示，则只需要把统计代码添加到tap事件里即可。

1
2
3

$('#download').tap(function(){
  sendData('btn.download'); // 数据上报的统计代码
});

一般情况下，数据上报的统计代码就是往数据库插一条带有特殊标识（如btn.download）的记录，而不同的数据监控系统给出的上报函数不同。

什么数据需要埋点？
从网页可以捕获到很多的数据信息，但并不是每个信息都是有用的，根据项目具体的需求，分类进行数据埋点，最终才能获取最有用的数据进行研究。

网页一般有什么数据需要进行埋点？
PV/UV

• PV（Page View），页面被访问的次数
• UV（Uniqua View），页面被访问的人次数，网站一般是通过cookie区分不同人次数的，所以一般一台终端（手机、PC）在一段实际内会被记录为一个人次数。

PV/UV的统计比较简单，很多现有的统计工具首先统计的就是页面的PV/UV，只需要在统计工具里添加相应站点，然后在页面引入一段js代码就可以在展示端看到数据。

如腾讯云分析,设置添加站点后，会生成一段带有站点sid的js代码，添加进页面，即可查看网站的实时数据，次日可以查看昨日的全部数据。

关键转化率
转化率一般用来衡量一个时间段内，特定的用户行为量和页面流量的比率。

每个网页的制作都是有一定目的的，如某些游戏上线初期的拉新页面，目的是推广游戏，让新用户下载，那么这个页面的关键数据信息是“下载游戏”按钮的点击率，可以看出页面给游戏带来多少下载量。
又如，游戏新版本上新角色宣传页面，目的是推广角色并进行购买，页面的购买角色的按钮的点击率就是关键，可以看出页面向购买页面的引流。
有活动需要做宣传页面，密度是让更多人知晓这个活动的信息，页面会放一个引导用户分享的按钮，这个按钮的其中一个关键数据信息是分享按钮的点击率，可以看出页面给活动带来多少宣传效果。
…

页面各有目的，页面的关键数据也不一样，但都可总结为“某按钮的点击率”，那么他们的数据采集方法是一致的，只是上报的标志不一样。一般来说，在同一个数据统计平台，这类上报的方式是一致的，只是需要注意用不同的标签区分不同的按钮，同时让自己知道这个标签的含义即可，如btn.open， btn.download, btn.share等。

页面用户行为
研究页面用户行为，可以为后续制作移动页面带来经验性参考，例如，经过研究，发现用户在一天中更集中在中午12点和晚上10点查看图文消息或朋友圈的链接，之后我们的活动推送时间都尽量参考这个时间结论，因此可以获得很好的数据反馈。

而现实中，用户行为远远不是如此简单的，除了常规的按钮点击，每屏的触达率，每屏的回翻率、每屏的停留时长等，带动画的图片点击（点击没有任何反馈的修饰性元素），摇晃手机的行为等，不同的页面用户可能会有不同的行为表现，根据最后的数据总结需求，尽可能全面地考虑各种情况，在适当的位置加上数据埋点即可，前期数据埋点越全面，后面手机总结的时候就越多可以挖掘的地方。

通过实例来说明一个移动页面可以收集多少用户行为：
某酷跑游戏新角色宣传专题
除了页面的PV/UV和打开游戏按钮的点击率外，这个页面还有如下数据可以收集：

每屏触达率、每屏回翻率
这是一个单屏滑动页面，用户会滑动到第几屏代表着页面内容的曝光率有多少，并且页面最重要的按钮“打开游戏APP”是放置在最后一屏的，有多少用户触达到最后一屏是非常重要的研究数据。
需要在组件执行滑动完成的时候，给一个数据上报：

1
2
3
4
5
6
7
8
9
10
11
12

window.pageSlider = new mo.PageSlide({
  target: $('#section.sec'),
  event: {
    change: function(e){
      if(this.curPage !== this.prevPage){
        curPageNum = this.curPage;
        // 数据上报：第几屏到第几屏，即可统计每屏触达率，又可统计每屏回翻率
        sendData('page.'+this.prevPage+'to'+this.curPage);
      }
    }
  }
});

变浪按钮点击率
每屏都有一个“变浪”按钮，点击会在当前屏显示新画面，对这些按钮进行数据监考，可以了解到按钮的设计和位置摆放是不是能引起浏览者的注意和兴趣。

1
2
3

$('#lang').tap(function(){
  sendData('btn.lang'+curPageNum); // curPageNum是当前屏数，在滑动组件中定义
});

晃动手机
最后一个变浪按钮完成会提示摇一摇手机，最后落地到新角色上，晃动手机会显示最后一屏，换屏成功说明晃动的动作被捕捉成功，可以在最后一屏显示的函数里添加数据上报。

1
2
3
4

function secAppear(){
  $('.sec04 .appear').show();
  sendData('gesture.shake');
}

每屏停留时长
收集每屏的停留时长可以看出用户对那个内容更感兴趣，是对后续页面设计有用的一个参考数据。

数据分析平台可以网上搜索一番，很多可用的。