SPA 路由切换上报 PageView
单页应用路由切换不刷新页面,需要让 lens 把每次路由进入算作一次 PageView。
前置:已能构造并初始化
TripoLens(app/configUrl/endpoint三个必填),见 快速开始。
自动 PageView(多数情况开箱即用)
装上 TrackingPlugin 并开 autoTrack,Auto PageView 即覆盖首屏 + SPA 路由进入(内部监听 history):
ts
import { TripoLens, TrackingPlugin } from '@tripo3d/lens';
const trace = new TripoLens({
app: 'shop',
configUrl: '...',
endpoint: '...',
plugins: [new TrackingPlugin({ autoTrack: true })],
});
await trace.init();基于 History API 的路由(Vue Router / React Router 默认模式)无需额外配置。
hash 路由 / query 即页面
默认 hash 变化、query 变化都不计 PV。按需打开:
ts
new TrackingPlugin({
autoTrack: {
hashChange: true, // hash 路由(/#/page):hash 变化算一次 PV
queryChange: false, // query 即页面(?tab=x 视为新页)时设 true
},
});| 你的路由形态 | 设置 |
|---|---|
History 模式(/page) | 默认即可 |
Hash 模式(/#/page) | hashChange: true |
同路径靠 query 区分页面(?tab=x) | queryChange: true |
框架适配器同理
Vue / React 适配器的 PageView 也来自 TrackingPlugin 的 autoTrack——适配器不额外监听 router。接入见 Vue / React。Nuxt Module 默认开启行为埋点(tracking: true),不需要可显式配 tracking: false 关闭,见 Nuxt 接入。
命令式兜底
自动 PageView 覆盖不到的特殊场景(如同一路由内的「虚拟页」切换),手动补一次:
ts
trace.pageview({ from: 'tab-switch' }); // page_url / referrer 由 SDK 注入验证
切换路由后,用 DevTools 事件流确认出现 pageview 事件。没出现?见 排查:没有上报。