项目中接入神策埋点（免费），react和vue通用
1、下包
使用npm 或 yarn 或 pnpm 安装依赖
npm install --save sa-sdk-javascript2、初始化准备：
定义环境变量 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();
});
)
