工程日記・第十六天：從「網站不錯」到「shut up and take my money」——一天搭建完整轉化漏斗
我們有一個很漂亮的網站，但轉化路徑爲零。所有 CTA 都指向 /contact 頁面——一個感覺像給酒店 info@ 郵箱發郵件的死衚衕表單。今天我們搭建了完整的轉化漏斗：一個隨處彈出的快速報價彈窗、退出攔截、空腿航班郵件提醒、每個 CTA 旁邊的信任標籤、面向 AI 搜索引擎的 FAQ 結構化數據，以及一個微妙但關鍵的修正——「200+ 飛機」是錯誤的表述。我們有 200+ 種飛機型號，覆蓋全球 5 萬+ 架私人飛機。當你要求別人花 5 萬美元時，用詞很重要。
問題：一個漂亮的死衚衕
昨天我們上線了分析系統、滾動追蹤和速度優化。但今天重新審視網站，我發現了一個尷尬的事實：我們沒有轉化漏斗。
網站上每一個行動號召——"探索機隊"、"開始體驗"、"聯繫我們"——要麼滾動頁面，要麼跳轉到 /contact。那個聯繫頁面是一個通用表單：姓名、郵箱、留言。沒有航班細節，沒有機型偏好，沒有日期。就是"告訴我們你想要什麼"——相當於走進勞斯萊斯展廳，店員遞給你一個意見箱。
一個承諾 AI 即時報價的平臺，卻讓用戶填表然後等郵件回覆。承諾與現實之間的差距令人汗顏。
今天做了什麼
11 個新組件，1 個新 API 路由，1,400+ 行代碼，30+ 個文件改動。三次提交全部上線。
1. QuickQuoteModal — 漏斗的核心
一個功能完整的全局彈窗：
- 機場自動補全：Fuse.js 搜索 7,900+ 個機場，顯示 IATA 代碼
- 日期選擇和乘客人數
- 郵箱捕獲用於後續跟進
- 提交到
/api/v1/quotes/lead-capture
關鍵架構決策：一個包裹整個應用的 QuoteModalProvider context。組件樹中的任何組件都可以調用 openQuoteModal()。這意味着我們可以在任何頁面添加報價觸發器，無需 prop drilling 或狀態管理體操。
2. FloatingCTA 升級
右下角的浮動"獲取報價"按鈕之前鏈接到 /contact。現在直接打開 QuickQuoteModal。同樣的金色強調樣式，同樣的滾動感知可見性——但現在它真正捕獲線索，而不是把用戶扔到一個通用表單上。
3. ExitIntentPopup — 最後一次轉化機會
僅桌面端（mouseleave 檢測在移動端不起作用）。頁面加載 5 秒後才激活，避免煩人的即時彈窗。每個會話只顯示一次（localStorage）。觸發時，在用戶離開前提供最後一次獲取報價的機會。
實現刻意保持溫和：淡雅的暗色遮罩、簡潔的信息、一個打開 QuickQuoteModal 的 CTA。沒有倒計時，沒有虛假緊迫感。只是"離開前——60 秒獲取個性化報價。"
4. EmptyLegAlertSignup — 真正的郵件提醒
空腿航班頁面之前有"設置提醒"鏈接，但點了啥也不會發生。現在有了真正的註冊表單：
- 郵箱輸入 + 航線偏好（可選）
- 新 API 路由：
/api/v1/empty-legs/alerts - 偏好存儲在 Vercel KV
- 通過 Resend 發送確認郵件
這是我們第一個真正的郵件列表建設功能。有空腿優惠時，我們現在可以通知感興趣的用戶了。
5. RelatedCaseStudies — 服務頁面社會證明
9 個服務頁面（包機、會員、禮賓、空腿、商務、團體、活動、寵物出行、醫療轉運）現在各展示 2-3 個相關案例研究，帶數據和客戶評價。映射基於類別——商務包機頁面展示世界 500 強案例，寵物出行展示動物運輸故事。
6. BlogQuoteCTA — 內容內聯 CTA
在博客文章內容和新聞通訊註冊之間插入的樣式化 CTA 卡片。每個博客讀者現在都能看到報價提示。內容營銷 → 線索捕獲，一次滾動搞定。
信任信號無處不在
7. TrustBadges 組件
一個可複用組件，內聯顯示三個信任信號："200+ 機型 · 全球5萬+ 飛機"、"98% 準點率"、"24/7 禮賓服務"。添加到以下位置的 CTA 附近：
- 首頁 Hero 區域
- 所有服務頁面
- QuickQuoteModal 彈窗內
- CTA 區域
8. Hero CTA 優化
首頁 Hero 之前有兩個按鈕："探索機隊"（向下滾動）和"瞭解更多"（向下滾動）。都不捕獲線索。將主按鈕改爲"立即獲取報價" → 打開 QuickQuoteModal。在按鈕下方添加信任微標。保留次要按鈕給想先瀏覽的用戶。
AEO：面向 AI 搜索引擎優化
9. ServiceFAQ 組件 + JSON-LD
Google AI Overview 和 ChatGPT 搜索越來越多地提取結構化 FAQ 數據。我們構建了一個 ServiceFAQ 組件，既渲染手風琴 UI，又注入 FAQPage JSON-LD schema。
在四個高流量服務頁面添加了針對性 FAQ：
- 包機：4 個問答（預訂提前量、費用因素、機場、取消）
- 空腿航班：3 個問答（什麼是空腿、省多少、如何預訂）
- 會員：3 個問答（等級、權益、省錢）
- 禮賓：3 個問答（AI 能力、語言、可用性）
13 個問答，每個都精準匹配用戶向 AI 助手提問的真實查詢。這就是答案引擎優化（AEO）。
最重要的文案修正
10-11. "200+ 飛機" → "200+ 機型 · 5萬+ 飛機"
CEO 發現了一個關鍵的信息錯誤。我們的信任標籤和 Hero 文案說"200+ 飛機"——暗示我們擁有或運營 200 多架飛機。這是誤導。我們實際提供的是覆蓋 200+ 種飛機型號、通過運營商網絡連接全球 5 萬+ 架私人飛機。
這個區別非常重要：
- "200+ 飛機"聽起來像一個小型區域機隊
- "200+ 機型 · 全球5萬+ 飛機"傳達了真實規模
跨 4 個語言（EN/ZH/FR/ES）更新了所有相關文案。當你要求別人花 3 萬到 50 萬美元訂一班飛機時，信任信號中的每個字都必須精準且誠實。
數據對比
| 指標 | 之前 | 之後 |
|---|---|---|
| 線索捕獲點 | 1（聯繫頁面） | 7+（彈窗、浮動 CTA、退出攔截、博客、服務頁、Hero、空腿提醒） |
| CTA → 轉化路徑 | 2 次點擊（CTA → /contact → 提交） | 1 次點擊（CTA → 彈窗 → 提交） |
| CTA 附近信任信號 | 0 | 每個 CTA 都有 |
| FAQ 結構化數據 | 0 | 4 個頁面 13 個問答 |
| 郵件列表功能 | 僅新聞通訊 | 新聞通訊 + 空腿提醒 |
| 新組件 | — | 11 個 |
| 新 API 路由 | — | 1 個 |
| i18n 新增鍵 | — | 38 個（×4 語言） |
下一步
漏斗已經搭好了。接下來需要衡量效果。第 15 天上線的服務端分析會告訴我們：
- 多少用戶看到了 QuickQuoteModal
- 表單完成率是多少
- 退出攔截觸發率和轉化率
- 空腿提醒註冊量
- 哪些 FAQ 問題帶來最多搜索曝光
還需要把 admin dashboard 接入真實數據——目前還是 mock 數據。支付集成仍然是房間裏的大象。
提交記錄
今天三次提交，涉及 30+ 個文件：
9b6a1ae— CRO：6 個新功能（QuickQuoteModal、ExitIntent、FloatingCTA、EmptyLegAlerts、RelatedCaseStudies、BlogQuoteCTA）b19a422— 社會證明：TrustBadges、Hero CTA 優化、ServiceFAQ JSON-LDa7af908— 文案修正："200+ 飛機" → "200+ 機型 · 全球5萬+ 飛機"
準備好飛行了嗎？幾秒鐘獲取個性化包機報價。
訂閱資訊
空腿航班優惠、新航線與航空洞察，直達您的郵箱。