BuryingPoint 埋点

使用方式

import Vue from 'vue';
import { BuryingPoint } from '@polyv/polyv-ui';

Vue.use(BuryingPoint, {
  Sensors: true,
});

一、指令式埋点

通过自定义指令的修饰符来进行各种交互的埋点。

1.1 使用点击事件埋点

<template>
  <div>
    <plv-button v-burying-point.click="'点击了创建直播'">直接传入字符串</plv-button>
    <plv-button v-burying-point.click="clickCreateChannel1BP">使用变量</plv-button>
    <plv-button v-burying-point.click="clickCreateChannel2BP">使用变量且传入属性</plv-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clickCreateChannel1BP: '点击了创建直播',

      clickCreateChannel2BP: {
        event: '点击了创建直播',
        // 传入属性
        data: {
          a: 1,
          b: 2,
        },
      },
    };
  },
};
</script>

1.2 组件的回调事件埋点

通过 v-burying-point.emit-* 来根据自定义组件的回调事件进行埋点，emitKey 为发送埋点时的属性名，emitFilter 为事件的回调参数过滤值，如在 Select 组件的 change 回调事件中发送埋点。

<template>
  <div>
    <plv-select
      v-model="value"
      v-burying-point.emit-change="choicePetBP"
      :options="options"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'cat',
      options: [
        { label: '猫', value: 'cat' },
        { label: '狗', value: 'dog' },
      ],
      choicePetBP: {
        event: '选择了宠物',
        emitKey: '宠物',
        emitFilter: {
          cat: '猫',
          dog: '狗',
        },
      },
    };
  },
};
/**
 * 此时发送的埋点数据为
 * 事件：选择了宠物
 * 属性：宠物
 * 值：猫/狗
 */
</script>

1.3 发送指令前的周期函数

在埋点配置中，传入 beforeSend 方法进行在发送埋点前的数据过滤，例子中 config.emitValue 为自定义组件 change 事件的回调参数，方法中返回新的埋点配置信息时将会使用返回的结果进行发送。

<template>
  <div>
    <plv-select
      v-model="value"
      v-burying-point.emit-change="choicePetBP"
      :options="options"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'cat',
      options: [
        { label: '猫', value: 'cat' },
        { label: '狗', value: 'dog' },
      ],
      choicePetBP: {
        event: '选择了宠物',
        beforeSend: (event, data, config) => {
          console.log(config);
          config.data = {
            '宠物': config.emitValue === 'cat' ? '猫' : '狗',
          };
          return config;
        },
      },
    };
  },
};
</script>

1.4 埋点配置类型

type buryingPointConfig = {
  event?: string,
  data?: Record<string, any>,
  beforeSend?: (event?: string, data?: Record<string, any>, config?: Omit<config, 'beforeSend'>) => any,
  emitKey?: string,
  emitFilter?: Record<string, any> | ((value: any) => any),
};

二、JS式发送埋点

<template>
  <plv-button @click="sendBuryingPoint">创建直播</plv-button>
</template>

<script>
export default {
  methods: {
    sendBuryingPoint() {
      this.$buryingPoint.track('保存并创建直播', {
        '停留时长': 180,
        '是否选择直播时间': true,
        '场景': '大班课',
        '是否有上传直播封面': false,
        '连麦人数': 12,
      })
    }
  }
};
</script>

开启神策调试模式

在页面链接中传入 query 参数 buryingPointDebug=1，即可开启神策控制台打印模式。

例如：https://console.polyv.net/live/?buryingPointDebug=1#/channel

Install Options

参数	说明	类型	可选值	默认值
Sensors	是否开启神策埋点，传入true时使用内置的init配置，传入对象时使用传入的init配置	Object	Boolean	-
platformType	平台类型	String	-	-
platformName	平台名称	String	-	-