diff --git a/src/main.ts b/src/main.ts index 4afda4e..4c61511 100644 --- a/src/main.ts +++ b/src/main.ts @@ -15,29 +15,44 @@ import './assets/css/main.scss'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { sensorsData } from './utils/plugins/sa'; -import { isCollectUrl } from './utils/url/tools'; +import { sensorsData } from '@/utils/plugins/sa'; const app = createApp(App); if (import.meta.env.VITE_APP_ENV !== 'production') { - const vconsole = new VConsole(); + /* const vconsole = */ new VConsole(); // app.use(vconsole); } declare global { interface Window { + sa: any; onAndroidBack: (() => void) | null; appBridge?: any; } } +const sa = { + register: false, + instance: window.sa || null +}; + // 定义路由是否可以返回的判断 const routerCanGoBack = () => { const position = router.options.history.state?.position; return typeof position === 'number' && position > 0; }; router.beforeEach((to, from, next) => { + // 神策数据埋点 + if (!sa.register && sessionStorage.getItem('userInfo')) { + sa.instance = window.sa; + // 检测是否使用神策的登陆 + const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || ''); + sa.instance.setOnceProfile({ loginID: userInfo.userCode }); + + sa.register = true; + } + if (to.meta?.title) document.title = to.meta.title as string; if (to.query.digitalYiliToken) { @@ -58,5 +73,10 @@ router.beforeEach((to, from, next) => { app.use(createPinia()); app.use(router); // 神策数据插件 -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.mount('#app'); diff --git a/src/router/index.ts b/src/router/index.ts index 1fc615e..36b5f23 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from 'vue-router'; import layout from '@/layouts/index.vue'; import Design from '@/views/Design/Index.vue'; import Redirect from '@/layouts/redirect.vue'; -import type { title } from 'process'; import { getWXShareConfig } from '@/utils/share'; const router = createRouter({ diff --git a/src/utils/plugins/sa.ts b/src/utils/plugins/sa.ts deleted file mode 100644 index fa1ccad..0000000 --- a/src/utils/plugins/sa.ts +++ /dev/null @@ -1,60 +0,0 @@ -import type { App } from 'vue'; -import sensors from '@/assets/js/sa-sdk-javascript/dist/web/sensorsdata.es6.js'; - -// 定义神策数据插件选项接口 -interface SensorsDataOptions { - // 可以根据需要添加具体的选项属性 - [key: string]: any; -} - -export function sensorsData() { - return { - install(app: App, options?: SensorsDataOptions) { - // console.log(`sensorsData install`); - sensors.init({ - // server_url: '数据接收地址', - show_log: true, - // 单页面配置，默认关闭。开启后自动监听 URL 有变化就会触发 $pageview 事件 - is_track_single_page: false, - use_client_time: true, - send_type: 'beacon', - heatmap: { - //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。 - clickmap: 'not_collect', - //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。 - scroll_notice_map: 'not_collect' - }, - ...options - }); - - // sensors.quick('autoTrack'); //用于采集 $pageview 事件。 - - // 注册公共属性 - sensors.registerPage({ - platform: 'h5', - current_url: location.href, - referrer: document.referrer - }); - // 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/utils/plugins/sa/index.ts b/src/utils/plugins/sa/index.ts new file mode 100644 index 0000000..6fe65c1 --- /dev/null +++ b/src/utils/plugins/sa/index.ts @@ -0,0 +1,71 @@ +import type { App } from 'vue'; +import sensors from './dist/v2/sensorsdata.es6'; + +/** + * 神策数据 SDK + */ +export type Sensors = typeof sensors; + +/** + * 创建神策数据插件 + */ +export function sensorsData() { + return { + install(app: App, options: any) { + // 初始化神策 SDK + sensors.init({ + show_log: true, + is_track_single_page: false, + use_client_time: true, + send_type: 'beacon', + heatmap: { + clickmap: 'not_collect', + scroll_notice_map: 'not_collect' + }, + ...(options || {}) + }); + + // 注册页面公共属性 + sensors.registerPage({ + product_name: '伊调研', + platform_type: 'PC' + }); + // 提供全局注入的 sensors 实例 + app.provide('sensors', sensors); + // 注册到window中 + (globalThis as any).sa = sensors; + + // 注册 saTrack 自定义指令 + registerDirective(app); + } + }; +} + +/** + * 注册 saTrack 指令，用于点击埋点 + * @param {App} app - Vue 应用实例 + */ +function registerDirective(app: App) { + function bindTrackListener(binding: any) { + return () => { + const { value: properties } = binding; + + sensorsTrack(properties); + }; + } + + app.directive('sensorsTrack', { + mounted(el, binding) { + el.addEventListener('click', bindTrackListener(binding)); + }, + unmounted(el, binding) { + // 清除绑定的事件 + el.removeEventListener('click', bindTrackListener(binding)); + } + }); +} + +function sensorsTrack(properties: any) { + sensors.track('YiliResearch_PageClick', properties); +} +export { sensors, sensorsTrack }; diff --git a/src/views/AD/Index.vue b/src/views/AD/Index.vue index 915d23e..dbcf360 100644 --- a/src/views/AD/Index.vue +++ b/src/views/AD/Index.vue @@ -1,6 +1,7 @@