开发者文档 | 开发者文档

埋点配置化

原理

通过在原型链劫持click事件，并在事件后处理后面添加一段代码逻辑的方式，
实现无代码入侵的配置化埋点。

通过在原型链劫持click事件，并在事件后处理后面添加一段代码逻辑的方式，
实现无代码入侵的配置化埋点。

配置文件

src/investoday/eventTracking/EventTrackConfig.ts

普通埋点事件配置（不需要动态参数的）

1、vue文件：配置dom的id(必须)，为EventTrackingMap的key

vue

<view
        id="event-track-default"
        class="link"
        @tap.stop="test2()"
  >
    埋点测试普通事件
  </view>

<view
        id="event-track-default"
        class="link"
        @tap.stop="test2()"
  >
    埋点测试普通事件
  </view>

2、EventTrackConfig.ts

// 参考EventTrackingMap中event-track-default配置
'event-track-default': {
    buttonName: '默认事件',
    pageName: 'indexPage',
},
/**
 * 默认回调（根据项目情况自己修改）
 * map 中对应如果没有写func，则调用默认回调
 * @param params
 */
export const defaultCallBack = (params: EventDetailsParam) => {
    Analysis.clickBtn(params.buttonName, params.pageName);
};

// 参考EventTrackingMap中event-track-default配置
'event-track-default': {
    buttonName: '默认事件',
    pageName: 'indexPage',
},
/**
 * 默认回调（根据项目情况自己修改）
 * map 中对应如果没有写func，则调用默认回调
 * @param params
 */
export const defaultCallBack = (params: EventDetailsParam) => {
    Analysis.clickBtn(params.buttonName, params.pageName);
};

需要动态获取参数的埋点

1、vue文件，动态参数用dataset传递,如下例中的data-stock-name，data-stock-code

vue

<view
    id="event-track-cus"
    class="link"
    data-stock-name="平安银行"
    data-stock-code="000001"
    @tap.stop="test()"
    >
        埋点测试个性化传参 平安银行点击
    </view>

<view
    id="event-track-cus"
    class="link"
    data-stock-name="平安银行"
    data-stock-code="000001"
    @tap.stop="test()"
    >
        埋点测试个性化传参 平安银行点击
    </view>

2、EventTrackConfig.ts,参考EventTrackingMap中event-track-cus配置

// 事件监听中会将对应的dataset中的赋值给对应的event-track-cus中同名参数
// 2.func为自定义埋点方法,如果对象中有func属性,优先调用自定义的埋点方法
 'event-track-cus': {
        buttonName: '个性化回调',
        pageName: 'indexPage',
        stockCode: '',
        stockName: '',
        get func() {
            return Analysis.clickBtn(
                this.buttonName,
                this.pageName,
                this.stockCode,
                this.stockName
            );
        },
    },

// 事件监听中会将对应的dataset中的赋值给对应的event-track-cus中同名参数
// 2.func为自定义埋点方法,如果对象中有func属性,优先调用自定义的埋点方法
 'event-track-cus': {
        buttonName: '个性化回调',
        pageName: 'indexPage',
        stockCode: '',
        stockName: '',
        get func() {
            return Analysis.clickBtn(
                this.buttonName,
                this.pageName,
                this.stockCode,
                this.stockName
            );
        },
    },

注意

按规范开发

1、配置dom的id(必须)，为EventTrackingMap的key
2、埋点的方法要阻止冒泡 @click.stop
3、规范：dom中的id命名要以event-track-开头，后面加业务名称
4、如果埋点需要全局的参数，可以写在store中引进来

埋点配置化 ​

原理 ​

配置文件 ​

普通埋点事件配置（不需要动态参数的） ​

需要动态获取参数的埋点 ​

注意 ​

埋点配置化

原理

配置文件

普通埋点事件配置（不需要动态参数的）

需要动态获取参数的埋点

注意