Інтерактивні банери

Оновлено: 2026-04-17 (додано матеріали Флувір v2 + Eskimi reference)

📎 Артефакти Флувір v2 (реф для всіх наступних банерів)

HTML: /srv/wiki/interactive-banners/samples/fluvir_banner_300x250_v2.html (585 рядків, self-contained, SVG+CSS+vanilla JS, без зовнішніх fetch-ів)
Трекер (Google Sheets): https://docs.google.com/spreadsheets/d/1XzaQaV1ITqpi39yXKR9H-zfMhcV5KUraD_FieSnqKvQ (публічний доступ link-share)
Механіка: 3 "мікроби" на екрані → тап → поп-анімація → 3 тапи завершують гру → shield overlay + CTA до продукту
Референс натхнення: https://www.eskimi.com/gallery (rich-media DSP gallery)

Статистика (2026-04-13 … 2026-04-17, ~5 днів)

Метрика	Значення	%
Impressions (`banner_impression`)	84 854	100%
Threat taps (`threat_tap`)	9 078	10.7% engagement
Game completes (`banner_game_complete`)	3 487	41% від тих, хто тапнув
CTA clicks (`banner_cta_click`)	530	0.62% CTR (15.2% від completers)

Висновок: 0.62% CTR — значно вище середньостатистичного display (~0.05-0.1%). Формат працює.

Технічна замітка

HTML не має inline-трекінгу — події надходять через DV360 creative wrapper і/або окремий Apps Script збирає в Sheets. Саме цей Apps Script — bottleneck (OAuth-токени ламаються), див. Рівень 1 проблему нижче.

Концепція

Рекламні банери з інтерактивністю замість статичних зображень. Два рівні реалізації.

Рівень 1 — Вже існує (Флувір)

Що є:

Банер "мікроби → тап → продукт" для бренду Флувір
Google Sheets трекер взаємодій
Інтеграція з DV360 (доставка)
Looker Studio дашборд з результатами

Проблема для масштабування:

Apps Script + Google Cloud їдять OAuth токени
Потрібне системне рішення для запуску на кількох брендах

Стек: HTML5, JS, Google Apps Script, DV360, Looker Studio

Рівень 2 — Напрямки розвитку

2.1 Brand Lift Survey в банері

Ідея: Мінідослідження прямо в банері без зовнішньої панелі.

"Який з цих продуктів ви знаєте?" → вибір варіантів
"Як ви боретесь з цією проблемою?" → голосування
Результати збираються в реальному часі

Переваги: Дешевий cost per insight, не потрібна панель дослідження, живе у форматі звичайного банеру.

Статус: 🔵 Ідея, в Notion

2.3 Zest Дитячий Магній — launch SKU (2026-04-17)

Concept-brief: /srv/projects/crewai-content/reports/zest_kids_mg_banner_brief_2026-04-17_2049.md

10 ігрових концептів (Drag-and-drop, Tap-to-clear, Catch-falling, Memory, Scratch, Path-draw, Bubble-pop тощо)
Legal review + compliant rewrites (рівень ризику: Низький після правок)
DV360 feasibility для 300×250 / 728×90 / 160×600 / 320×480
Styleboard "Tactile Care" (paper-cut craft, палітра: #FF9E1B / #B5EAD7 / #E84A5F / #FFF5E1)
Shortlist: Фокус-Лінза (Концепт 2) + М'язова підзарядка (4) + Трансформація (5) + Bubble Pop (10)
Згенеровано розширеною командою CrewAI (+ game_designer, dv360_tech_specialist, legal_gate)

Status: 🔵 бриф готовий, чекає на ревю Сергія → передача в продакшн

2.2 Міні-гра для НЗ-бар (ензими)

Концепція: Tower Defense — продуктова освіта у форматі гри.

Ферменти розщеплюють піцу шар за шаром
Кожен фермент б'є конкретний інгредієнт (ліпаза → жир, амілаза → вуглеводи)
Геймплей = навчання що робить продукт

Переваги: Незабутній формат, продуктова освіта, висока залученість (CTR x3-5 від статичного).

Статус: 🔵 Ідея, в Notion

Технічний план (загальний)

HTML5 Canvas або CSS анімації для рендеру
Vanilla JS (без фреймворків — менше вага банеру)
API endpoint для збору взаємодій (замінить Apps Script)
Підтримка форматів: 300×250, 728×90, 160×600, 320×480

Наступні кроки

[ ] Вирішити проблему токенів (OAuth → Service Account?)
[ ] Зробити шаблон генератора банерів
[ ] Запустити Brand Lift Survey на одному бренді (пілот)