全埋点与热力图
不写代码也能知道页面上哪里被点得最多:Web SDK 默认记录点击和停留,热力图可以直接叠在你自己的网页上看。
开关
两层开关,服务端为准:
| 位置 | 选项 | 默认 |
|---|---|---|
| 项目设置 → 全埋点与回放 | 全埋点(点击、停留) | 开 |
| 项目设置 → 全埋点与回放 | 热力图(点击带坐标) | 开 |
Web SDK 的 init | autocapture、heatmap | true |
SDK 初始化后会请求 /sdk/config 取项目的开关(5 分钟缓存)。项目里关掉了,SDK 就停掉点击和停留,页面浏览照常。
记录什么
| 事件 | 属性 |
|---|---|
$WebClick | 元素 $element_id、$element_name、$element_class_name、$element_type、$element_selector、链接 $element_target_url、可见文本 $element_content(最多 100 字);热力图坐标 $page_x、$page_y 和视口宽高 |
$WebStay | 停留秒数 $event_duration、离开时的滚动位置 $viewport_position |
不记录输入内容:input、textarea、密码框、[contenteditable] 里的值一律不读。这是全埋点,不是把表单内容搬走。
遮罩
命中遮罩选择器的元素(以及它的子元素)不采文本,会话回放里也被遮住:
- 内置:
input、textarea、[contenteditable]、[data-evstats-mask] - 项目设置 → 全埋点与回放 → 遮罩选择器:每行一个 CSS 选择器,最多 50 条,默认
[data-evstats-mask]
页面上显示订单号、手机号的区域,加一个属性就不会被采:
html
<div class="order-summary" data-evstats-mask>…</div>热力图页
「行为分析 → 热力图」:
evstats


- 选页面:从受访页面里选路径,或者粘贴完整 URL 取它的路径。
- 点击 / 停留:点击按 10 像素的格子计数;停留看访客离开时停在页面的哪个位置。
- 视口:全部、≥1280、768~1279、<768 四档,窄屏和宽屏的布局不同,分开看更准。
- 元素排行:右侧列出点击最多的元素选择器和文本。
- 默认近 7 天,最长 31 天。
后台只画格子分布,不会把你的网页嵌进来,这样 evstats 不会变成一个能代理任意网页的地方。想看「点的到底是哪个按钮」,用下面的页面叠加。
在真实页面上看
evstats


- 在热力图页点「在页面上查看」。
- evstats 生成一个一次性令牌(10 分钟有效,只能读这一个项目、这一个路径、这一段日期的热力图),新标签打开你的页面:
https://你的网站/pricing?evstats_heatmap=令牌。 - 页面上的 Web SDK 看到这个参数,先把它从地址栏删掉,本页停止一切上报(查看热力图不会被算进统计),再加载热力图分包。
- 热力图画在页面最上层,不拦截点击。右上角的小面板可以切换点击 / 停留、调透明度、关闭。页面滚动和缩放时自动重绘。
令牌过期后,面板显示「链接已过期,请回到后台重新打开」。页面上要装有 Web SDK,并且项目的采集跨域规则允许这个网站。
用接口取
热力图也在 OpenAPI 里:GET /api/v1/projects/{projectId}/heatmap?url_path=/pricing&from=...&to=...,返回格子计数和元素排行,不含任何回放内容。见 API 参考。