博客

来自 HeatMapX 的 CRO 改进笔记、行业基准与案例研究。

什么是网页互动（Web Engagement）？弹窗与提示条转化入门指南
从网页互动的含义到如何入门，本文以零基础也能读懂的方式讲解。我们涵盖了弹窗与固定提示条的使用场景、设计技巧，以及如何将其与热力图和 A/B 测试结合使用。
2026/7/1237 min readweb-engagementpopupcrohow-tobeginners
邀请好友，双方各得一个月免费——HeatMapX 推荐活动完整指南
HeatMapX 推荐活动的运作方式，涵盖邀请人和被邀请人双方视角：如何发放推荐码、在哪里输入（是在控制台，而不是结账页面）、首月免费何时生效、抵扣如何发放，以及常见问题解答——一篇文章说清楚。
2026/7/65 min readreferralcampaignguidebilling
你的行为数据能带走吗——19款热图与A/B测试产品的导出／API开放度对比
对10款热图/会话录屏类产品与9款A/B测试类产品的公开API和数据导出范围进行横向梳理，涵盖付费门槛与数据颗粒度。本篇调研报告以"你能否随时把自己的数据带走"为标准，将各家产品分为三档。
2026/7/419 min readresearchdata-portabilityapiexportheatmapab-testingcro
通过 MCP 将你的热力图连接到 Claude（1 分钟，一条命令）
手把手教你将 Claude Code 连接到 HeatMapX 的 MCP 服务器：签发 API key、运行一条命令，然后就能问出诸如「哪个页面滚动深度最差？」「我的 A/B 测试谁赢了？」这类问题。文末附故障排查清单。
2026/7/36 min readhow-tomcpclaudeaiintegration
如何在 WordPress 网站上安装热力图（一行代码，3分钟搞定）
在 WordPress 中添加热力图追踪的三种方法——主题的页头设置、代码插入插件，或直接编辑 header.php——从最简单的、无需插件的一行代码方案开始介绍。还包括如何确认安装是否真正生效。
2026/7/25 min readhow-towordpressheatmapinstallation
如何在 Shopify 店铺安装热图（无需安装应用，仅需一行代码）
如何在 Shopify 店铺添加热图追踪——无需安装应用，只需在 theme.liquid 中加入一行代码。本文介绍编辑前如何备份主题、为什么结账页面不会被追踪，以及如何确认追踪功能真正生效。
2026/7/25 min readhow-toshopifyecommerceheatmapinstallation
如何通过 Google Tag Manager 安装热力图（无需改代码，5 分钟搞定）
手把手教你通过 Google Tag Manager（GTM）安装 HeatMapX 热力图追踪：5 步完成 Custom HTML 标签 + All Pages 触发器设置，标签不触发时的排查清单，以及如何让 Claude Code 带你完成整个流程。
2026/7/26 min readhow-togtmgoogle-tag-managerheatmapinstallation
什么是A/B测试？面向初学者的图解“操作方法”详解
从A/B测试的含义讲起，直到具体的操作方法，即使零专业知识也能轻松理解。涵盖常见测试要素、5步操作流程、初学者容易踩的坑，以及与热力图结合使用的方法。
2026/7/14 min readab-testingcrohow-tobeginners
将Vercel函数固定到东京区域，改善了实际体验速度 — 消除太平洋往返延迟
在排查仪表盘显示需要几秒钟的问题时，我们发现原因是Vercel函数（美国）与Supabase（东京）之间的往返通信。通过固定区域和查询并行化，我们大幅改善了实际体验速度，以下是这次记录。
2026/7/14 min readengineeringnextjsperformancevercel
A/B 测试的“分流比例”和“A/B 分配比例”有什么区别？正确的设计思路
解读 A/B 测试设置中容易混淆的“分流比例（纳入实验的比例）”与“A/B 分配比例”的区别。将两者分开考虑，就能在控制风险的同时正确完成验证。
2026/7/14 min readab-testingcrohow-to
安全预览外部网站——代理 + 净化 + iframe sandbox 的实现
在 A/B 测试的“修改后预览”功能中，如何在自有域名下安全地展示用户的外部网站？本文分享 SSRF 防护、外部 JS 移除、CSP、iframe sandbox 的组合方案，以及在 sandbox 配置上实际踩过的坑。
2026/7/15 min readengineeringsecuritynextjsiframe
热力图与A/B测试的区别与使用方法｜应该从哪个开始？
热力图和A/B测试到底有什么不同，又该如何配合使用？本文将通俗易懂地讲解“发现问题”的热力图与“验证改进方案”的A/B测试之间的角色差异，以及正确的使用顺序。
2026/7/13 min readheatmapab-testingcrocomparison
免费开启A/B测试｜只需一行代码・无需编程，今天就能开始
你是否认为不用付费工具就无法开始A/B测试？其实只需粘贴一行代码、无需编程、无需信用卡即可开始。本文介绍如何轻松上手无代码A/B测试。
2026/7/13 min readab-testingfreenocodecro
我们如何将A/B测试的分配设计与行业标准对齐 —— 分离“投放比例”与“A/B分配”
在设计A/B测试功能时，是应该把“纳入实验的比例（投放比例）”和“A/B之间的分配”合并成一个参数，还是分开处理？本文分享我们参照行业标准，将两者分离的原因及背后的设计考量。
2026/7/13 min readengineeringab-testingproduct-design
A/B 测试工具竞品调研 2026 — 8 款服务的功能与定价横向对比
从 Optimizely 到 PostHog，本文对 2026 年 6 月主流 A/B 测试工具 8 款服务的功能、定价、计费模式与技术方案进行横向调研。报告揭示了企业级与开发者优先两极分化的市场格局、持续加速的行业整合，以及 WordPress 支持的真实现状。
2026/6/1221 min readresearchab-testingcropricingmarket-analysis
用 Next.js App Router 将 SaaS 仪表板迁移到侧边栏多页面布局
从「什么都堆在一页」到 5 页侧边栏布局。固定侧边栏共存方案、共享 CSS Grid 模板、即将上线功能的占位模式，以及一个在 LP 和仪表板之间共享的 i18n 字典——用 Claude Code 两小时搞定。
2026/6/522 min readengineeringnextjsapp-routerclaude-code
用 Claude Code 一天重建 SaaS 仪表板——Tailwind v4 + CSS Grid 表格对齐
我们如何在一天内用 Claude Code 从零重建 HeatMapX 仪表板——涵盖 Tailwind v4 深色模式、CSS Grid 表格对齐的坑，以及 16 次设计迭代的真实过程。
2026/6/517 min readengineeringtailwindcss-griddark-modeclaude-code

