mip-analytics

标题内容
类型
支持布局
所需脚本https://c.mipcdn.com/static/v2/mip-analytics/mip-analytics.js

MIP 提供了性能数据以帮助开发者了解自己当前自己的 MIP 页面的性能情况,可以通过 <mip-analytics> 组件发日志到自己的统计服务端进行统计。并且开发者可以通过定制配置信息对一些 DOM 元素或者组件的交互(目前支持点击事件)进行统计。而且还可以进行轮询(setInterval 机制)的日志发送,实时了解页面的交互状态。

示例

基本用法

每种事件可以配置多个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<div class="className1"> <button data-click="{button: 1}"> BUTTON 1</button> <button data-click="{button: 2}"> BUTTON 2</button> </div> <div class="className2" data-click="{div: 'className2'}"> <button>BUTTON 3</button> </div> <mip-analytics> <script type="application/json"> { "hosts" : { "className1": "https://some-log-host.com/some-log-path/div1?", "disp": "https://some-log-host.com/${disp}?", "className2" : "https://some-log-host.com/_${div2}.gif?" }, "setting" : { "click" : [ { "selector" : ".className1", "tag": "button", "host" : "className1", "queryString" : { "name" : "className1", "mipstart" : "${MIPStart}", "list": { "age":"123" } } }, { "selector" : ".className2", "host" : "className2", "queryString" : { "name" : "className2", "mipstart" : "${MIPStart}", "list": { "age":"45" } } }, { "selector" : ".className3", "host" : "className3", "queryString" : {}, "vars" : { "div2" : "divfdsf" } } ], "disp" : [ { "host" : "disp", "queryString" : { "MIPStart" : "${MIPStart}", "MIPPageShow" : "${MIPPageShow}", "MIPDomContentLoaded" : "${MIPDomContentLoaded}", "MIPFirstScreen" : "${MIPFirstScreen}" }, "vars" : { "disp" : "displog" } } ], "timer" : [ { "host" : "className2", "queryString" : { "timer" : "timer" }, "vars" : { "div2" : "div2" }, "option" : { "interval" : 2000 } } ], "scroll" : [] } } </script> </mip-analytics>

指定封装好的统计工具

以 Alexa Metrics 为例,直接通过指定 type 和变量配置的方式就可以进行页面展示的统计

1
2
3
4
5
6
7
8
9
10
<mip-analytics type="alexametrics"> <script type="application/json"> { "vars": { "atrk_acct": "xxxx", "domain": "xxx.oo" } } </script> </mip-analytics>

todo: 可以扩展更多的统计工具

配置参数

hosts

说明:指定用到的 log server 地址,用以后面配置复用

必选项:是

类型:键值对

取值范围:HTTPS

setting

说明:配置日志发送

必选项:是

类型:键值对

setting.click

说明:配置点击事件

必选项:否

类型:Array

setting.click.selector

说明:指定触发点击的选择器

必选项:是

类型:CSS 选择器

setting.click.tag

说明:指定触发点击的选择器,有此属性时,setting.click.selector 为选择器父节点,点击事件绑定在父节点上

必选项:是

类型:CSS 选择器

setting.click.host

说明:指定日志发送的 log server,可以使用插值变量占位,${varName},在 vars 中指定真实值。 插件使用图片伪装请求。host 应该是一个图片地址,一般是 GIF。如 https://logserver.com/mylog.gif?

必选项:是

类型:hosts 参数中的 key

setting.click.queryString

说明:指定 host 的 querystring,一级属性序列化为 & 链接的参数,二级对象属性会被序列化为 JSON 字符串。可以支持一些内建变量,目前支持 MIP 速度信息以及 performance API 的一些信息,以下 MIP 性能内建变量会返回时间戳。

  • "${MIPStart}"
  • "${MIPPageShow}"
  • "${MIPDomContentLoaded}"
  • "${MIPFirstScreen}"
  • ...

除上述示例描述之外,mip-analytics 还提供详细的页面数据和性能数据以供在 queryString 中使用,如下所示:

1
"navigationStart","unloadEventStart","unloadEventEnd", "redirectStart", "redirectEnd", "fetchStart", "domainLookupStart", "domainLookupEnd", "connectStart", "connectEnd", "secureConnectionStart", "requestStart", "responseStart", "responseEnd", "domLoading", "domInteractive", "domContentLoadedEventStart", "domContentLoadedEventEnd", "domComplete", "loadEventStart", "loadEventEnd", "MIPStart", "MIPPageShow", "MIPDomContentLoaded", "MIPFirstScreen", "browserLanguage", "canonicalHost", "canonicalHostname", "canonicalPath", "canonicalUrl", "documentReferrer", "documentCharset", "isIframe", "isShow", "mipVersion", "mipdocHost", "mipdocHostname", "mipdocPath", "mipdocUrl", "pageId", "queryParam", "random", "screenColorDepth", "screenWidth", "screenHeight", "scrollTop", "scrollHeight", "scrollLeft", "scrollWidth", "sourceHost", "sourceHostname", "sourcePath", "sourceUrl", "isStandalone", "timestamp", "timezone", "timezonCode", "title", "userAgent", "viewportWidth", "viewportHeight"

必选项:否

类型:键值对

setting.click.vars

说明:指定 host 的插值变量的真实值,替换格式为 ${varName},如果是内建变量可以不用指定值,会自行替换。

必选项:否

类型:键值对

setting.touchstart

说明:完全同 click

setting.timer

说明:定时发送日志设置

必选项:否

类型:Array

setting.timer.host

说明:同click.host

setting.timer.data

说明:同click.data

setting.timer.option.interval

说明:指定定时器间隔

必选项:否

类型:数字

单位:ms

默认值:4000ms

注意事项

  • 注意是标准 JSON,属性名,属性值都要用双引号。

  • 统计框架会默认传入一级参数 t,为发送日志的时间。

  • host 地址需要是 HTTPS 的。

  • vars 和 queryString 是为了方便使用方重复利用变量并且保证灵活性,最好是 vars 用于 host 部分,queryString 用于参数部分,或者只选择其一。重叠使用时需要注意图们之间是否有交叉。框架会先替换 vars 再拼接 queryStirng。

  • vars 只支持简单数据类型,复合数据类型会返回空字符串。

  • queryString 内建变量只支持一级参数替换,2 级对象中有内建变量,会被直接序列化为字符串,不会替换。