怎么在 React 上安装 TapCub？

简短回答

在 React 应用的 index.html 里加一次 TapCub 脚本标签。它会自动记录首次加载和每次 React Router 跳转；事件用 tapcub.track()，登录后调用 tapcub.login()。

站点密钥在 网站统计 › 配置 › SDK 代码 里。

1. 只加一次脚本

Vite 或 Create React App 项目，把标签放进 index.html 的 <head>：

<script defer src="https://static.pathclue.com/client.js" data-site="YOUR_SITE_KEY"></script>

脚本会在浏览器里自己启动。不要在组件里再创建或注入一次；重复插入会被忽略。

2. 页面浏览和路由切换

首次加载和之后使用 history 模式的路由切换，都会自动发送。React Router 用 BrowserRouter 时不用再做什么；用 HashRouter 时，在同一个标签上加 data-hash="true"。

想自己发送页面浏览，在脚本上设置 data-auto-track="false"，并在每次路由完成后调用 tapcub.pageview()。注意这也会关掉自动的外链和下载点击、Web Vitals 和 404 事件。见在单页应用上安装。

3. 事件和登录

tapcub.track('purchase', { revenue: 19.9 });

在浏览器里的事件处理函数或副作用里调用。React 严格模式在开发环境会把副作用执行两次；重复插入脚本会被忽略，但写在副作用里的 track 在开发环境会发两次。事件名超过 100 个字符会被截断；最多保留 20 个属性，键名截到 50 个字符、字符串值截到 200 个字符。属性值只保留字符串、数字和布尔值。

用户登录后，把访客和你的用户 ID 关联起来：

tapcub.login(userId, { plan: 'pro' }, { type: 'login' });

login 来自身份脚本，调用前先确认它存在。详见识别用户。

检查是否生效

localhost 这类本地主机名默认不发送，很容易被误以为安装失败。在部署好的预览地址或线上网站测试，看浏览器网络面板里的采集请求，然后按检查安装确认。

常见问题

不是用 React？见安装 TapCub。