mip-analytics

优质

小牛编辑

135浏览

2023-12-01

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

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

示例

基本用法

每种事件可以配置多个

<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 和变量配置的方式就可以进行页面展示的统计

<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 中使用，如下所示：

"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 级对象中有内建变量，会被直接序列化为字符串，不会替换。