From 49cbb071e8727d867cf99baac8e9e0392fff21fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E6=B3=BD-huangze-=E5=A4=A9=E6=B4=A5=E6=98=93?= =?UTF-8?q?=E5=95=86=E6=95=B0=E6=99=BA?= Date: Mon, 9 Jun 2025 13:57:32 +0800 Subject: [PATCH] =?UTF-8?q?feat(analytics):=20=E4=BC=98=E5=8C=96=E7=A5=9E?= =?UTF-8?q?=E7=AD=96=E6=95=B0=E6=8D=AE=E6=8F=92=E4=BB=B6=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=B9=B6=E6=B7=BB=E5=8A=A0=E7=82=B9=E5=87=BB=E8=B7=9F=E8=B8=AA?= =?UTF-8?q?=E6=8C=87=E4=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改 usePieChart 钩子，注释掉 console.log 语句 - 更新 sensorsData 插件配置，关闭单页面自动跟踪和滚动热图 - 新增自定义指令 saTrack 用于手动跟踪点击事件 - 在 ImageSlider 组件中应用 saTrack 指令，跟踪轮播图点击 --- src/hooks/chart/usePieChart.ts | 2 +- src/main.ts | 28 ++++++++++++++- src/utils/plugins/sa.ts | 36 +++++++++++++++---- .../Home/components/ImageSlider/Index.vue | 2 +- 4 files changed, 58 insertions(+), 10 deletions(-) diff --git a/src/hooks/chart/usePieChart.ts b/src/hooks/chart/usePieChart.ts index 1e6f600..58cc933 100644 --- a/src/hooks/chart/usePieChart.ts +++ b/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; diff --git a/src/main.ts b/src/main.ts index b544c69..62dd6af 100644 --- a/src/main.ts +++ b/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'); diff --git a/src/utils/plugins/sa.ts b/src/utils/plugins/sa.ts index efa15dd..6602db7 100644 --- a/src/utils/plugins/sa.ts +++ b/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); + }); + } + }); +} diff --git a/src/views/Home/components/ImageSlider/Index.vue b/src/views/Home/components/ImageSlider/Index.vue index fb1c72c..b12b863 100644 --- a/src/views/Home/components/ImageSlider/Index.vue +++ b/src/views/Home/components/ImageSlider/Index.vue @@ -34,7 +34,7 @@ const currentBanners = computed(() => {