S
行銷漏斗超人 V1.2.1 Multi-Funnel

租戶：{{ config.tenantId || '未設定（請至系統設定輸入商店網址）' }} | {{ config.primaryUrl || '尚未設定主網址' }}

目前檢視漏斗：
{{ isSyncing ? '雲端同步中...' : '🟢 雲端已自動同步' }}
第一步獨立訪客 (FPID)
{{ funnelMetrics.totalVisitors.toLocaleString() }}
即時統計中 等待訪客進入
整體漏斗末端轉化率
{{ funnelMetrics.overallConversionRate }}%
從漏斗入口至末端達成
全過程流失訪客數
{{ funnelMetrics.totalDropoffs.toLocaleString() }}
瓶頸點：{{ funnelMetrics.maxDropStepName }}
歸因累計營收 (WooCommerce)
${{ funnelMetrics.totalRevenue.toLocaleString() }}
來自 Webhook 訂單去重金額
數據週期：
（6 個月原始明細自動輪替清理）

【{{ currentFunnel.name }}】轉換階梯圖 D1 真實數據已同步 等待連線查詢 支援單步編輯、⬆️ ⬇️ 自由調動順序並動態重算轉換率

目前「{{ currentFunnel.name }}」尚未配置步驟，請點擊上方「新增步驟至此漏斗」開始設定

此漏斗目前尚無訪客事件。請將追蹤代碼埋入您的網頁中，訪客造訪後數據將在此即時呈現。
{{ index + 1 }}
{{ step.name }} WooCommerce ({{ step.orderTypeLabel || '訂單事件' }}) {{ step.matchType === 'exact' ? '完全吻合' : '路徑包含' }}
{{ step.matchRule }}
造訪人次 (FPID)
{{ (step.visitors || 0).toLocaleString() }}
步驟轉化率
{{ step.convRate }}%
本步營收
${{ (step.revenue || 0).toLocaleString() }}
下一階段推進
流失率: {{ step.visitors > 0 ? (100 - steps[index+1].convRate).toFixed(1) : '0.0' }}% ({{ Math.max(0, step.visitors - steps[index+1].visitors).toLocaleString() }} 訪客離開)
分析模式：
25% 首屏停留 {{ scrollStats[25] }}%
50% 核心內容 {{ scrollStats[50] }}%
75% 方案與按鈕 {{ scrollStats[75] }}%
100% 抵達頁底 {{ scrollStats[100] }}%
{{ currentHeatmapUrl }} (後端座標載入中...)
真實取樣點數: {{ heatmapClicks.length }} 點
目前此步驟尚無真實點擊熱力數據

當訪客進入「{{ currentHeatmapUrl }}」並在頁面產生點擊時，Cloudflare D1 將即時聚合座標並在此自動繪製點擊光暈。

頁面首屏展示區 (Hero Section)

您的銷售頁 / 名單領取頁標題

主要價值主張與引導說明，訪客進入頁面時的第一視覺接觸焦點。

主要行動按鈕 (CTA)

50% 核心產品功能介紹

75% 方案定價與購買轉換區塊

[Scroll 25%] 抵達率 {{ scrollStats[25] }}% 曝光保證區
[Scroll 50%] 抵達率 {{ scrollStats[50] }}% 核心特點區
[Scroll 75%] 抵達率 {{ scrollStats[75] }}% 方案與點擊區
[Scroll 100%] 抵達率 {{ scrollStats[100] }}% 頁尾與保障區

OpenAI `gpt-6-luna` 深度轉化率顧問

Temperature: 1 (強制)

系統會自動提取目前選中的【{{ currentFunnel.name }}】漏斗數據、流失率、熱力採樣與滾動深度，無狀態發送至 OpenAI，產出高度針對性的 CRO 行動清單。

CRO 診斷報告輸出（當前目標：{{ currentFunnel.name }}） 來源端點: /api/proxy/openai (已鎖定安全同源)

點擊上方按鈕，將【{{ currentFunnel.name }}】收集到的真實數據交給 `gpt-6-luna` 深度剖析優化空間

（需先於【系統設定】中填入您的 OpenAI API Key）

① 用戶端追蹤代碼 (Tracker.js - 零變更相容多漏斗)

貼於名單頁、講座頁、銷售頁的 <head> 或 <body> 最底部（所有漏斗共用同一代碼）

{{ generatedTrackerScript }}

