埋点方案简介

更新时间：2018/09/29 访问次数：2327

ISV在页面开发阶段或完成时，需要进行一些数据上报的埋点，这里介绍一下如何在代码中进行埋点。

前置要求：

web埋点sdk最低版本要求：0.0.25

<script src="//g.alicdn.com/tida/tida-rop/0.0.25/tida-rop.min.js"></script>

一、埋点介绍

当前，埋点是基于html的标签的属性埋点，先来看一个正确的，完整的埋点示例（支付按钮）：

<button 
 data-rop-event="CLICK" 
 data-rop-action="BUY_CLICK"
 data-rop-extra='{"item_id": "572298919999"}'
>
 确认购买
</button>

从上面的示例可以看到button标签中有三个data-*自定义属性，代表的含义如下表：

属性	含义
data-rop-event	事件属性：如果一个标签需要响应点击事件，增加此属性，注意：值为“CLICK”
data-rop-action	行为属性：代表触发的行为含义，如支付购买“BUY_CLICK”
data-rop-extra	数据属性：一些需要上报的自定义属性，注意：值为JSON字符串

二、如何埋点

上面已经介绍了埋点的三个自定义标签属性和其值，那对ISV开发的页面要怎么去埋点？目前官方提供的rop-cli脚手架支持三种开发技术栈，分别是React、Vue和无框架的js开发。

1、Vue埋点示例，这里要注意一下data-rop-extra属性用了v-bind的简写形式，并且其值用JSON.stringify转成标准的JSON字符串，并且外层是单引号

<template>
  <ul class="item-list">
    <li v-for="item in items"
      :key="item.id"
      data-rop-event="CLICK"
      data-rop-action="ITEM_CLICK"
      :data-rop-extra='JSON.stringify({item_id: item.id})'
    >
      <img :src="item.url" />
      <div>{{item.title}}</div>
      <div class="price">￥ {{item.price}}</div>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      items: []
    };
  },
  created() {
    Tida.rop.call("vendor.getItemList").then(
      ({ items }) => {
        this.items = items;
      },
      err => {
        console.error(err);
      }
    );
  }
};
</script>

2、React埋点示例

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
    };
  }

  componentDidMount() {
    Tida.rop.call('vendor.getItemList').then(({ items }) => {
      this.setState({ items });
    }, (err) => {
      console.error(err);
    });
  }

  render() {
    const { items } = this.state;
    return (
      <Fragment>
        <ul className="item-list">
          {
            items.map((item) => {
              return (
                <li key={item.id}
                  data-rop-event="CLICK"
                  data-rop-action="ITEM_CLICK"
                  data-rop-extra={JSON.stringify({item_id: item.id})}
                >
                  <img src={item.url} />
                  <div>{item.title}</div>
                  <div className="price">￥ {item.price}</div>
                </li>
              );
            })
          }
        </ul>
        <div className="rop">
          <div className="title">Hello Rop!</div>
          <img className="logo" src="https://img.alicdn.com/tfs/TB1oqARCamWBuNjy1XaXXXCbXXa-258-140.png" />
        </div>
      </Fragment>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById('app'));

3、原生js（可用jquery/zepto）示例，特别注意：data-rop-extra值的外层是单引号

Tida.rop.call('vendor.getItemList').then(function (data) {
  renderItemList(data.items);
}, function (err) {
  console.error(err);
});


function renderItemList(items) {
  let tpl = '';

  items.forEach(function (item) {
    tpl += `
      <li data-rop-event="CLICK" data-rop-action="ITEM_CLICK" data-rop-extra='${JSON.stringify({item_id: item.id})}'>
        <img src="${item.url}" />
        <div>${item.title}</div>
        <div class="price">￥ ${item.price}</div>
      </li>
    `
  });

  document.querySelector('.item-list').innerHTML = tpl;
}

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

智能硬件

埋点方案简介

一、埋点介绍

二、如何埋点

FAQ