From 9852bcc14ee966cb3139d91911f693ced920039d Mon Sep 17 00:00:00 2001 From: huangzhe <3451701311@qq.com> Date: Tue, 24 Jun 2025 22:04:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E5=8C=85=E5=90=AB=E6=A8=A1=E5=9E=8B=E5=8D=A1=E7=89=87=E3=80=81?= =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=8C=87=E5=BC=95=E5=92=8C=E5=9C=BA=E6=99=AF?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E7=A5=9E=E7=AD=96=E5=9F=8B?= =?UTF-8?q?=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.js | 7 +- src/router/index.js | 3 +- src/utils/plugins/sa/index.js | 22 ++-- src/views/Home/components/Header.vue | 141 +++++++++++---------- src/views/Home/components/ModelCard.vue | 21 ++-- src/views/Home/components/Operating.vue | 22 ++-- src/views/Home/components/Scene.vue | 157 +++++++++++++----------- 7 files changed, 194 insertions(+), 179 deletions(-) diff --git a/src/main.js b/src/main.js index 7620b741..877884e2 100644 --- a/src/main.js +++ b/src/main.js @@ -78,5 +78,10 @@ installAntDesign(app); app.config.globalProperties.emitter = emitter; // 神策数据插件 -app.use(sensorsData(), {}); +app.use(sensorsData(), { + // 测试环境 + server_url: 'https://digitaldmo.yili.com/sa?project=sensorstest', + // 正式环境 + // server_url: 'https://digitaldmo.yili.com/sa?project=YIP', +}); app.use(store).use(router).mount('#app'); diff --git a/src/router/index.js b/src/router/index.js index 4e098b9c..b63c459a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -632,9 +632,8 @@ router.beforeEach(async (to, from, next) => { sa.instance = window.sa; // 检测是否使用神策的登陆 const userInfo = JSON.parse(localStorage.getItem('plantUserInfo')); - const loginID = `id-${userInfo.id}.login_team_id-${userInfo.login_team_id}`; + globalThis.sa.setOnceProfile({loginID:userInfo.id}); - sa.instance.login(globalThis.btoa(loginID)); sa.register = true; } diff --git a/src/utils/plugins/sa/index.js b/src/utils/plugins/sa/index.js index cd225109..a03b4cd6 100644 --- a/src/utils/plugins/sa/index.js +++ b/src/utils/plugins/sa/index.js @@ -21,13 +21,9 @@ export function sensorsData() { // 注册页面公共属性 sensors.registerPage({ - platform: 'pc', - // 产品名称 - production_name: 'ylst', - current_url: location.href, - referrer: document.referrer + product_name: '伊调研', + platform_type: 'PC' }); - // 提供全局注入的 sensors 实例 app.provide('sensors', sensors); // 注册到window中 @@ -48,16 +44,11 @@ function registerDirective(app) { return () => { const { arg: eventName, value: properties } = binding; - if (eventName) { - sensors.track(eventName, properties); - console.warn(properties); - } else { - console.warn('[sensorsData] 事件名未提供'); - } + sensorsTrack(properties); }; } - app.directive('saTrack', { + app.directive('sensorsTrack', { mounted(el, binding) { el.addEventListener('click', bindTrackListener(binding)); }, @@ -68,4 +59,7 @@ function registerDirective(app) { }); } -export { sensors }; +function sensorsTrack(properties){ + sensors.track("YiliResearch_PageClick", properties); +} +export { sensors,sensorsTrack }; diff --git a/src/views/Home/components/Header.vue b/src/views/Home/components/Header.vue index 95ac083c..ca84f68d 100644 --- a/src/views/Home/components/Header.vue +++ b/src/views/Home/components/Header.vue @@ -9,7 +9,11 @@ - @@ -62,18 +79,19 @@ import { useRouter } from 'vue-router'; import CountTo from '@/components/CountTo.vue'; import { getBannerList, getDynamicDataStatistics, getQuestionnaireStatistics } from '@/api/home'; import Charts from './Charts.vue'; +import { sensors, sensorsTrack } from '@/utils/plugins/sa'; -const router = useRouter() +const router = useRouter(); // 必须注册模块 -Swiper.use([Autoplay]) +Swiper.use([Autoplay]); const swiperContainer = ref(null); -let bannerSwiper = null -const activeIndex = ref(0) -const prevBtn = ref(null) -const nextBtn = ref(null) +let bannerSwiper = null; +const activeIndex = ref(0); +const prevBtn = ref(null); +const nextBtn = ref(null); // 数据部分 -const surveyStats = ref({}) +const surveyStats = ref({}); const surveyData = ref({ survey_count: 0, survey_count_collect: 0, @@ -82,25 +100,24 @@ const surveyData = ref({ survey_count_edit_ratio: 0, survey_count_end: 0, survey_count_end_ratio: 0 -}) -const bannerList = ref([]) +}); +const bannerList = ref([]); -const sensors = inject('sensors') // 获取数据 const getBannerData = async () => { - const res = await getBannerList() - bannerList.value = res.data.banner_list -} + const res = await getBannerList(); + bannerList.value = res.data.banner_list; +}; const getStatics = async () => { - const res = await getDynamicDataStatistics() - surveyStats.value = res.data -} + const res = await getDynamicDataStatistics(); + surveyStats.value = res.data; +}; const getQuesStatics = async () => { - const res = await getQuestionnaireStatistics() - surveyData.value = res.data -} + const res = await getQuestionnaireStatistics(); + surveyData.value = res.data; +}; // function readyLoop(){ // initSwiper(true) @@ -141,12 +158,12 @@ const initSwiper = (loop = false) => { on: { slideChange: () => { if (bannerSwiper) { - activeIndex.value = bannerSwiper.realIndex + activeIndex.value = bannerSwiper.realIndex; } - }, - }, - }) -} + } + } + }); +}; const goPre = () => { if (bannerSwiper) { @@ -163,50 +180,44 @@ const goNext = () => { const goToSlide = (index) => { if (bannerSwiper) { // 如果使用 loop: true，则需用 slideToLoop - bannerSwiper.slideToLoop(index) - activeIndex.value = index + bannerSwiper.slideToLoop(index); + activeIndex.value = index; } -} +}; // 方法 const toBannerDetail = (item) => { // 神策埋点 - saTrack(item) + saTrack(item); router.push({ path: '/home/bannerDetail', query: { code: item.code } - }) -} + }); +}; onMounted(async () => { - await getBannerData() - await getStatics() - await getQuesStatics() - initSwiper() -}) + await getBannerData(); + await getStatics(); + await getQuesStatics(); + initSwiper(); +}); onBeforeUnmount(() => { if (bannerSwiper) { - bannerSwiper.destroy() - bannerSwiper = null + bannerSwiper.destroy(); + bannerSwiper = null; } -}) - +}); function saTrack(record) { - const config = { - eventName: "ClickBanner", - properties: { - page: "首页", - module: "Banner", - position: "查看详情", - title: record.code, - clickTime: new Date().toLocaleString().toString() - } - } - sensors.track(config.eventName, config.properties); + const properties = { + page_name: 'PC首页', + model_name: '轮播图', + button_name: `${record.title}` + }; + sensorsTrack(properties); } @@ -237,7 +248,7 @@ function saTrack(record) { height: 100%; .banner-block { - background-image: url("../../../assets/img/home/banner.png"); + background-image: url('../../../assets/img/home/banner.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 100%; @@ -252,7 +263,7 @@ function saTrack(record) { left: calc(16%); font-weight: bold; font-size: 30px; - color: #1F1E64; + color: #1f1e64; line-height: 32px; } @@ -261,7 +272,7 @@ function saTrack(record) { top: calc(54%); left: calc(4.4%); font-size: 17px; - color: #696C9F; + color: #696c9f; letter-spacing: 2px; font-weight: bold; @@ -269,7 +280,7 @@ function saTrack(record) { background: #fff; border: 1px solid rgba(31, 30, 100, 0.55); font-size: 16px; - color: #1F1E64; + color: #1f1e64; line-height: 23px; text-align: left; font-style: normal; @@ -457,7 +468,7 @@ function saTrack(record) { border: none; display: block; //opacity: .48; - background-color: #8B97C3; + background-color: #8b97c3; width: 6px; height: 6px; border-radius: 50%; @@ -469,7 +480,7 @@ function saTrack(record) { border: none; display: block; //opacity: .48; - background-color: #F5F6F9; + background-color: #f5f6f9; width: 18px; height: 6px; border-radius: 10px; diff --git a/src/views/Home/components/ModelCard.vue b/src/views/Home/components/ModelCard.vue index 6d4eb948..293f2102 100644 --- a/src/views/Home/components/ModelCard.vue +++ b/src/views/Home/components/ModelCard.vue @@ -15,6 +15,7 @@ diff --git a/src/views/Home/components/Operating.vue b/src/views/Home/components/Operating.vue index 2c390eec..cad74a92 100644 --- a/src/views/Home/components/Operating.vue +++ b/src/views/Home/components/Operating.vue @@ -73,6 +73,7 @@ import 'swiper/swiper-bundle.css'; import { useRouter } from 'vue-router'; import { getQueryUserSurvey } from '@/api/home'; import { message } from 'ant-design-vue'; +import { sensorsTrack } from '@/utils/plugins/sa'; const router = useRouter(); const emit = defineEmits(['create-survey']); @@ -124,8 +125,6 @@ const operatingList = [ key: 'particulars' }] -const sensors = inject('sensors') - const goPre = () => { pauseCurrentVideo(); if (mySwiper) { @@ -188,20 +187,13 @@ const toSurveyInfo = async (item, index) => { } } - function saTrack(record, index) { + function saTrack(_, index) { const operates = ["创建", "设计","投放","分析"] - // 操作引导埋点 - const config = { - eventName: "OperatingGuide", - properties: { - page: "首页", - module: "操作指引", - position: operates[index]+"问卷", - buttonName: "立即体验", - clickTime: new Date().toLocaleString().toString() - } - } - sensors.track(config.eventName, config.properties); + sensorsTrack({ + page_name: 'PC首页', + model_name: '操作指引', + button_name: operates[index]+"问卷" + }); } } diff --git a/src/views/Home/components/Scene.vue b/src/views/Home/components/Scene.vue index c1ee06e0..7ae69f0a 100644 --- a/src/views/Home/components/Scene.vue +++ b/src/views/Home/components/Scene.vue @@ -1,5 +1,5 @@