② WooCommerce 完整閉環串接（Webhook 即時回傳 + 主動穿透與雙軌即時救援加固 PHP）

V1.1.9 主動穿透 + 雙軌即時救援版

採用「30 天 Cookie + User Meta 終身綁定 + 轉址保護 + 表單 Hidden Input AJAX 穿透 + 五級深度訂單捕獲 + Blocks Store API + 原生感謝頁 thankyou 補救 + 外部自訂轉址 template_redirect 救回」，不論商品是否轉址、是否登入、是否走 AJAX 下單，訂單皆 100% 成功歸因。

🔗 您的專屬 WooCommerce 傳遞 URL (Delivery URL)：
{{ generatedWebhookUrl }}

系統已依據您的商店網址自動運算專屬租戶 ID（{{ config.tenantId || '尚未生成（請先至系統設定輸入商店網址）' }}）並即時帶入。在 WooCommerce 後台貼上此網址即可！

! 在 WooCommerce 後台設定 Webhook 的步驟：
  1. 在 WordPress 後台前往 WooCommerce → 設定 (Settings) → 進階 (Advanced) → Webhooks。
  2. 點擊 新增 Webhook (Add webhook)。
  3. 依序填寫以下欄位清單：
    名稱 (Name)：行銷漏斗超人訂單回傳
    狀態 (Status)：啟用中 (Active)
    主題 (Topic)：已建立訂單 (Order created) （若需付款成功才觸發也可選「訂單已更新」）
    傳遞 URL (Delivery URL)：請貼上上方產出的專屬端點
    密鑰 (Secret)：留空即可（或輸入任意自訂字串）
    API 版本 (API Version)：WP REST API 整合 v3
  4. 點擊 儲存 Webhook (Save Webhook)。
⚙️ 【選用】特定商品結帳後自動轉址外部設定（例如：0元領取直跳線上講座 / 大師班）
兩欄皆填寫時生效；任一留空則自動停用轉址並正常停留原生感謝頁
留空表示不轉址；支援填寫單一或逗號分隔多個 ID（如 1431202, 1431203）
命中上述商品時將自動 302 跳轉至此網址，並自動帶上 fpid、email 與 order_id
WooCommerce 必備 PHP Code Snippet（已依上方設定即時動態生成）：

原生相容傳統感謝頁（woocommerce_thankyou）與特定商品直接 302 外部轉址，請加入 WPCode 或子主題 functions.php

{{ wooCodeSnippet }}

③ 通用軟體 / 應用程式升級按鈕串接產生器

V1.1.5 事件委派動態捕捉版

改採 Document 捕捉階段全域事件委派（Event Delegation），100% 捕獲 React/Vue 動態渲染卡片、非同步加載按鈕與促銷彈窗，並無失真保留原按鈕商品與折價券！

例如：#upgrade-btn, .pro-btn（支援逗號分隔多個選擇器）
若按鈕已有 href 則優先保留原連結與折價券；若為空或 # 才使用此備用路徑
例如：currentUser.email 或 currentUser.id (無則填 null)
AI 小幫手 如果您的軟體是由 AI 工具（如 Cursor、v0、Lovable 等）打造：

請將下方這段專業提示詞複製貼給您的 AI，它將立即為您全面盤點出軟體中**所有**升級按鈕選擇器、動態優惠券與登入帳號變數：

{{ aiAssistantPrompt }}
產出的純 JavaScript 嵌入代碼（事件委派動態捕捉版）： 
{{ generatedAppSnippet }}
V1.1.5 事件委派代碼優勢與置放指引：
  • 事件委派動態捕捉：採用 e.target.closest() 與 Capture 捕獲階段，即使按鈕是由 React 條件渲染或事後彈出的 Modal 彈窗，點擊瞬間均能 100% 精準捕捉。
  • 100% 保護動態優惠券：以按鈕原生的 href 為基礎追加參數，絕不洗掉軟體運算出的商品 ID 與限時折價券。
  • 網址 FPID 自動落地：訪客進入軟體時若網址帶有 ?fpid=...，自動保存至軟體本地 localStorage。
  • 尊重視窗跳轉：若按鈕帶有 target="_blank"，自動以新分頁開啟結帳頁，不中斷軟體當前操作視窗。

④ 端到端整合測試驗證教學 (E2E Verification Checklist)

在正式導入真實廣告流量前，請依照以下 3 個步驟進行全流程閉環驗證，確保 100% 準確上線：

