Vue3+ts使用sensors(神策)进行埋点

Vue3+ts使用sensors(神策)进行埋点

1.下载 sa-sdk-javascript.js

npm install sa-sdk-javascript@1.25.1 --save

2.配置 sensors

utils目录下新建sensors_config.ts

import sensors from "sa-sdk-javascript";
sensors.init({
  server_url: "", // 这里填写申请的地址
  is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
  use_client_time: true,
  show_log: import.meta.env.VITE_APP_ENV !== 'prod', // 是否显示埋点输出
  send_type: "ajax",
  heatmap: {
    //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    clickmap: "not_collect",
    //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
    scroll_notice_map: "default",
  },
});
sensors.registerPage({
  // 这里配置成自己项目的
  platformCode: "",
  appCode: "",
  businessCode: "",
});
// 导出埋点配置
export default sensors;

3. main.ts 引入并注册

import sensors from '@utils/sensors_config'
const app = createApp(App);
app.config.globalProperties.$sensors = sensors;

4. 页面使用

import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()

// 计算总金额
const countTotalPrice = () => {
  proxy.$sensors.track('$WebClick', {
    $element_id: 'choice_goods_ID',
    pageid: 'car'
  })
}