项目中接入神策埋点

项目中接入神策埋点（免费），react和vue通用

1、下包

使用npm 或 yarn 或 pnpm 安装依赖?

npm install --save sa-sdk-javascript

2、初始化准备：

定义环境变量?VITE_PROJECT_ENV (prod demo test)

3、初始化神策

在 utils?文件夹下新建?sensors.js，配置单页应用的固定代码

import sensors from 'sa-sdk-javascript';


const ENV = import.meta.env.VITE_PROJECT_ENV as string;

if (['test', 'prod', 'dev'].includes(ENV as string)) {
  console.log('ENV', ENV);
  sensors.init({
    server_url: `https://数据接收地址.com/sa?project=${ENV === 'prod' ? 'production' : 'default'}`, // 数据接收地址
    is_track_single_page: true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
    use_client_time: true,
    send_type: 'beacon',
    show_log: false, // 控制台显示数据开
    heatmap: {
      //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
      clickmap: 'not_collect',
      //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
      scroll_notice_map: 'not_collect',
    },
  });

// 公共属性埋点
sensors.registerPage({
  platform_type: 'hd-sensors, // 项目标识
});

sensors.quick('autoTrack'); // 首次触发页面加载事件


export default sensors

4、页面使用?

将神策埋点信息挂载到?vue?实例下

import sensors from '@/utils/sensors.js'
Vue.prototype.$sensors = sensors

或直接通过window获取实例

const sensors: any = window['sensorsDataAnalytic201505' as any];

5、埋点之普通点击事件?

sensors.track('点击事件名'); // 点击

6、埋点之页面曝光

?3s算一次曝光 可写在路由拦截中

let timer: any = null;
let currentRoute: any = null;

router.beforeEach((to, from, next) => {
  // 如果当前路由和上一个路由相同，则不重新计时
  if (to.path === currentRoute) {
    next();
    return;
  }

  // 清除之前的计时器
  clearTimeout(timer);

  // 设置当前路由
  currentRoute = to.path;

  // 开始新的计时器
  timer = setTimeout(() => {
    // 在这里执行曝光统计的逻辑
    console.log('曝光统计', to.path);
    // 神策传参须传递对象
    const payload = { view: to.path };

    sensors.track('事件名', payload);

  }, 3000);

  next();
});