Skip to content

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 事件。没出现?见 排查:没有上报。

相关 ​

基于 MIT 协议发布(内部使用)