# @caravela-studio/glancy-web 中文文档
规范地址：https://npmcn.com/package/%40caravela-studio/glancy-web/
版本：0\.4\.0
npm 元数据更新时间：2026-11-04T17:02:40.866Z
中文译文更新时间：2026-11-09T18:31:41.124Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40caravela-studio/glancy-web
原文对照：https://npmcn.com/package/%40caravela-studio/glancy-web/?lang=original
项目主页：https://github.com/caravela-labs/glancy#readme
源码仓库：https://github.com/caravela-labs/glancy
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：210 kB，64 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2026-10-23T15:18:34.757Z
- 最新版本发布：2026-11-04T17:02:40.650Z
- 近 30 天下载量：1942（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 8 个）
## 中文简介
浏览器的光滑:事件、页面浏览、会话回放和热映射——任何框架或无
## 安装
```sh
npm install @caravela-studio/glancy-web
```
也可以使用：`pnpm add @caravela-studio/glancy-web`、`yarn add @caravela-studio/glancy-web`、`bun add @caravela-studio/glancy-web`
## README
# @caravela-studio/glancy-web 页面存档备份,存于互联网档案馆
浏览器中的 Glancy, 对于任何框架( 或无): 事件、 页面视图、 会话重放和热映射 . 在下一个.j 中使用 [`@caravela-studio/glancy-next`](https://npmcn.com/package/%40caravela-studio/next),它用一个提供者和一个服务器客户端来包装。 在一个没有 构建步骤(或 WordPress),使用脚本标签 `glancy.js` 见下文.
## 无
在 npm 上公开,不需要任何符号 :
```bash
npm install @caravela-studio/glancy-web
```
```ts
import { BrowserClient } from "@caravela-studio/glancy-web";
export const glancy = new BrowserClient({
writeKey: "glc_prod_…", // Glancy → Setup
// host: "https://analytics.example.com", // only when self-hosting (default https://ingest.heyglancy.com)
heatmaps: true, // optional
sessionReplay: { sampleRate: 0.5 }, // optional; inputs are masked
});
glancy.page(); // on every route change (your router's hook)
glancy.track("Order Completed", { revenue: 42 });
glancy.identify(user.id, { name: user.name, email: user.email });
glancy.reset(); // on sign out
```
| 选项 | 默认 | |
| --- | --- | --- |
| `writeKey`, (中文(简体) ), `host` | —— 说 | 需求 |
| `heatmaps` | `false` | 点击并滚动深度 |
| `sessionReplay` | `false` | `true` 或者说 `{ sampleRate, maskAllInputs, maskAllText, maskTextSelector, blockSelector }` |
| `redactParams` | `key, token, code, password…` | 查询参数被替换 `redacted` 在 URL 中显示 |
| `flushAt` 编号 : `flushInterval` | `20` 编号 : `2000` 分钟 | 击打 |
| `consent` | —— 说 | `{ ads: boolean }`如果已经知道 访客的广告同意 |
| `debug` | `false` | 记录每次事件 |
方法: `track`, (中文(简体) ), `page`, (中文(简体) ), `identify`, (中文(简体) ), `group`, (中文(简体) ), `alias`, (中文(简体) ), `reset`, (中文(简体) ), `flush`, (中文(简体) ), `getAnonymousId`, (中文(简体) ), `getUserId`, (中文(简体) ), `getSessionId`, (中文(简体) ), `startRecording`, (中文(简体) ), `stopRecording` (例如在撤回同意时), `consent({ ads })` (从) 您的同意横幅 : `ads: false`,访问者的活动从未发送到广告平台;浏览器与 全球隐私控制 `ads: false`) (中文(简体) ).
隐私 : `data-glancy-mask` 在重放中隐藏元素的文本, `data-glancy-block` 别管了.
## 服务器
`@caravela-studio/glancy-web/server`数字 : `glancy()` 编号 : `ServerClient` 用于 JavaScript 服务器, 加请求跟踪 与 `status` 财务报告和审定财务报表 `duration_ms` 作为 `API Request` 事件: `withGlancyRoute(handler, { waitUntil? })` 用于获取样式 操作员和 `trackRequests()` 为快通/连接. 活动报告 `@glancy/web-server` 他们的图书馆,所以 摄入将它们视为服务器事件. 见 `/docs/sdks/web`。 。 。 .
## 脚本标记( glancy.js)
每个Glancy服务于它(~7 KB gziped). 每个特性都是自己的文件,只有在它打开时才会获取: glancy-capture.js (自动捕获、热映射、glancy-errors.js、glancy-vital.js(闲置)和glancy-replay.js(仅用于抽样会议):
```html
```
| 属性 | |
| --- | --- |
| `data-key` | 桶的写键( 需要) |
| `data-host` | Glancy 运行的地方( 默认: 脚本来自何处) |
| `data-heatmaps`, (中文(简体) ), `data-replay`, (中文(简体) ), `data-replay-sample="0.25"` | 加热图/ 会话重放 |
| `data-outbound-links` | 其它站点链接的音轨点击 |
| `data-redact-params="order,email"` | 更多要隐藏的查询参数 |
| `data-manual` | 没有自动页面浏览 |
| `data-debug` | 记录一切 |
礛 `glancy.track(…)`, (中文(简体) ), `glancy.identify(…)`, (中文(简体) ), `glancy.reset()`要在剧本装入前拨打,请添加 首先使用函数窗体 :
```html
```
完全没有代码 : `