mip-analytics

优质
小牛编辑
136浏览
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 级对象中有内建变量,会被直接序列化为字符串,不会替换。