@caravela-studio/glancy-web 页面存档备份,存于互联网档案馆
浏览器中的 Glancy, 对于任何框架( 或无): 事件、 页面视图、 会话重放和热映射 .
在下一个.j 中使用 @caravela-studio/glancy-next,它用一个提供者和一个服务器客户端来包装。 在一个没有
构建步骤(或 WordPress),使用脚本标签 glancy.js 见下文.
无
在 npm 上公开,不需要任何符号 :
npm install @caravela-studio/glancy-web
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(仅用于抽样会议):
<script defer src="https://ingest.heyglancy.com/glancy.js" data-key="glc_prod_…" data-heatmaps data-replay></script>
| 属性 | |
|---|---|
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()要在剧本装入前拨打,请添加
首先使用函数窗体 :
<script>window.glancy=window.glancy||function(){(glancy.q=glancy.q||[]).push([].slice.call(arguments))}</script>
<script>glancy("track", "Pricing Viewed")</script>
完全没有代码 : <button data-glancy-event="Demo Requested" data-glancy-prop-plan="pro"> (关于表格的工作也).