从 Claude Code 运行的热力图，免费开始。

粘贴一行追踪标签，从 CLI 获取分析和改进建议。

免费开始查看定价

什么是网页互动（Web Engagement）？弹窗与提示条转化入门指南

邀请好友，双方各得一个月免费——HeatMapX 推荐活动完整指南

你的行为数据能带走吗——19款热图与A/B测试产品的导出／API开放度对比

通过 MCP 将你的热力图连接到 Claude（1 分钟，一条命令）

如何在 WordPress 网站上安装热力图（一行代码，3分钟搞定）

如何在 Shopify 店铺安装热图（无需安装应用，仅需一行代码）

如何通过 Google Tag Manager 安装热力图（无需改代码，5 分钟搞定）

什么是A/B测试？面向初学者的图解“操作方法”详解

将Vercel函数固定到东京区域，改善了实际体验速度 — 消除太平洋往返延迟

A/B 测试的“分流比例”和“A/B 分配比例”有什么区别？正确的设计思路

安全预览外部网站——代理 + 净化 + iframe sandbox 的实现

热力图与A/B测试的区别与使用方法｜应该从哪个开始？

免费开启A/B测试｜只需一行代码・无需编程，今天就能开始

我们如何将A/B测试的分配设计与行业标准对齐 —— 分离“投放比例”与“A/B分配”

A/B 测试工具竞品调研 2026 — 8 款服务的功能与定价横向对比

用 Next.js App Router 将 SaaS 仪表板迁移到侧边栏多页面布局

用 Claude Code 一天重建 SaaS 仪表板——Tailwind v4 + CSS Grid 表格对齐

从 Claude Code 运行的热力图，免费开始。