项目中接入神策埋点

发布时间:2024年01月02日
项目中接入神策埋点(免费),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();
});

文章来源:https://blog.csdn.net/sunlight_01/article/details/135346024
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。