项目中接入神策埋点

最新推荐文章于 2025-03-27 09:25:09 发布

阳光下的小蒙

最新推荐文章于 2025-03-27 09:25:09 发布

阅读量1.5k

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/sunlight_01/article/details/135346024

本文详细介绍了如何在React和Vue项目中接入神策免费埋点服务，包括依赖安装、环境配置、初始化步骤、页面使用方法以及普通点击和页面曝光事件的跟踪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中接入神策埋点（免费），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();
});