HTML5监测SDK接入指南
<h3>HTML5接入说明</h3>
<pre><code class="language-java">HTML5监测SDK是一款对移动端HTML5应用专业分析统计工具，支持普通的html页、微信内打开HTML5页等;
开发者注册后快速简洁的集成一段js sdk代码，就能掌控HTML页面访问情况、洞察用户行为。</code></pre>
<hr />
<h3>SDK接入</h3>
<ul>
<li>
<p>Step1 用户进入系统，创建『H5活动』
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/459e06b1fd2329152dd4b47423fea248?showdoc=.jpg" alt="" /></p>
</li>
<li>
<p>Step2 录入活动『相关属性』</p>
<pre><code class="language-java">活动名称 *必填
活动品牌 *必填
活动分类 *必填
活动链接 *必填
活动日期 *必填</code></pre>
</li>
<li>
<p>Step3 H5活动创建完成，生成如下的『异步分析代码』</p>
<pre><code class="language-java"><script type="text/javascript">
_mnt=window._mnt||[];
(function() {
var mz = document.createElement("script");
mz.src = "//monitor.pg.com.cn/wxTracker.js?mznqw4jn";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(mz, s);
})();
</script></code></pre>
<p>a.『monitor.pg.com.cn/wxTracker.js 』为SDK服务地址；『mznqw4jn』为活动唯一ID。
b. 此代码以异步加载形式进行加载，可以真正做到<strong>对网站打开速度完全没有影响</strong>，使用该代码能够大幅提升网站的打开速度，也可提升统计数据的准确性。</p>
</li>
<li>
<p>Step4 『异步分析代码』接入</p>
<pre><code class="language-java">a. 复制 Step3中的异步代码；
b. 将复制的异步代码安装到网站全部页面的</head>标签之前，至此可完成基础指标的统计上报；
c. 如需在JS文件中调用分析代码，直接去掉代码首尾的<script type="text/javascript">和</script>，放入JS中即可。</code></pre>
<pre><code class="language-java">// 代码安装注意点
1.代码的安装位置要正确，请将异步分析代码安装在标签</head>标记前。
2.一个页面中不要重复安装相同的代码，统计有去重规则，一般不会重复计算。一段代码生效后，另外一段代码就会废弃，但建议只安装一段代码。
3.不要对代码有任何编辑操作，随意编辑代码会导致代码无法成功执行，且可能影响到网站页面的显示。
4.在网站的所有落地页都必须安装代码，重点是推广URL页面、转化目标及相关路径页面。
5.刚注册完毕有20分钟内上报可能会出现502，是注册应用未同步的原因，属正常情况。</code></pre>
</li>
<li>Step5 确认是否完成上报
<pre><code class="language-java">在浏览器的network中有发起收数域名一致(http(s)://www.pg.com.cn/monitor/e.gif)的请求，并且状态码为200，即上报成功。几分钟后可在产品系统中查看相应的H5活动数据。</code></pre></li>
</ul>
<hr />
<h3>高级功能</h3>
<h4>分页监测</h4>
<pre><code class="language-java">// 分页监测适用于一个 URL 有多个「页面」，页面间通过滑动手机屏幕进行切换；目前主流微信 Html5 活动均采用该种方式；默认_mnt.push(["_setAutoPageview",true)，即每个页面自动监测。
a. 在基础代码 _mnt=window._mnt||[]; 下增加 _mnt.push(["_setAutoPageview",false]); 代码，如下图：</code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/21f1d1f4a00f89764702eb7972a783ef?showdoc=.jpg" alt="" /></p>
<pre><code class="language-java">// 添加分页代码
b. 在滑动翻页时，调用如下代码：_mnt.push(['_trackPageview',pageUrl,pageName]);
例如：例如，在某个活动页面，当用户向上滑翻页时，会切换到「登录页」，我们希望监测「登录页」的 PV、停留时长等数据，就可以在响应点击事件时调用该接口。
<a id="login" onclick="_mnt.push(['_trackPageview', '/H5/login','登录页']);" href="javascript:void(0)">登录页</a></code></pre>
<table>
<thead>
<tr>
<th>参数</th>
<th>是否必填</th>
<th>类型</th>
<th>功能</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>pageUrl</td>
<td>必选</td>
<td>String</td>
<td>指定要统计 PV 的页面 URL</td>
<td>必须是以 “/” 开头的相对路径</td>
</tr>
<tr>
<td>pageName</td>
<td>必选</td>
<td>String</td>
<td>指定要统计 PV 的页面名称</td>
<td>-</td>
</tr>
</tbody>
</table>
<h4>openid和unionId回传</h4>
<pre><code class="language-java">在基础代码_mnt=window._mnt||[]; 下增加_mnt.push(["_setOpenId","o57CGwnsrgnjjuwyJ0JjEYwVzyE4"]);
_mnt.push(["_setUnionId", "o57CGws2NE3dSipzRYQjeGN4KKx8"]);</code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/c408695e736c4b2611f14721ddcefc2c?showdoc=.jpg" alt="" /></p>
<ul>
<li>a. 授权的公众号必须是 <strong>认证的服务号</strong>;</li>
<li>b. 按照微信官方文档《<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842" title="网页授权获取用户基本信息">网页授权获取用户基本信息</a>》获取 OpenID.</li>
</ul>
<h4>微信传播监测</h4>
<pre><code class="language-java">自动调用微信分享接口，标记分享方式（微信好友、朋友圈、QQ好友、QQZone、微博），追踪传播效果。</code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/cfe35ef0da44035e00dd6e3de0d881c9?showdoc=.jpg" alt="" /></p>
<h4>自定义事件上报</h4>
<p>「事件」是指可以独立于网页的加载而进行统计用户与内容进行的互动。例如：按钮点击、文件下载、视频播放等，均可以作为事件进行统计。</p>
<pre><code class="language-java">需要统计某个「事件」数据时，在 JS 中调用事件统计代码
_mnt.push(['_trackEvent', eventName, eventCode(,eventDes,eventValue)]]);</code></pre>
<table>
<thead>
<tr>
<th>参数</th>
<th>必选/可选</th>
<th>类型</th>
<th>功能</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>eventName</td>
<td>必选</td>
<td>String</td>
<td>事件名称</td>
<td>可为中文</td>
</tr>
<tr>
<td>eventCode</td>
<td>必选</td>
<td>String</td>
<td>事件代码</td>
<td>仅支持数字且不能重复</td>
</tr>
<tr>
<td>eventDes</td>
<td>可选</td>
<td>String</td>
<td>事件描述</td>
<td>-</td>
</tr>
<tr>
<td>eventValue</td>
<td>可选</td>
<td>String</td>
<td>事件相关数值</td>
<td>-</td>
</tr>
</tbody>
</table>
<pre><code class="language-java">我们可以使用 _trackEvent 来对「提交」按钮进行统计：
<button type="button" onclick="_mnt.push(['_trackEvent', '提交', 'submit01'])">提交</button></code></pre>
<h4>推广渠道分析</h4>
<ul>
<li>
<p>说明</p>
<pre><code class="language-java">通过在落地页添加"h5_wtm=渠道代码"参数，来标记页面的来源，通常用于营销活动和分享链接的效果跟踪。</code></pre>
</li>
<li>
<p>使用场景</p>
<pre><code class="language-java">a.外部渠道效果分析
访客从营销活动、分享链接、广告等页面跳转至H5应用，通过在url加上渠道ID来识别渠道效果
b.同一个来源页面，多个不同的入口
例如页面A上，点击按钮A1，或者A2，都能到达B页面，为区分A1及A2带来的流量，必须添加不同的渠道ID。</code></pre>
</li>
<li>使用步骤
<pre><code class="language-java">a. 首先添加渠道及渠道代码：进入对应活动，选择导航中的「活动配置」，切换到 「推广渠道」，根据要求填写「渠道名称」和「渠道代码」即可。
b. 将渠道代码参数拼接到推广链接中即可，如「渠道代码」为『miaozhen』，则上述推广链接为：http://wintv.sprite.com.cn/?h5_wtm=miaozhen
c. 默认支持 Google Analytics、百度统计、秒针 SiteMonitor 三款数据监测系统的推广渠道参数标识方法，如果活动中已经使用如上系统对活动渠道进行 URL 标记，则无需再次添加微数的推广渠道监测。</code></pre></li>
</ul>
<h4>指标和维度定义</h4>
<ul>
<li>
<p>指标</p>
<pre><code class="language-java">a. 参与次数：指 h5 活动被打开的次数，退出活动再次打开数据加 1。
b. 参与人数：指 h5 活动被打开的人数，同一人多次参与活动，参与人数不变。
c. 转发次数：指 h5 活动被转发的次数。
d. 转发人数：指 h5 活动被转发的人数，同一个人多次转发，转发人数为 1。
e. 传播层级：指转发过程中的层级关系，如 A 参与活动并转发，那么 A 为该活动的第一层，B 参与 A 的转发并转发，B 就属于 A 的下一层，属于该活动的第二层，依此类推。
f. 平均停留时长：也指参与次数的平均停留时长；计算公式为：参与次数的总停留时长/参与次数。
g. 页面平均停留时长：该页面总停留时长/该页面浏览量。
h. 浏览量(页面浏览量)：页面被浏览的次数（滑动翻页浏览量加1）。
i. 跳出率：只访问一个页面就离开的参与次数/总参与次数。
j. 退出率：从该页面离开的次数/该页面浏览量。
k. 事件数：事件被点击的次数。
l. 唯一用户事件数：事件点击数按用户排重；即，同一个用户点击多次同一个事件，唯一事件数为1。</code></pre>
</li>
<li>
<p>维度</p>
<pre><code class="language-java">a. 渠道：微数监测的推广渠道（代码）。
b. 省份：通过IP判断的省份。
c. 城市：通过IP判断的城市。
d. 客户端：iOS、Android、WP、PC、Other。
e. 事件名称：活动页面中为事件设置的名称及分享行为事件。</code></pre>
</li>
<li>高级
<pre><code class="language-java">// 漏斗分析
a. 衡量用户转化最直观的方式，可以明确用户在核心转化点的流失和转化情况。事件不一定是连续的，只要顺序一致就行。例如一次会话事件的发生顺序为a-b-c-d-e，漏斗规则是a-c-e，则认为该会话完全转化一次（事件顺序子集匹配）
// 路径分析
b. 路径分析通过抽象用户在网站中的访问行为轨迹，并用可视化图表呈现，帮助使用者了解用户在网站上的流动情况。
『全路径图』以某个页面/事件为起点进行分析的路径图，帮助我们了解用户从某个起点开始的行为轨迹。
『转化路径图』以某个页面/事件为终点进行分析的路径图，帮助我们了解用户到达某个终点的行为轨迹。
// 热力图分析
c. 以特殊高亮的形式显示用户的点击位置或用户所在界面位置的图示，针对点击位置不同的点击情况，会使用不同的颜色区分展示。借助热力图，可以直观地观察到用户的总体访问情况和点击偏好。</code></pre></li>
</ul>
<hr />
<h3>HTML5常见问题</h3>
<ol>
<li>
<p><strong>秒针HTML5监测主要统计哪些</strong>？</p>
<pre><code class="language-java">可以监测普通的html页、微信内打开的HTML5页、HTML5活动。</code></pre>
</li>
<li>
<p><strong>秒针HTML5监测是否会拖慢网页速度，是否会影响『H5活动』功能</strong>？</p>
<pre><code class="language-java">不会，原因如下：
1） h5统计只会收集应用信息，不会影响任何应用功能
2） h5统计上报数据是通过JS请求实现的，后台加载，用户不会感知。</code></pre>
</li>
<li>
<p><strong>为什么无法选择更早前的数据</strong>？</p>
<pre><code class="language-java">我们只统计了您创建『H5活动』服务且埋码成功的数据。</code></pre>
</li>
<li><strong>秒针HTML5监测添加后，什么时间可以查看到数据？</strong>？
<pre><code class="language-java">大部分指标在加入统计代码后，如果有用户活动，就能查看到统计数据。 部分指标需要间隔一天汇总。</code></pre></li>
</ol>