Vue实现神策数据H5项目全埋点

在Vue H5项目中实现神策数据全埋点，按照以下步骤进行：

1. 安装SDK：

   • 可以通过CDN直接引入神策SDK：

     <script src="https://cdn.jsdelivr.net/npm/sa-sdk-javascript@1.15.26/sensorsdata.min.js"></script>
     

   • 或者使用npm安装SDK：

     npm install --save sa-sdk-javascript
     

2. 项目配置：

   • 在项目的utils文件夹下新建sensors.js文件，配置神策SDK：

     import sensors from 'sa-sdk-javascript';
     const UI_VERSION = "u2024.12.0";
     
     /**
      * 神策SDK初始化
      * @param businessType 埋点默认业务线
     */
     export const init = (businessType: string): void => {
         sensors.init({
           server_url: 'http://shence.ap-ec.cn:8106/debug', // 数据接收地址
           is_track_single_page: true, // 单页应用页面浏览事件采集(url改变就触发)
           use_app_track: true,
           show_log: false, // 控制台显示数据开
           heatmap: { // 热图设置 default开启 not_collect关闭
             clickmap: 'default', // 点击热图，收集点击事件，
             scroll_notice_map: 'default', // 视区热图，收集页面区域停留时间
           }
         });
     
         // 神策 SDK 初始化完成，公共属性埋点
         sensors.registerPage({
           platform_type: "H5",
           app_name: 'H5系统',
           business_type: businessType || "",
         });
         sensors.use("PageLoad", {});
         // 自动采集事件埋点：主要用于主动触发页面浏览事件，一般只在页面配置后调用一次即可
         sensors.quick('autoTrack'); 
     };
     
     /**
      * 神策自定义埋点
      * @param eventName 事件名称
      * @param properties 上报数据
      */
     function addBuriedPoint(eventName: string, properties = {}): void {
       sensors.track(eventName, properties);
     }
     
     export function addRegisterPage(properties = {}): void {
       sensors.registerPage(properties);
     }
     
     /**
      * page_view 系统页面浏览
      * @param properties
      */
     export function pageView(properties = {}): void {
       addBuriedPoint("Page_view", properties);
     }
     
     /**
      * Page_duration 页面停留时长
      * @param properties
      */
     export const pageDuration = (properties = {}) => {
       addBuriedPoint("Page_duration", { ...properties, ui_version: UI_VERSION });
     };
     
     /**
      * popup_click APP弹窗点击
      * @param properties
      */
     export const popupClick = (properties = {}) => {
       addBuriedPoint("popup_click", { ...properties, ui_version: UI_VERSION });
     };
     
     /**
      * Info_center_click 系统中心页点击
      * @param properties
      */
     export const pageCenterClick = (properties = {}) => {
       addBuriedPoint("Info_center_click", { ...properties, ui_version: UI_VERSION });
     };
     
     /**
      * Info_center_news_click  系统中心具体元素点击
      * @param properties
      */
     export const pageCenterNewsClick = (properties = {}) => {
       addBuriedPoint("Info_center_news_click", { ...properties, ui_version: UI_VERSION });
     };
     
     /**
      * Info_center_news_setting_type  系统中心推送设置点击
      * @param properties
      */
     export const pageNewsSettingClick = (properties = {}) => {
       addBuriedPoint("Info_center_news_setting_type", { ...properties, ui_version: UI_VERSION });
     };
     
     /**
      * Info_center_column_setting  系统中心栏目设置（设置为已读）
      * @param properties
      */
     export const pageColumnSettingClick = (properties = {}) => {
       addBuriedPoint("Info_center_column_setting", { ...properties, ui_version: UI_VERSION });
     };
     
     /**
      * Info_center_news_push_open  系统推送开启
      * @param properties
      */
     export const pageNewsPushOpenClick = (properties = {}) => {
       addBuriedPoint("Info_center_news_push_open", { ...properties, ui_version: UI_VERSION });
     };
     
     

   • 在main.js文件中，将神策埋点信息挂载到Vue实例下：

     import { init } from "@/utils/sensors.js";
     const isNotDev = import.meta.env.MODE !== "development";
     isNotDev && init("默认业务线");
     

3. 埋点实现：

   • 事件埋点：Vue组件调用：事件名+传递参数（必须是对象）

     import {
       pageView,
       pageDuration,
       pageCenterNewsClick,
     } from "@/utils/sensors.js";
     const sensorsStartTime = ref(0); // 开始时间
     const sensorsEndTime = ref(0); // 结束时间
     
     // 进入页面
     onBeforeMount(() => {
       sensorsStartTime.value = Number(new Date());
       pageView({
         page_title: listItem.value.menuName,
         Page_from: route.query.Page_from || "",
       });
     });
     
     const handleSheet = () => {
       showSheet.value = true;
       pageCenterNewsClick({
         Page_from: route.query.Page_from || "",
         page_title: listItem.value.menuName,
         fin_icon_section: "顶部",
         fin_icon_name: "三个点设置",
         Info_center_news_type: menuNames.join(","),
       });
     };
     
     // 离开页面
     onBeforeUnmount(() => {
       sensorsEndTime.value = Number(new Date());
       pageDuration({
         page_title: listItem.value.menuName,
         is_login: isLogin,
         event_duration: (sensorsEndTime.value - sensorsStartTime.value) / 1000,
       });
     });
     

   • 给点击事件加触发埋点，使用Vue的自定义指令：

     const saclick = Vue.directive('saclick', {
       bind: (el, binding) => {
         el.addEventListener('click', () => {
           const clickName = binding.value.clickName;
           const data = binding.value.clickData || {};
           this.$sensors.track(clickName, data);
         });
       }
     });
     

4. 测试与验证：

   • 实施埋点后，需要进行实际的操作以验证数据是否被正确捕获。可以通过神策数据的后台查看数据是否上传成功。