什麼是網站互動（Web Engagement）？新手也能上手的彈窗與固定橫幅轉換指南
從網站互動的定義到實際上手方法，以零基礎也能理解的方式說明。內容涵蓋彈窗與固定橫幅的使用情境、設計技巧，以及如何搭配熱區圖與 A/B 測試一起運用。
38 min readweb-engagementpopupcrohow-tobeginners
部落格
來自 HeatMapX 的 CRO 改善筆記、產業基準與案例研究。
邀請朋友，雙方都能獲得一個月免費 — HeatMapX 推薦活動完整指南
從邀請人與受邀人雙方的角度，完整說明 HeatMapX 推薦活動的運作方式：如何發放推薦碼、該輸入在哪裡（是儀表板，不是結帳畫面）、首月免費的適用條件、折抵款項如何發放，以及常見問題解答 —— 全部濃縮在這篇文章裡。
5 min readreferralcampaignguidebilling行為資料能否帶著走——熱圖與 A/B 測試 19 款產品的匯出／API 開放度比較
針對熱圖／工作階段錄影類 10 款產品與 A/B 測試類 9 款產品，橫向整理公開 API 與資料匯出的範圍、付費門檻與資料顆粒度。這份研究報告以「自己的資料是否隨時能取出」為視角，將各公司分為三個等級。
19 min readresearchdata-portabilityapiexportheatmapab-testingcro透過 MCP 將您的熱區圖連接至 Claude（1 分鐘、一行指令）
逐步說明如何將 Claude Code 連接至 HeatMapX MCP 伺服器：發行 API 金鑰、執行一行指令，接著就能提問「哪個頁面的捲動深度最差？」或「我的 A/B 測試誰領先？」等問題。也附上疑難排解說明。
6 min readhow-tomcpclaudeaiintegration如何在 WordPress 網站上安裝熱點圖（一行程式碼，3 分鐘搞定）
三種在 WordPress 加入熱點圖追蹤的方法——主題頁首設定欄位、程式碼插入外掛,或直接編輯 header.php——從最簡單、不需外掛的一行程式碼方案開始介紹。並說明如何確認安裝是否真的生效。
5 min readhow-towordpressheatmapinstallation如何在 Shopify 商店安裝熱點圖（免安裝 App，只需一行程式碼）
如何在 Shopify 商店加入熱點圖追蹤——不需要安裝 App，只要在 theme.liquid 貼上一行程式碼即可。內容涵蓋編輯前備份佈景主題的方法、為什麼結帳頁面不會被追蹤，以及如何確認追蹤真的有在運作。
6 min readhow-toshopifyecommerceheatmapinstallation如何用 Google Tag Manager 安裝熱點圖（免改程式碼，5 分鐘完成）
手把手教學：透過 Google Tag Manager（GTM）安裝 HeatMapX 熱點圖追蹤——5 步驟建立 Custom HTML 標籤並套用 All Pages 觸發條件，附上標籤未觸發時的檢查清單，以及如何請 Claude Code 陪你完成設定。
6 min readhow-togtmgoogle-tag-managerheatmapinstallation什麼是 A/B 測試？給初學者的圖解「操作方式」完整說明
從 A/B 測試的意義到實際做法，即使沒有專業知識也能看懂。涵蓋常測試的元素、5 個步驟的做法、初學者容易卡關的地方，以及與熱點圖的搭配運用。
4 min readab-testingcrohow-tobeginners將 Vercel 函式固定在東京區域以改善體感速度 — 解決橫跨太平洋的往返問題
調查了儀表板顯示需要數秒鐘的問題後，發現原因是 Vercel 函式（美國）與 Supabase（東京）之間的往返。透過固定執行區域與查詢並行化，大幅改善了體感速度，本文記錄了這個過程。
4 min readengineeringnextjsperformancevercelA/B 測試的「流量分配比例」與「A/B 分配比例」有什麼不同？正確設計的思考方式
解說 A/B 測試設定中容易搞混的「流量分配比例（納入實驗的比例）」與「A/B 分配比例」有何不同。分開思考這兩者，就能在控制風險的同時正確驗證。
4 min readab-testingcrohow-to安全預覽外部網站——代理伺服器＋內容淨化＋iframe sandbox 的實作
在 A/B 測試的「變更後預覽」功能中，若要在自家網域安全地顯示使用者的外部網站，該怎麼做？本文分享 SSRF 防護、外部 JS 移除、CSP、iframe sandbox 的多層組合，以及在 sandbox 設定上實際踩過的坑。
5 min readengineeringsecuritynextjsiframe熱區圖與A/B測試的差異與使用方式｜該從哪一個開始？
熱區圖與A/B測試究竟有什麼不同，該如何區分使用？本文將淺顯易懂地說明「發現問題」的熱區圖，與「驗證修改方式」的A/B測試之間的角色差異，以及正確的使用順序。
3 min readheatmapab-testingcrocomparison免費開始 A/B 測試｜只要貼一行標籤、免程式碼，今天就能開始
你是不是也以為，沒有付費工具就無法開始 A/B 測試？其實只要貼一行標籤、不需要寫程式、也不需要信用卡，就能開始。本文將介紹免程式碼 A/B 測試的入門方法。
3 min readab-testingfreenocodecro我們如何將 A/B 測試的配送設計對齊業界標準——分離「配送率」與「A/B 配比」
在設計 A/B 測試功能時，「納入實驗的比例（配送率）」與「A/B 之間的配比」該合而為一，還是分開處理？我們分享參考業界標準、將兩者拆分的原因，以及背後的設計考量。
3 min readengineeringab-testingproduct-designA/B 測試工具競爭全景 2026 — 8 款服務的功能與定價橫向分析
從 Optimizely 到 PostHog，以 2026 年 6 月為基準，橫向調查主要 A/B 測試工具 8 款服務的功能、定價區間、計費模式與技術實作方式。企業級與開發者優先兩極分化、接連不斷的產業整合，以及 WordPress 支援的實際狀況——本文彙整為一份完整的研究報告。
20 min readresearchab-testingcropricingmarket-analysis用 Next.js App Router 將 SaaS 儀表板遷移至側邊欄佈局
從單頁傾倒式佈局到 5 頁側邊欄架構。固定側邊欄的共存、共享 CSS Grid 模板、Coming Soon 模式，以及 LP 與儀表板共用的單一 i18n 字典——用 Claude Code 在 2 小時內完成。
23 min readengineeringnextjsapp-routerclaude-code用 Claude Code 一天重建 SaaS 儀表板 — Tailwind v4 + CSS Grid 表格對齊
我們如何用 Claude Code 在一天內從零重建 HeatMapX 儀表板——涵蓋 Tailwind v4 深色模式、CSS Grid 表格對齊的陷阱，以及 16 次設計迭代的實際樣貌。
18 min readengineeringtailwindcss-griddark-modeclaude-code