12.4 概念模块功能完善

src/utils/posthog/page-tracker.js

@@ -0,0 +1,162 @@
+import analytics from './index'
+import { PAGE_EVENTS } from '../../constants/events'
+
+/**
+ * 页面追踪器
+ * 自动追踪页面浏览、停留时长、滚动行为
+ */
+class PageTracker {
+  constructor() {
+    // 当前页面信息
+    this.currentPage = null
+    // 页面进入时间
+    this.enterTime = null
+    // 上一个页面路径
+    this.referrerPage = null
+    // 滚动追踪状态
+    this.scrollTracked = false
+    // 最大滚动位置
+    this.maxScrollTop = 0
+    // 页面高度
+    this.pageHeight = 0
+  }
+
+  /**
+   * 页面进入
+   * @param {string} pagePath - 页面路径
+   * @param {string} pageTitle - 页面标题
+   * @param {object} pageQuery - 页面参数
+   */
+  onPageEnter(pagePath, pageTitle = '', pageQuery = {}) {
+    // 保存当前页面信息
+    this.currentPage = {
+      path: pagePath,
+      title: pageTitle,
+      query: pageQuery,
+    }
+
+    // 记录进入时间
+    this.enterTime = Date.now()
+
+    // 重置滚动追踪
+    this.scrollTracked = false
+    this.maxScrollTop = 0
+
+    // 发送页面浏览事件
+    analytics.track(PAGE_EVENTS.PAGE_VIEW, {
+      page_path: pagePath,
+      page_title: pageTitle,
+      page_query: pageQuery,
+      referrer_page: this.referrerPage || '',
+      $current_url: pagePath,
+      $title: pageTitle,
+    })
+
+    // 更新来源页面
+    this.referrerPage = pagePath
+  }
+
+  /**
+   * 页面离开
+   */
+  onPageLeave() {
+    if (!this.currentPage || !this.enterTime) return
+
+    // 计算停留时长（秒）
+    const duration = Math.floor((Date.now() - this.enterTime) / 1000)
+
+    // 计算滚动百分比
+    const scrollPercentage = this.pageHeight > 0
+      ? Math.min(100, Math.round((this.maxScrollTop / this.pageHeight) * 100))
+      : 0
+
+    // 发送页面离开事件
+    analytics.track(PAGE_EVENTS.PAGE_LEAVE, {
+      page_path: this.currentPage.path,
+      page_title: this.currentPage.title,
+      duration: duration,
+      max_scroll_top: this.maxScrollTop,
+      scroll_percentage: scrollPercentage,
+      $current_url: this.currentPage.path,
+    })
+
+    // 重置状态
+    this.currentPage = null
+    this.enterTime = null
+  }
+
+  /**
+   * 页面滚动
+   * @param {object} scrollInfo - 滚动信息
+   */
+  onPageScroll(scrollInfo) {
+    const { scrollTop, scrollHeight } = scrollInfo
+
+    // 更新最大滚动位置
+    if (scrollTop > this.maxScrollTop) {
+      this.maxScrollTop = scrollTop
+    }
+
+    // 更新页面高度
+    if (scrollHeight) {
+      this.pageHeight = scrollHeight
+    }
+
+    // 首次滚动追踪
+    if (!this.scrollTracked && scrollTop > 100) {
+      this.scrollTracked = true
+
+      analytics.track(PAGE_EVENTS.PAGE_SCROLLED, {
+        page_path: this.currentPage?.path || '',
+        scroll_top: scrollTop,
+        scroll_direction: 'down',
+        first_scroll: true,
+      })
+    }
+  }
+
+  /**
+   * 下拉刷新
+   */
+  onPullDownRefresh() {
+    analytics.track(PAGE_EVENTS.PAGE_REFRESH, {
+      page_path: this.currentPage?.path || '',
+    })
+  }
+
+  /**
+   * 触底加载更多
+   * @param {number} pageNum - 当前页码
+   */
+  onReachBottom(pageNum = 1) {
+    analytics.track(PAGE_EVENTS.PAGE_LOAD_MORE, {
+      page_path: this.currentPage?.path || '',
+      page_number: pageNum,
+    })
+  }
+
+  /**
+   * 获取当前页面信息
+   */
+  getCurrentPage() {
+    return this.currentPage
+  }
+
+  /**
+   * 获取停留时长（秒）
+   */
+  getDuration() {
+    if (!this.enterTime) return 0
+    return Math.floor((Date.now() - this.enterTime) / 1000)
+  }
+
+  /**
+   * 设置页面高度（用于计算滚动百分比）
+   */
+  setPageHeight(height) {
+    this.pageHeight = height
+  }
+}
+
+// 导出单例
+export default new PageTracker()