Vue3项目的埋点统计，神策SDK接入

您所在的位置：网站首页 › 神策平台怎么用 › Vue3项目的埋点统计，神策SDK接入

Vue3项目的埋点统计，神策SDK接入

2024-03-20 05:54| 来源: 网络整理| 查看: 265

以下是基本的步骤：

1. 安装神策SDK

可以通过npm或yarn安装，命令如下：

npm install sa-sdk-javascript --save yarn add sa-sdk-javascript

2. 配置SDK

在入口文件`main.js`中引入SDK并进行配置：

import SA from 'sa-sdk-javascript' SA.init({ server_url: 'YOUR_REGISTER_SERVER_URL', // 注册地址 heatmap: { // 是否开启点击图，default 是 false clickmap: true, // 是否开启触达注意力图，default 是 false scroll_notice_map: true, // 是否开启触达留存力图，default 是 false scroll_duration_map: true }, web_url: '', disable_cookie: false, is_persistent_save: false })

请将YOUR_REGISTER_SERVER_URL替换为你在神策后台申请的注册地址，同时这里也开启了SDK的三种可选的页面分析功能，点击图，触达注意力图和触达留存力图。

在main.js中使用app.config.globalProperties将发送埋点事件的方法挂载到全局实例上：

import sa from 'sa-sdk-javascript' import App from './App.vue'; const saConfig = { name: 'saLogin', // 指定埋点方法名 server_url: 'YOUR_REGISTER_SERVER_URL', // 注册地址 heatmap: { // 是否开启点击图，default 是 false clickmap: true, // 是否开启触达注意力图，default 是 false scroll_notice_map: true, // 是否开启触达留存力图，default 是 false scroll_duration_map: true } } const app = createApp(App); // 初始化神策 sa.init(saConfig); app.config.globalProperties.$sensors = sa; // 挂载神策SDK到全局实例上 app.config.globalProperties.$sensorsTrack = function(eventName, properties) { // 发送埋点事件 this.$sensors.track(eventName, properties); }; import { defineComponent, getCurrentInstance, onMounted } from 'vue'; this.$sensorsTrack('viewMyComponent', { foo: 'bar' }); export default defineComponent({ name: 'MyComponent', setup() { const { proxy } = getCurrentInstance(); onMounted(() => { proxy.$sensorsTrack('viewMyComponent', { foo: 'bar' }); // 发送埋点事件 }); }, });

3. 埋点记录

在需要记录事件的地方，可以直接调用SDK的track方法，将事件和属性传递给它：

proxy.$sensorsTrack('click', {buttonName: '登录按钮'}) // 记录一个名为'click'的事件和一个按钮名称属性

这样，就可以对用户的操作进行统计和分析了。

监测页面路由切换时发送浏览量事件在 Vue 项目中，路由切换一般是通过 vue-router 实现的。可以在路由切换时通过调用 $sa.track('$pageview') 发送一个浏览量事件： import Vue from 'vue' import VueRouter from 'vue-router' import sa from './sa-sdk-javascript' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) router.beforeEach((to, from, next) => { sa.track('$pageview', { title: to.name, url: window.location.origin + to.fullPath }) next() })

通过上述，就可以在 Vue 项目中进行神策监测页面浏览量了。

【本文地址】

Vue3项目的埋点统计，神策SDK接入

Vue3项目的埋点统计，神策SDK接入

今日新闻

推荐新闻