React项目前端神策埋点配置

安装神策分析SDK模块

**二选一即可**
npm install sa-sdk-javascript
yarn add sa-sdk-javascript

初始化配置

1. 在src目录下新建sensorsdata（名字自己定义），现在index.js文件

import sensors from 'sa-sdk-javascript'

sensors.init({
	// 埋点数据要上报的地址
	server_url: 'http://12.99.100.206:8080/sa?project=test',
	// 单页面配置，默认开启，如果页面有锚点设计，需要删除该配置，否则触发锚点会多触发$pageview事件
	is_track_single_page: true,
	// 是否使用客户端本地时间
	use_client_time: true,
	// 是否要在控制台输出log，方便本地调试，上生产记得关闭或者使用变量控制
	show_log: true,
	heatmap: {
		// 是否开启点击图，default表示开启，自动采集$webClick事件，设置not_collect表示关闭
		clickmap: 'not_collect',
		// 是否开启触达图，default表示开启，自动采集$WebStay事件，设置not_collect表示关闭
		scroll_notice_map: 'not_collect',
	}
})

// 项目需要计算页面加载时间，使用此方法种植时间
export const setTrackTime = key => {
	// key为记录时间的标志名，可自己定义，和获取时间差的名字保持一致即可
	if(!key) {
		return
	}
	const time = sensors?.time || {}
	time[key] = Date now()
	sensors.time= time
	return time[key]
}

// 获取时间差

export const getDisTrackTime = key => {
	if(!key) {
		return
	}
	const time = sensors?.time || {}
	const startTime = time[key]
	const endTime = Date.now()
	return endTime - startTime
}

// 上报当前登录用户方法
export const useSensors = () => {
	// 获取用户名
	const username = window.USER_INFO.username
	sensors.login(username)
}

// 把方法挂载到window上
window.$sensors = {
	sensors,
	setTrackTime,
	getDisTrackTime,
}

在项目的app入口文件引入

import { useSensors } from '@/sensorsdata'
const App = () => {
	......
	// 初始化神策
	useSensors()
	.....
}

在需要埋点的地方使用

 onClick = () => {
  	// 种植时间
 	window.$sensors.setTrackTime('lb_click_time')
 	.....
 	window.$sensors.sensors.track('lb_click', {
 		'delay_time': window.$sensors.getDisTrackTime('lb_click_time'),
 		...
 	})
 }