1 模擬訪客跨域進入

在瀏覽器網址列手動輸入帶有測試 FPID 的網址（新開無痕視窗測試更準確）：

{{ testSimulationUrl }}
2 成立一筆測試訂單

在您的商店結帳頁面內，完成一筆 0 元名單領取 或是任意金額的測試訂單（可用支票/銀行轉帳或測試金流）。

* 系統後端將在秒級內透過 Webhook 接收到訂單並提取 fp_test_999。

3 檢查即時驗證結果

回到行銷漏斗超人儀表板，點擊「重新整理數據」按鈕。

🎉 驗證成功：您會看到對應的 WooCommerce 步驟造訪數立即增加，或訂單營收金額跳出數字！

⑤ Microsoft Clarity 訪客操作螢幕錄影與跨域身分聯動 (Session Replay & Identification)

免費百萬級串流支援

透過微軟官方免費的 Clarity 螢幕錄影 SDK，結合本系統的 FPID 跨網域注入與直連播放端點，實現「在漏斗步驟旁一鍵直開新分頁播放流失訪客真實操作錄影」！

▶️ 前往 Clarity 錄影後台
填寫後系統將自動生成專屬整合代碼，並在步驟卡片啟用直連播放。
狀態：{{ config.clarityId ? '🟢 專案 ID 已綁定 (' + config.clarityId + ')' : '🟡 尚未綁定 Clarity 專案 ID' }}
此設定支援 URL 共同參數 ?clarityId=... 與 Iframe 雙向同步。
產出的 Microsoft Clarity + FPID 跨域身分整合代碼（可直接複製貼上）： 
{{ clarityCodeSnippet }}
💡 手把手 4 步驟落地指引：
  1. 免費取得微軟專案 ID： 前往 Microsoft Clarity 官網 登入並「Add new project」（名稱與網址自訂即可，完全免費且無頻寬限制）。將取得的 10 碼 Project ID 填入上方欄位。
  2. 部署至全鏈路網頁： 將上方產出的這段代碼，分別貼入名單頁 (Pages)、結帳頁 (WordPress WPCode) 與講座頁 (Pages) 的 <head> 區塊。
  3. 跨網域身分無縫歸戶： 代碼會自動提取每位訪客的 FPID 並執行 window.clarity("identify", fpid)，微軟後台會將不同網域的軌跡自動歸戶在同一人名下。
  4. 步驟卡片一鍵直連播放： 切換至「漏斗即時轉化畫布」，在任意步驟卡片點擊「訪客錄影」按鈕，彈窗中直接點擊「▶️ 觀看此人操作錄影」，秒開微軟播放器，無需手動搜尋！

系統設定與金鑰零儲存配置

💡 輸入網址後，系統將自動為您生成專屬租戶識別碼並動態配置所有追蹤與 Webhook 端點。
若未填寫，AI 智慧診斷功能將保持待命狀態。
💡 填寫後，系統將在各步驟自動啟用最近訪客錄影直達播放功能（支援 URL 共同參數 ?clarityId=... 與 Iframe 雙向同步）。
🔒 端對端安全承諾：本系統絕不在 Cloudflare D1 記錄您的金鑰。所有資訊均儲存於您的瀏覽器本地（LocalStorage）中。
➕

建立新的行銷漏斗

建立後為全新空白步驟，可由您自由依業務流程新增步驟。
✏️

重新命名漏斗

【{{ stepRecordingsData.stepName }}】最近訪客操作錄影 (10人)

所屬漏斗：{{ currentFunnel.name }} | 週期：{{ dateFilter }}

轉碼就緒篩選：
15~30 分鐘內訪客可能尚在微軟轉碼中
尚未配置 Clarity 專案 ID，錄影直連按鈕將受限。請先至設定或 Tab 4 填寫。
正在從 D1 資料庫撈取此步驟最新訪客軌跡與流失診斷...

目前此步驟在所選週期（{{ dateFilter }}）內尚無訪客紀錄。

{{ rIdx + 1 }}
{{ rec.fpidShort }} 滾動 {{ rec.scrollDepth }}% ⏳ 微軟轉碼中
最後造訪：{{ rec.timeAgo }} | {{ rec.lastSeen }}
❌ 於本步猶豫後流失 {{ rec.statusLabel || '🟢 成功推進至下一步' }}
💡 點擊按鈕將以新分頁秒開微軟官方播放器直接回放。
{{ toast.message }}