162 lines
3.6 KiB
JavaScript
162 lines
3.6 KiB
JavaScript
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() |