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

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

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

【{{ currentFunnel.name }}】轉換階梯圖 D1 真實數據已同步 等待連線查詢 各自獨立的步驟鏈條與 WooCommerce 歸因

目前「{{ 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 跨域縫合)

透過以下專屬 Webhook 端點與輕量 PHP 橋接代碼,讓 0 元名單領取、訂閱制扣款或一次性買斷商品金額百分之百精確歸因至各漏斗步驟。

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

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

! 在 WooCommerce 後台設定 Webhook 的步驟:
  1. 在 WordPress 後台前往 WooCommerce $\rightarrow$ 設定 (Settings) $\rightarrow$ 進階 (Advanced) $\rightarrow$ 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)。
WooCommerce 必備 PHP Code Snippet(訪客 FPID 捕捉與訂單中繼資料寫入):

請加入至 WordPress 佈景主題的 functions.php 或透過 Code Snippets 外掛啟用

{{ wooCodeSnippet }}

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

V1.1.3 智慧無損版

採用「智慧無損追加(Preserve & Append)」技術,100% 保留按鈕既有的商品 ID 與動態促銷優惠券(如 48 小時倒數折價券),原生支援逗號分隔多選擇器與新分頁跳轉!

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

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

{{ aiAssistantPrompt }}
產出的純 JavaScript 嵌入代碼(智慧無損追加版):
{{ generatedAppSnippet }}
V1.1.3 產出代碼的強大優勢與置放指引:
  • 100% 保護動態優惠券:以按鈕原生的 href 為基礎追加參數,絕不洗掉軟體運算出的商品 ID 與限時折價券。
  • 網址 FPID 自動落地:內建網址參數攔截邏輯,訪客進入軟體時若網址帶有 ?fpid=...,自動保存至軟體本地 localStorage。
  • 尊重視窗跳轉:若按鈕帶有 target="_blank",自動以新分頁開啟結帳頁,不中斷軟體當前操作視窗。
  • 置放位置:純 HTML 或 AI 產生網頁請包裹於 <script> ... </script> 標籤內貼在 </body> 正上方;React/Vue 專案請放置於組件掛載生命週期中。

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

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

1 模擬訪客跨域進入

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

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

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

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

3 檢查即時驗證結果

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

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

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

💡 輸入網址後,系統將自動為您生成專屬租戶識別碼並動態配置所有追蹤與 Webhook 端點。
若未填寫,AI 智慧診斷功能將保持待命狀態。
🔒 端對端安全承諾:本系統絕不在 Cloudflare D1 記錄您的金鑰。所有資訊均儲存於您的瀏覽器本地(LocalStorage)中。
➕

建立新的行銷漏斗

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

重新命名漏斗

⚠️

刪除行銷漏斗確認

您確定要刪除「{{ currentFunnel.name }}」嗎?

注意:此動作將一併刪除該漏斗底下設定的所有步驟記錄,且無法復原!

新增步驟至【{{ currentFunnel.name }}】

💡 如何選擇適合的比對模式?
路徑包含 (Contains):只要訪客造訪的網址中含有該文字即算達成。適合含有查詢參數(如 ?fpid=...)或商品編號的網址(例如填寫 /lead-page)。
完全吻合 (Exact Match):訪客瀏覽的完整網址路徑必須 100% 相同(例如 https://example.com/thanks)。適合特定單一且無動態參數的頁面。
{{ toast.message }}