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

以下是基本的步骤：

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: '<your_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'的事件和一个按钮名称属性

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

监测页面

1. 路由切换时发送浏览量事件
   在 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 项目中进行神策监测页面浏览量了。