遊戲化行銷
終極實戰指南 (Full Visual Master)
本指南整合了「新手入門與技術架構」以及「創意引擎與追蹤投放」的所有精華。這是一份從戰略發想到技術落地的完整地圖。
[第一章] 戰略地圖：從新手到專家
1.1 行前準備 (Prerequisites)
在開始之前，請確保你已經準備好以下「武器」與「身分」。
🚀 安裝戰鬥駕駛艙
- 下載 Google Antigravity (唯一指定開發介面)
- [建議] 下載 GitHub Desktop (讓程式碼備份與上傳更流暢)
🆔 註冊數位身分 (基礎)
- GitHub 帳號：儲存程式碼 (Save)。
- Cloudflare 帳號：發布網站 (Publish)。
1.2 建立「專案地圖感」 (The Strategy Map)
🗺️ 看懂你要走的路，才不會在跳轉中迷失
- [入口] 落地頁 (Landing Page)：
/ - 第一站。
- [跳轉] LINE Login (授權)：
/line/login - 引導開發權限授權。
- [處理] Callback (驗證)：
/line/callback - Server 驗證身分並執行發獎。
- [終點] 領獎成功頁 (Success)：
/ - 顯示客製化成果。
1.3 腦機同步 (Brain Sync)
讓 Agent 在開始前具備「完整的靈魂」。請複製下方全部內容，貼給你的 Agent，並等待它回應。
# ANTIGRAVITY Agent Context
這份文件是為你 (AI Agent) 準備的「專案全貌」。
使用者 (學員) 正在跟隨《遊戲化行銷終極實戰指南》進行開發。
請閱讀以下內容，並協助學員完成專案。
---
## 1. 你的角色 & 腦機同步 (Role & Brain Sync)
### 基本身份
* **身份**：資深 Full-stack 工程師 Copilot。
* **任務**：協助學員從零建置一個「基於 Cloudflare Pages 的 LINE 遊戲化行銷網站」。
* **核心守則**：
1. **Safety First**：不破壞現有功能，不做危險操作.
2. **Step-by-Step**：不要一次給出一大堆代碼，分步驟引導學員。
3. **Privacy**：絕對不紀錄或傳送 PII (個人識別資訊)。
### 系統初始化與路由規則 (System Init)
請立即執行以下「腦機同步」協定：
**1. 意圖路由規則 (Intent Routing)**：
* 涉及修改程式碼 -> 遵守 **TDD (測試驅動開發)**。
* 涉及解釋原理 -> 遵守 **CoT (思維鏈)**。
* 任何情況 -> 遵守 **Safety (安全第一)**。
* 涉及數據分析 -> 遵守 **Analyst (數據分析)**。
* **語言**：全程使用 **繁體中文 (Traditional Chinese)**。
**2. 內建技能庫定義 (Internal Skills)**：
* **Safety.md**：保留現有功能、最小修改、破壞性變更需詢問。
* **CoT.md**：規劃時拆解問題、逐步推論、最後給結論。
* **TDD.md**：先寫測試計畫、RED (失敗測試)、GREEN (實作代碼)、REFRACTOR (重構)。
* **Analyst.md**：關注轉換率 (Conversion)、數據記錄 (Data)、資產化 (Asset)。
## 2. 專案架構 (Stack)
* **主機**：Cloudflare Pages
* **後端框架**：Hono (TypeScript)
* **資料庫**：Cloudflare D1 (SQL)
* **前端**：原生 HTML/JS (無複雜框架，追求極速與低成本)
* **關鍵整合**：LINE Login (LIFF), Google Analytics 4, Meta Pixel
## 3. 開發里程碑 (Milestones)
請根據學員目前的進度，提供對應的協助：
### Phase 1: 基礎建設 (Chapter 1 & 2)
* **目標**：建立專案並成功部署到 Cloudflare。
* **關鍵技術細節**：
* 目錄結構：`public/index.html` (前端), `src/index.ts` (後端), `package.json`, `wrangler.toml`。
* **Cloudflare Build 設定 (重要)**：
* Framework Preset: **None**。
* Build command: `npm run build`。
* Output directory: `dist`。
### Phase 2: 創意與遊戲邏輯 (Chapter 3 & 4)
* **目標**：將「情感任務」轉化為「HTML5 遊戲」。
* **關鍵技術細節**：
* 遊戲主檔：`public/game.js`。
* 核心循環：Player (移動) -> Spawner (掉落物) -> Score (計分) -> Game Over (結算)。
* UI 綁定：需與 `index.html` 的 DOM 元素互動 (Start Screen, Game Canvas, Result Modal)。
### Phase 3: LINE 整合與資料庫 (Chapter 5)
* **目標**：讓用戶透過 LINE 登入並儲存成績。
* **關鍵技術細節**：
* **LIFF SDK**：需在 HTML Head 引入 SDK 並執行 `liff.login()`。
* **Callback URL**：Cloudflare (`/line/callback`) 必須與 LINE Developers 後台設定完全一致。
* **資料庫 (D1)**：
* Agent 負責產出 Schema (`schema.sql`)。
* **提醒學員**：必須手動去 Cloudflare D1 Console 執行 SQL 建立表格。
### Phase 4: 追蹤與投放 (Chapter 6 & 7)
* **目標**：埋設追蹤碼並驗證。
* **關鍵技術細節**：
* **3 個核心事件**：`game_start`, `game_complete`, `friend_success`。
* **Meta 對應**：`friend_success` 必須觸發標準事件 `CompleteRegistration`。
* **隱私**：不送 User ID。
* **驗證**：引導學員使用 GA4 DebugView 與 Meta Test Events 進行即時驗證。
## 4. 你的行為模式 (Behavior)
當學員請求協助時：
1. **先確認進度**：他在哪一章？卡在哪一步？
2. **提供指令**：如果是寫 Code，請提供 `Code Block`。如果是操作雲端後台，請提供「點擊路徑」 (例如：Settings > Functions > ...)。
3. **主動除錯**：如果學員遇到 `400 Bad Request` (LINE) 或 `Table not found` (D1)，請直接根據指南的常見問題提供解法。
---
**現在，請告訴學員：「我已讀取專案代碼，請告訴我你目前進行到哪一個步驟？」**
[第二章] 技術創世：AI 協作與系統建置
2.1 專案創世指令
「我要開始『專案創世』，請建立一個基於 Cloudflare Pages (Hono) 的專案：
1. **根目錄**：`package.json`, `wrangler.toml`。
2. **前端**：`public/index.html` (HTML5 基本結構)。
3. **後端**：`src/index.ts` (Hono App 基礎)。
4. **策略**：使用極簡模式，不執行 npm install，採用雲端同步預覽。」
2.2 連結與首次部署
🖐️ 雲端握手 (Cloudflare Connect)
- 存檔上傳：使用 VS Code 或 GitHub Desktop 將代碼 Push。
- 網頁連結：前往 Cloudflare Dashboard > Workers & Pages > Connect to Git。
- Build Settings (關鍵設定)：
- 1. 選擇分頁：前往 Workers & Pages > Create >
務必點擊上方的「Pages」分頁。
- 2. Connect to Git：選擇您的 Repository。
- 3. Framework Preset: 選 "None" (絕對不要選 Hono)。
- 4. Build command: 填入
npm run build
- 5. Output directory: 填入
public
- *註：真正的 Pages 專案不會有「Deploy Command」欄位。
[第三章] 創意引擎：情感任務設計
「替關係角色完成任務：失敗有風險，成功有報酬。」
3.1 創意推導六步驟 (The Creative 6-Steps)
Step 1｜商品真相
不要列規格，要找底層價值。句型：我賣的是「能讓別人對我 [改變看法]」的 [解決方案]。
範例：我賣的是「能讓老闆覺得我專業」的廣告術。
Step 2｜角色設定
- 1. 玩家 (Player)：執行者。
- 2. 對象 (Target)：看廣告的人。
- 3. 評分者 (Judge)：出錢的老闆。
Step 3｜關係連結
問：你要讓誰對你改觀？答：透過說服客戶，來贏得評分者的信賴。
Step 4｜情感任務
公式：我要在【關係】裡完成【任務】，證明我值得【報酬】。
Step 5｜風險與報酬
未完成風險：角色失格 (信任崩壞) / 完成報酬：被信賴、預算提高。
Step 6｜解決方案
商品本身就是完成任務的「道具」或達成後的「獎座」。
3.3 視覺化生產 (Gemini Prompt)
"請為我生成一張資訊圖表流程圖 (Infographic
Flowchart)。風格為扁平化向量插圖，紅色代表風險/負面，綠色代表報酬/正向。內容對應：[貼上你的創意推導結果]"
[第四章] 誘餌與鉤子：遊戲核心邏輯
4.1 將「情感任務」翻譯成「遊戲機制」
| 創意規格 |
遊戲機制 |
| 玩家角色 (誰在玩) |
Player (控制的主角) |
| 情感任務 (想達成什麼) |
Goal (遊戲目標：如名單蒐集) |
| 失敗風險 (代價) |
Enemy/Timer (失敗條件：如預算燒完) |
| 成功報酬 (獎勵) |
Score/Result (分數結算：如黃金證書) |
4.2 實作指令：通用遊戲引擎
「我是[產業]業者。請幫我開發 `public/game.js`。
我已經完成了創意推導，請你將以下規則『翻譯』成遊戲機制：
1. **主角 (Player)**：[填入角色]，左右移動。
2. **掉落物 (Spawner)**：
- 壞東西 (扣分)：代表 [風險]，例如：客訴。
- 好東西 (加分)：代表 [目標]，例如：名單。
3. **結算 (Game Over)**：顯示 [失敗文案] 或 [成功文案]。
4. **UI**：在 index.html 顯示分數與『立即領取 [商品]』按鈕。」
[第五章] 鎖定與轉化：LINE 串接與防錯
5.1 LINE 全套串接檢查點
🖐️ LINE Developers 關鍵清單
- [重要] Login Channel 與 OA 必須在同一個 Provider 下。
- Callback URL：填入
https://[專案].pages.dev/line/callback。
- Linked OA：在 Channel Settings 選好官方帳號。
- Add friend option：設為 "On (Aggressive)"。
- LIFF App：Scope 勾選
profile, openid。
5.3 資料庫架構 (人機協力)
步驟 1：雲端後台建置 (你做)
前往 D1 Create biz-db，Settings >
Functions > D1 Bindings 命名為 DB 並 Save，隨後重新部署。
步驟 2：資料表設計 (Agent 做)
「請為我的 Cloudflare D1 資料庫設計 Schema (schema.sql)。包含 Users, GameRecords, Leads 表。並實作 API POST /api/score
儲存成績。」
步驟 3：執行建表 (你做)
- 複製
schema.sql 內容。
- 前往 D1 >
biz-db > Console。
- 貼上 SQL 指令並點擊 Execute。
[第六章] 數據追蹤：關鍵事件埋設
「只追蹤 3 個關鍵事件，讓數據會說話。你要的不是大數據，而是聰明數據。」
6.1 核心策略：極簡追蹤三步殺
- game_start：開始玩 (流量有效與參與意願)。
- game_complete：完成遊戲 (內容吸引力)。
- friend_success：加友成功 (最終轉換)。
*Meta 設定：friend_success 對應標準事件
CompleteRegistration。
🛡️ 隱私天條：絕對禁止傳送 PII (userId, displayName 等識別資訊)。
6.3 實作三部曲
1. 準備 ID
GA4 (G-ID) / Meta (Pixel ID)。
2. 注入追蹤碼
「請幫我建立 `public/modules/tracking.js`。
1. **建立物件**：含 `init` 與 `event`。
2. **事件點**：埋設 `game_start`, `game_complete`, `friend_success`。
3. **Meta 特殊**：`friend_success` 觸發 `fbq('track', 'CompleteRegistration')`。
4. **驗證**：引導我使用 GA4 DebugView 與 Meta Test Events。」
3. 即時驗證
- GA4 DebugView：Admin > Data display > DebugView。
- Meta Test Events：Events Manager > Data sources > Test events。
[第七章] 廣告投放：獲客黃金組合
Meta Ads 實戰攻略
2-1 Campaign (活動層級)
- 行銷活動目標 (Objective): 潛在顧客 (Lead Gen)。
- 預算與出價: 選擇成本上限，於廣告組合輸入對應成本。
2-2 Ad set (廣告組合層級) — 核心 3 格
- 轉換位置: 網站 (Website)。
- 資料集 (Dataset): 選你的像素 ID。
- 轉換事件:
CompleteRegistration。
- 關鍵技巧: 務必設定「每次成果目標」。無受眾時用「高效速成」，排除 Audience Network。
2-3 Ad (廣告層級)
- 集中社交證明: 多個廣告組合共用同一個貼文 ID。
- 按鈕設定: 不要新增按鈕，避免誤觸。
- 創意設定: 不要使用 AI 創意強化，避免顯示錯誤。
[第八章] 新手救生網：常見卡關排除
-
🛑 「我改了程式碼，但網頁沒變？」
- 原因：瀏覽器快取或未重新整理。
- 解法：確認 Success 後使用無痕視窗，或按
Ctrl + Shift + R 強重新整理。
-
🛑 「LINE 顯示 400 Bad Request？」
- 原因：Callback URL 不一致。
- 解法：尾端
/ 須一字不差，不可使用測試預覽網址。
-
🛑 「資料庫讀不到？ (D1 Error)」
- 原因：變數名非
DB 或未 Redeploy。
- 解法：變數須填大寫
DB，點擊 Save 後必須完成 Redeploy 才會生效。
-
🛑 「找不到 Meta Pixel？」
- 原因：介面改名。
- 解法：現改名為「資料集 (Datasets)」，ID 功能完全相同。