MODULE 4

行銷遊戲:
抽獎、刮刮樂、測驗

學完:做出兩種最有效的活動互動,懂機率設定與防重抽。

遊戲機制 = 行銷機制

純前端就能做(零後端、零成本);代價是防重抽只防君子——對活動夠用。

A. 拉霸:prompt 範本重點

做一個單檔 HTML 拉霸抽獎頁:
1. 三個轉輪,按「抽一次」後依序停下
2. 中獎機率由一張表控制,放在程式碼最上方讓我能自己改:
   三個咖啡(大獎)5% / 任兩個相同(小獎)25% / 其他銘謝惠顧
3. 中獎跳出優惠碼 SANWU-XXXX(隨機),附「截圖到店出示」
4. localStorage 記錄已抽過,同一台手機每天限抽一次
5. 中大獎撒一波 confetti
6. 手機優先,按鈕要大

「機率表放最上方」是給未來的自己留調整入口。

A. 拉霸:驗收三招

• 機率表改成 100% 大獎,抽十次都該中 → 證明機率表真的有作用,再改回去
• 抽完重新整理,「今天已抽過」要擋住
• 優惠碼每次中獎都不同

B. 測驗:先用 AI 生題庫

幫我設計「你是哪一型咖啡人」心理測驗:
- 5 題,每題 3 個選項,情境要生活化、有畫面感
- 4 種結果型(儀式感 / 效率 / 社交 / 探險),每型給:
  名稱、兩句個性描述(要準到讓人想截圖)、推薦飲品、分享語
- 每個選項對應到某一型的加權,輸出成 JSON

題目與結果文案是行銷人的主場——測驗的靈魂在「被說中感」。

B. 測驗:再讓 AI 組頁面

用這份 JSON 做單檔測驗頁:一題一畫面、進度條、
答完依加權算出結果型。
結果頁用 canvas 畫一張 1080x1350 的結果圖卡
(型別名稱 + 描述 + 品牌),提供「儲存圖片」按鈕
讓使用者下載去限動分享。配色:深墨綠 + 奶油白。

• 驗收:每條路徑點一輪,四種結果都要到得了
• 下載圖卡打開看:字沒爆框、沒亂碼

常見坑

• 機率寫死在深處 → prompt 要求機率表放最上方
• 結果不值得曬 → 文案弱,技術再好也沒人分享
• canvas 中文字型 → 系統字型堆疊 + 等字型載入
• 把純前端當抽獎系統 → 高價券要後端;到店核銷沒問題
• LINE / FB 內建瀏覽器 → 記狀態一律 localStorage

動手做

• 任務 — 改拉霸 demo 最上方的機率表 PRIZES,抽十次驗證;或請 AI 生你品牌的測驗題庫 JSON
• 預期 — 十次抽下來的中獎率大致符合你設的數字
• 卡關 — 改了沒效,確認動到的是 script 最上方那張機率表,不是別處