Розробка ігрових (gamified) банерів для DV360 + аналітика взаємодій (gameplay vs CTA, engaged vs passive кліки) у BigQuery. Кожен банер = окремий бренд + свій креатив, але спільна tracking-інфра і methodology.
Live gallery: https://interactive-banners.deltamedicalservices.online/
/fluvir/ — 3 версії (300×250 v1+v2, 300×600 v1) — LIVE у DV360 з 2026-04-30/menopace/ — 18 варіантів у 7 ітераційних серіях (v2-v7), вибір фінального дизайну/proflex/ — HTML5 advergame «Механіка руху», prototypeРаніше окремий subdomain proflex.deltamedicalservices.online redirect'иться на /proflex/.
Why this exists:
KPIs (orient):
Status snapshot: Fluvir v2 LIVE з 2026-04-30 (після tracking-gap фіксу). Menopace — у фінальному виборі дизайну (3 фіналіста + ТОП-2 v7 + open-design ТОП-3 у продакта).
Stakeholders:
| Підпроект | Бренд | Статус | DV360 | Wiki |
|---|---|---|---|---|
| fluvir | Fluvir (противірусний) | 🟢 LIVE | xbid.716177674 (v1), xbid.721925137 (v2) | ./fluvir/ |
| menopace | Vitabiotics Menopace | 🟡 pre-launch (чекає вибір продакта) | TBD | ./menopace/ |
| 🔜 zest (planned) | Zest Mg Kids / Mg B6 | 🔴 not started | TBD | TBD |
[Doctor browser/SafeFrame]
│
│ (1) GET pixel: new Image().src = ENDPOINT/pixel?event=...
│ ↓ обходить SafeFrame CSP connect-src (img-src ширше)
│
▼
[Cloud Function `track`]
europe-central2-banner-analytics-{brand}.cloudfunctions.net
│
│ Parse query string → row
│
▼
[BigQuery]
banner-analytics-{brand}.banner_analytics.events
schema: event_date, event_ts, session_id, event_name,
product, banner_size, banner_ver, campaign_id,
creative_id, site, device, step, duration_ms, payload
impression — банер побаченоview_start — гра ініціалізована (DOMContentLoaded)game_start — користувач почав взаємодіятиgame_finish — користувач догравав до кінцяcta_click — клік на CTA-кнопкуexit — користувач закрив (pagehide listener)banner_ver=v1 — старі банери з sendBeacon/fetch (зламаний tracking, 99.9% gap)banner_ver=v2 — нові з pixel-GET (працює)Через session-join у BQ можна різнити CTA-кліки на 3 категорії:
Не використовувати sendBeacon чи fetch(POST json) — впадають у SafeFrame CSP. Використовувати new Image().src = ENDPOINT/pixel?... (GET-pixel). Деталі — у fluvir/index.md.
ad-pipeline-worker має read-access сюди$sf.ext.meta() postMessage parser)track? (Sergey має репо?) Щоб VPS Claude міг сам деплоїти оновлення.{Сюди Scout-агент додаватиме}
/srv/wiki/interactive-banners/ — буде дeprecated/srv/projects/crewai-content/ — функція run_crew_interactive_banner()banner-builder agent (/root/.claude/agents/banner-builder.md) + interactive-banner skill (/root/.claude/skills/interactive-banner/). Інкапсулює: brand palette presets (Fluvir/Menopace/Zest/ProFLEX), pixel-GET tracking IIFE (canonical fluvir-pattern), 3 типології (quiz/mini-game/static-cta) з event-map'ами, Playwright validation script template, deploy-checklist (path + gallery + wiki cross-ref), BigQuery schema + Grafana provisioning. Reference docs: ~/.claude/skills/interactive-banner/references/{tracking-pixel-get,typology,brand-palettes,playwright-validation,deploy-checklist,bigquery-schema,grafana-visualization}.md. Виклик: /interactive-banner <brand> <type> <size> [<tag>] або природна мова.menopace_300x600_preview_v3.2.html — header без "Менопейс", великий ЕКСПРЕС-ТЕСТ як домінант, МЕНОПАУЗА caps, hero Original + Plus/Night side-by-side (⚠️ CSS-mockup упаковки). URL: https://interactive-banners.deltamedicalservices.online/menopace/menopace_300x600_preview_v3.2.htmlmenopace_300x600_preview_v3.3.html — fix v3.2: замінено CSS-mockup'и на реальні packshots з menopace.ua (Original/Plus/Night webp). Hero Original 96px з фото зліва + badge/tagline справа; Plus + Night нижче (140px) як vertical cards з фото зверху. Brand-palettes.md тепер містить packshot_url поля у pack_variants. Banner-builder agent отримав правило 2b: завжди шукати real packshots перед CSS-mockup'ами. URL: https://interactive-banners.deltamedicalservices.online/menopace/menopace_300x600_preview_v3.3.htmlmenopace_300x600_preview_v3.4.html — два покращення: (1) КРУПНІШИЙ шрифт основних блоків — brand-line 19→21, brand-name 20→22, intro-title 18→20, q-title 17→19, q-opt 14→16, result-desc 13.5→14.5, card-area top 110→118. (2) Branching по результату: якщо ВСІ 6 відповідей = "Ні" → показуємо clean-variant ("У Вас відсутні симптоми менопаузи" + інфо про menopace.ua + один CTA "Дізнатись більше про менопаузу"). Якщо ≥1 "Так" → симптом-варіант з 3 packshots + 2 CTA як було. JS-логіка state.answers.every(a => a === 'no'). Pack heights зменшено (96→84 hero, 140→124 row) щоб скомпенсувати збільшений шрифт. Packshot-sourcing.md додано як 8-й reference у skill. Validation: 2 пасу playwright (symptoms + clean шляхи). URL: https://interactive-banners.deltamedicalservices.online/menopace/menopace_300x600_preview_v3.4.htmlutm_source=dv360&utm_medium=display&utm_campaign=menopace_banner&utm_content=300x600_quiz + utm_term per-CTA (cta_products / cta_detail_test / cta_learn_more / banner_bg). Таргети: "Оберіть свій Менопейс" → menopace.ua/, "Детальне тестування симптомів" → menopace.ua/test-indeks-za-kupermanom/, "Дізнатись більше про менопаузу" (clean-варіант) → menopace.ua/statti/ (блог), фон → menopace.ua/.menopace_300x600_preview_v3.5.html — v3.4 + інфографічні SVG-іконки симптомів над текстом кожного з 6 питань. Іконки: цикл (refresh-arrow), жар (flame), сон (crescent moon), серце (heart+pulse), сухість (droplet), суглоби (bone). Кожна у круглому chip 58px з теплим radial-gradient фоном і terracotta-обведенням. Inline SVG (0 зовнішніх запитів, нульовий вплив на DV360 budget). q-num margin-bottom 12→10, q-title margin-bottom 16→14 щоб скомпенсувати +68px на chip. Validated playwright (intro + 6 questions + result). URL: https://interactive-banners.deltamedicalservices.online/menopace/menopace_300x600_preview_v3.5.htmlmenopace_300x600_preview_v3.6.html — v3.5 + кастомна flat-ілюстрація на intro-картці (жінка з terracotta-волоссям + «біологічний годинник» + 2 рослинні sprig'и + теплий halo) замість мінімалістичної SVG-іконки сонця. Реакція на reference-скріншот Сергія («щось типу такого»). Рішення: inline SVG власної розробки, бо banana-claude MCP на VPS не підключений, а Freepik/Storyset-ілюстрації мають ліцензійні обмеження для фарм-реклами. Inline SVG = 0 license risk, 0 зовнішніх запитів, ідеально для DV360 2MB budget. .intro-icon (60px) → .intro-illust (156px), iconPulse → introFloat (gentle translateY). Validated playwright. ⚠️ Якщо потрібен Freepik-рівень полішу — треба або купити Freepik-ліцензію, або налаштувати banana-claude для AI-генерації. URL: https://interactive-banners.deltamedicalservices.online/menopace/menopace_300x600_preview_v3.6.html