Запит (voice 2026-05-04 20:10): «Бачу референс playable-реклами в APK — pixel-art reveal mini-game. Як це робиться технічно? Можна щоб це вело на сайт, а не на мобільний застосунок? Хочу зробити аналог для Ензибар, де ензими розщеплюють nutrients (клітковина / білок / жири).»
Playable Ads формат за політикою тільки під app installs (deep-link на App Store / Google Play, не на website).Жанр: Pixel-Art Reveal (синонім «Block Blast Pixel», «Pixel Coloring Battle», «Royal Match Pixel»). Один з домінантних playable-форматів 2025-2026 на ринку мобільної реклами:
Це РЕАЛЬНА playable-механіка, не статичний банер. Користувач має реальну агентність, гра реагує. Engagement-rate у такого формату історично у 3-7× вище за стандартний display.
| Шар | Технологія | Розмір |
|---|---|---|
| Render | Canvas2D (vanilla) або PixiJS v8 | ~25-80 KB |
| Game loop | requestAnimationFrame + custom state-machine | ~5 KB |
| Input | Pointer Events (touch/mouse уніфіковано) | <1 KB |
| Анімації | CSS transforms + GSAP-mini, або custom tween | ~10-15 KB |
| Аудіо | вимкнено (SafeFrame блокує autoplay) | 0 |
| Sprites | один атлас (1-2 PNG) + JSON mapping | ~30-50 KB |
| Логіка | TypeScript → ESBuild minify → vanilla JS | ~15-30 KB |
Total payload: ~120-180 КБ (вписується у DV360 ліміт 200 КБ для HTML5 zip-bundle).
| Канал | Формат | Click → website? | Розмір | Складність | Підходить нам? |
|---|---|---|---|---|---|
| Google DV360 | HTML5 zip ≤200 КБ | ✅ так (clickTag) | 300×250 / 300×600 / 728×90 / 970×250 | низька | ✅ ДА — наш поточний канал, Fluvir+Menopace тут |
| Google Studio (Rich Media) | HTML5 + advanced features | ✅ так | до 300 КБ | середня | ✅ опція якщо потрібен polite-load або експандер |
| Programmatic platforms (Adform, Sizmek) | HTML5 rich media | ✅ так | до 500 КБ | середня | ⚠️ окремий контракт, для нас зайва ускладненість |
| Direct buy на медичних сайтах (apteka24, tabletki) | HTML5 banner | ✅ так | залежить | низька | ⚠️ 1×1 deals, ручний flight |
| Meta Playable Ads | playable.html | ❌ тільки app | до 5 МБ | низька | ❌ не підходить — БАД не має mobile app |
| TikTok Playable Ads | playable.html | ❌ тільки app | до 5 МБ | низька | ❌ те саме |
| AppLovin/IronSource/Vungle | playable.html / MRAID | ❌ тільки app | до 5 МБ | середня | ❌ те саме |
Підсумок: для website-конверсії в нашому випадку оптимальний шлях — DV360 HTML5 banner (вже знайома траєкторія).
Інфраструктура tracking pipeline вже стоїть з фіксу 30.04 (банер Fluvir):
[browser/SafeFrame] → pixel-GET → Cloud Function `track`
↓
BigQuery banner_analytics.events
↓
Grafana dashboard (live)
Для Ензибар: додати product=enzybar параметр + новий banner_ver → ті самі івенти view_start / game_start / level_complete / cta_click / exit + кастомні enzyme_match_correct, enzyme_match_wrong, level_progress у payload JSON-полі. Нічого нового деплоїти не треба — і Cloud Function, і BQ-схема готові на multi-product.
Grafana дашборд можна склонувати → enzybar-banner-live зі змінною product.
Усі 3 концепти підпорядковані легал-обмеженням БАД (без претензій на лікування), focus на «легке знайомство з механізмом дії».
Механіка: на екрані падає їжа (вузька 2D-ілюстрація: яблуко = клітковина, стейк = білок, олія = жир). Знизу 3 кольорових ензими (наприклад, синій-протеаза / жовтий-амілаза / зелений-ліпаза). Користувач тягне правильний ензим на продукт — ензим розщеплює, +score. Wrong drag → продукт «не перетравлюється», score не росте.
Залучення: середнє-високе. Інтуїтивно.
Механіка: анімований шлунок у центрі екрану. Зверху падає змішана їжа (одночасно жир+білок+клітковина в одному болюсі). Знизу 3 кнопки-ензими. Користувач швидко тапає ензими в правильному порядку (амілаза → протеаза → ліпаза, або порядок під рандом). Combo-meter +x2/+x3 за rapid правильні натиски.
Залучення: висока, але «без думання».
Механіка: скопійовано один-в-один з відео-референсу:
Зверху pixel-art порожнього кишечника (або умовний «живіт»), забруднений «темними блоками» = неперетравлені nutrients (клітковина/жир/білок).
Знизу armory: 3 кольорових ензими з числами «дамаг».
Drag ензим на блок → -X HP. Правильний ензим (відповідає кольору блоку) → -3X дамаг. Неправильний → -X.
Коли всі блоки знищено → revealed «чистий шлунок з усміхненим Ензибаром».
End-card: «Ензибар — комплекс ензимів проти важкого травлення. Купити →»
✅ Найвища схожість з референсом (Сергію саме це сподобалось)
✅ Pixel-art стиль — модний, дешевий у виробництві (8×8 / 16×16 grid)
✅ Прогрес-бар + revealing illustration → «тяга до фінішу»
✅ Проста логіка raycast hit → колір збігся / ні
⚠️ Pixel-art може дисонувати з премійно-фарм-брендингом Ензибар (треба узгодити з бренд-стилем)
⚠️ Storytelling «темні блоки в кишечнику» — обережно з legal: «знімає неприємні відчуття після їжі», не «лікує»
Залучення: найвища з трьох, бо механіка вже валідована ринком (хіт-формат 2025).
| Критерій | А (matching) | Б (tap-feed) | В (pixel-reveal) |
|---|---|---|---|
| Освітня цінність | 🟢 висока | 🟡 середня | 🟡 середня |
| Engagement-потенціал | 🟡 середній | 🟢 високий | 🟢 найвищий |
| Схожість з референсом | низька | середня | дуже висока |
| Час дев. MVP | 2-3 дні | 1-2 дні | 3-4 дні |
| Артдиректорський рестарт | помірний | низький | високий (pixel-art стиль) |
| Розмір bundle | ~140 КБ | ~120 КБ | ~170 КБ |
| Legal-ризик | низький | низький | середній (треба обережно з claim) |
Концепт В (Pixel-Art Reveal) — як основний MVP. Аргументи:
Як проміжний варіант — Концепт А (drag-and-drop matching) — якщо для бренд-команди важлива освітня лінія («лікар хоче бачити що там показується наука»).
Продумати paralelно (не для першого MVP):
| Тиждень | Що | Хто |
|---|---|---|
| 1 (5 днів) | Концепт-полишинг + sprite-art (3 ензими, фон, прогрес-бар, end-card) | дизайн (Сергій / зовнішнє) |
| 2 (3-4 дні) | Дев HTML5 банера 300×600, gameplay logic | VPS Claude / Desktop Claude |
| 2 (1 день) | Tracking integration (нові custom events у payload) |
VPS Claude |
| 2 (1 день) | DV360 bundle збірка + smoke-deploy | Сергій |
| 3 | Soft-launch на 1-2 майданчиках, заміри 4h+24h+7d | Сергій + VPS Claude (Grafana) |
| 4 | Перебудова під 300×250 (адаптація), якщо MVP покаже engagement | VPS Claude |
medizine.ua/enzybar головна чи окрема промо-сторінка з купоном?