跳到主要内容

H5

安装 SDK​

npm install @eventtracing/web

引入 SDK​

import EventTracing from '@eventtracing/web';

初始化 SDK​

埋点开始前，需要先初始化曙光 SDK，配置上报通道、页面事件等。

import EventTracing from '@eventtracing/web';

EventTracing.init({
    ... // 其他参数
    reportLogs: ({ logs }) => {
        // 发送 http 请求或通过客户端协议上报 logs
    },
});

初始化详细参数，请参考：初始化。

开始埋点​

曙光埋点方案基于虚拟树实现，因此除个别不依赖节点的埋点之外，都必须基于节点才能正常埋点。

Web 端需要埋点的节点上必须具有有效的 data-log 属性，每个具有 data-log 属性的节点会被认为是一个埋点的关键节点，每个埋点通过 data-log 属性来埋入埋点任务所要求的参数。

import React, { useEffect } from 'react';
import EventTracing from '@eventtracing/web';

export default () => {
  useEffect(() => {
    EventTracing.init({
        ... // 初始化配置
    });
  }, []);

  return (
    <div
      data-log={JSON.stringify({
        oid: 'page_web_test',
        isPage: true,
        events: ['_pv', '_pd'],
      })}
    >
      <div
        data-log={JSON.stringify({
          oid: 'btn_web_test',
          events: ['_ev', '_ec'],
        })}
      >
        我是一个埋点节点，点我打点击事件（_ec）
      </div>
    </div>
  );
};