feat(analytics): 优化神策数据插件配置并添加点击跟踪指令

- 修改 usePieChart 钩子，注释掉 console.log 语句
- 更新 sensorsData 插件配置，关闭单页面自动跟踪和滚动热图
- 新增自定义指令 saTrack 用于手动跟踪点击事件
- 在 ImageSlider 组件中应用 saTrack 指令，跟踪轮播图点击

src/hooks/chart/usePieChart.ts

@@ -17,7 +17,7 @@ function useSetPieChart(
   let chartInstance: any;
 
   onMounted(() => {
-    console.log(`1233313123`,dom.value, series.value);
+    // console.log(`1233313123`,dom.value, series.value);
 
     // 检测边界范围 dom 和 series 是否存在
     if (!dom.value || !series.value) return;

src/main.ts

@@ -54,5 +54,31 @@ router.beforeEach((to, from, next) => {
 });
 app.use(createPinia());
 app.use(router);
-app.use(sensorsData());
+// 神策数据插件
+app.use(sensorsData(), {
+  // 单页面配置，默认关闭。开启后自动监听 URL 有变化就会触发 $pageview 事件
+  is_track_single_page: function () {
+    return false;
+  },
+  scrollmap: {
+    // Web 视区停留
+    collect_url: function () {
+      // 根据不同的页面采集不同的数据
+      if (location.href.includes('/ad/')) {
+        console.log('采集广告页面');
+
+        return true;
+      }
+      console.log('不采集');
+      return false;
+    }
+  },
+  heatmap: {
+    //是否开启触达图，default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭。
+    //需要 Web JS SDK 版本号大于 1.9.1
+    scroll_notice_map: 'not_collect',
+    scroll_delay_time: 4000,
+    scroll_event_duration: 18000 //单位秒，预置属性停留时长 event_duration 的最大值。默认5个小时，也就是300分钟，18000秒。
+  }
+});
 app.mount('#app');

src/utils/plugins/sa.ts

@@ -12,26 +12,48 @@ export function sensorsData() {
     install(app: App, options?: SensorsDataOptions) {
       // console.log(`sensorsData install`);
       sensors.init({
-        show_log: true,
         //   server_url: '数据接收地址',
-        is_track_single_page: true, // 单页面配置，默认关闭。开启后自动监听 URL 有变化就会触发 $pageview 事件
+        show_log: true,
+        // 单页面配置，默认关闭。开启后自动监听 URL 有变化就会触发 $pageview 事件
+        is_track_single_page: false,
         use_client_time: true,
         send_type: 'beacon',
         heatmap: {
           //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
-          clickmap: 'default',
+          clickmap: 'not_collect',
           //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
-          scroll_notice_map: 'default'
-        }
+          scroll_notice_map: 'not_collect'
+        },
+        ...options
       });
-      sensors.quick('autoTrack'); //用于采集 $pageview 事件。
+
+      // sensors.quick('autoTrack'); //用于采集 $pageview 事件。
 
       // 注册公共属性
       sensors.registerPage({
         current_url: location.href,
         referrer: document.referrer
       });
-      app.config.globalProperties.$sensorsData = sensors;
+      // app.config.globalProperties.$sensorsData = sensors;
+      app.provide('sensors', sensors);
+
+      // 注册 sa 点击跟踪指令
+      registerDirective(app);
     }
   };
 }
+
+/**
+ * 注册 sa 点击跟踪指令
+ * @param app 应用实例
+ */
+function registerDirective(app: App) {
+  app.directive('saTrack', {
+    mounted(el, binding) {
+      el.addEventListener('click', () => {
+        // console.log(`sa track`, binding);
+        sensors.track(binding.arg as string, binding.value);
+      });
+    }
+  });
+}

src/views/Home/components/ImageSlider/Index.vue

@@ -34,7 +34,7 @@ const currentBanners = computed(() => {
 
 <template>
   <van-swipe :autoplay="5000" indicator-color="white" v-if="stack">
-    <van-swipe-item v-for="banner in currentBanners" :key="banner.code">
+    <van-swipe-item v-for="banner in currentBanners" :key="banner.code" v-sa-track:banner>
       <el-image
         class="img"
         :style="{ borderRadius: borderRadius + 'px' }"