透過輕量化 HTML5 刮刮卡互動，將一次普通廣告曝光轉化成更具參與感的品牌體驗。
這款互動展示廣告將傳統 Banner 重新設計成「刮開內容」的互動形式。用戶可以直接使用滑鼠或手指刮開遮罩，逐步揭示隱藏的宣傳內容、優惠、獎賞或 Campaign Message，完成互動後再引導至 Campaign CTA。 整個體驗以輕量、Responsive 及容易理解為核心，確保 Desktop 及 Mobile 都可以流暢操作，同時兼顧數碼廣告環境對載入速度及效能的要求。Scratch Interaction、Reveal Logic 及 CTA Click-through 亦分開處理，避免互動操作誤觸跳轉，同時保持清晰的轉化流程。
- 跨裝置的自然刮除操作Mobile 使用手指操作，而 Desktop 則使用滑鼠，兩種輸入方式的移動速度及操作感覺差異很大。系統將 Pointer 及 Touch Input 整合成統一的 Interaction Logic，並調整 Brush Size 及移動插值，令刮除效果更加連續及自然。
- 準確計算刮除完成比例系統需要判斷用戶已經刮開多少範圍，才能決定何時進入下一個 Campaign 狀態。透過 Canvas Pixel Sampling 及 Reveal Threshold 計算刮除比例，同時避免在每一次 Pointer Movement 都進行大量像素運算。
- Display Ads 的輕量化效能要求Interactive Display Ad 對檔案大小、載入速度及 Runtime Performance 的要求比一般網站更加嚴格。因此減少不必要 Library、壓縮圖片及 Script，並避免過重動畫及 GPU Effect，確保廣告可以快速載入。
- Responsive Scratch Area 對齊不同 Banner Size、Screen Size 及 Device Pixel Ratio 都可能令 Canvas 與底層圖片出現偏移。透過統一 Canvas Dimension、CSS Scaling 及 Pointer Coordinate Conversion，確保 Resize 後刮除位置仍然準確。
- 分開互動操作與廣告跳轉傳統 Display Ad 通常整個區域都可以直接 Click-through，但 Scratch Card 需要先讓用戶進行拖動操作。如果兩者沒有分開，刮動時容易意外開啟 Landing Page。因此將 Scratch Gesture 與 CTA Click Event 獨立處理，在保留互動自由度的同時維持清晰的轉化入口。
- 在有限廣告空間內說明玩法廣告尺寸有限，不能加入大量操作說明，但用戶又必須立即理解「這裡可以刮」。透過 Scratch Texture、簡短提示文字及即時視覺 Feedback，讓用戶在幾秒內理解玩法，而不需要複雜教學。
- 建立可重用的 Campaign 架構不同 Campaign 可能需要更換背景圖、Scratch Texture、Reward Message、CTA 及 Destination URL。整個互動被拆成可配置模組，讓新的 Campaign 可以主要透過更換 Content 及 Config 完成，而不需要重新開發 Scratch Mechanic。
