Poniżej znajdziesz przykładową, uniwersalną specyfikację reklamy display w formacie HTML5 przeznaczonej do emisji programatycznej (programmatic). W zależności od wymagań konkretnego wydawcy, sieci reklamowej czy platformy DSP (Demand Side Platform) wytyczne mogą się nieznacznie różnić, jednak poniższa lista obejmuje najważniejsze i najczęściej stosowane standardy oraz dobre praktyki.
1. Rozmiary i formaty #
Typowe rozmiary banerów HTML5 (wg standardów IAB):
- 300×250 (Medium Rectangle)
- 728×90 (Leaderboard)
- 320×50 (Mobile Leaderboard)
- 160×600 (Wide Skyscraper)
- 300×600 (Half Page)
- 970×250 (Billboard)
Oczywiście w kampaniach mogą się pojawić również inne rozmiary niestandardowe – kluczowe jest upewnienie się, że dany wymiar jest akceptowany przez platformy, na których chcesz się wyświetlać.
Typ pliku wyjściowego:
- Zazwyczaj akceptowanym formatem jest paczka ZIP, zawierająca wszystkie pliki HTML, CSS, JavaScript, obrazy, fonty i ew. inne potrzebne zasoby (np. wideo).
- Czasem dopuszczalna jest bezpośrednia wstawka kodu HTML (tzw. tag HTML5).
2. Waga pliku (file weight) #
- Zazwyczaj zalecana maksymalna waga kreacji to ok. 150–200 kB (może się różnić zależnie od sieci czy platformy).
- W przypadku zaawansowanych animacji lub wideo dopuszczalna może być większa waga (np. 500 kB lub więcej), lecz zawsze warto dążyć do możliwie niskiego rozmiaru, by baner ładował się szybko i nie był blokowany ze względu na ograniczenia wagowe.
3. Konstrukcja i zawartość HTML5 #
- Plik główny HTML – zawiera strukturę banera:
- Kod HTML z podziałem na warstwy/sekcje.
- Znaczniki meta (charset=”UTF-8″), ewentualnie viewport jeśli targetujesz urządzenia mobilne.
- Kod JavaScript (z reguły umieszczony w zewnętrznym pliku lub osadzony w sekcji
<script>– w miarę możliwości minimalizowany).
- Style CSS – powinny być w zewnętrznym pliku lub sekcji
<style>w nagłówku. Zalecane jest minimalizowanie CSS, aby ograniczyć rozmiar. - Grafiki – preferowane formaty to PNG, JPG, SVG (zależnie od wymagań jakości i skalowalności).
- Grafiki rasterowe (JPG, PNG) powinny być skompresowane bez zauważalnej utraty jakości.
- W przypadku wektorów (SVG) można je osadzać inline lub w osobnym pliku.
- Fonty – najlepiej stosować systemowe (oszczędność wagi). Gdy konieczne są fonty niestandardowe (webowe), należy je w miarę możliwości ograniczyć do niezbędnych znaków (subset), by zmniejszyć rozmiar plików.
- Fallback – w niektórych przypadkach warto mieć plik graficzny (np. JPG) jako backup, zwłaszcza jeśli wydawca wymaga tzw. backup image dla starszych przeglądarek lub w razie problemów z ładowaniem zasobów.
4. Animacje #
- Długość animacji w większości sieci reklamowych jest limitowana (np. maksymalnie 15 sekund), a animacja powinna się zatrzymać lub przejść w stan statyczny po zakończeniu.
- Dopuszczalne są pętle (loop), ale zwykle do 30 sekund łącznie (albo 3 pętle).
- Unikaj zbyt intensywnego migotania lub elementów, które mogą zostać uznane za uciążliwe (np. przesadnie agresywne animacje mogą zostać odrzucone przez niektóre sieci reklamowe).
5. Mechanizm kliknięć (clickTag) #
Aby umożliwić pomiar i śledzenie kliknięć przez DSP/AdServer, w banerach HTML5 wykorzystuje się zmienną clickTag. Przykładowa implementacja:
html
KopiujEdytuj
<html> <head> <meta charset="UTF-8"> <title>HTML5 Banner</title> <style> /* Minimalny CSS */ </style> </head> <body> <div id="banner" style="width:300px; height:250px; cursor:pointer;"> <!-- Zawartość banera --> </div> <script> // Parametr clickTag przekazywany przez AdServer var clickTag = "[REPLACE_WITH_CLICKTAG_URL]"; var banner = document.getElementById("banner"); banner.addEventListener("click", function() { window.open(clickTag, "_blank"); }); </script> </body> </html>
Najważniejsze zasady:
- Brak twardego linku wewnątrz kodu (czyli nie stosujemy
href="..."bezpośrednio), ponieważ DSP i AdSerwery muszą wstawić własny tracking. - Upewnij się, że
clickTagjest podmieniany przez AdServer/DSP (w niektórych systemach bywa używana inna nazwa zmiennej, np.clickTAGlublandingPageUrl).
6. Kompatybilność i testy #
- Reklama powinna poprawnie wyświetlać się w popularnych przeglądarkach (Chrome, Firefox, Safari, Edge) oraz na urządzeniach mobilnych (jeżeli planujemy emisję mobilną).
- Testuj kreację w różnych środowiskach (np. w trybie incognito, na innym komputerze, w środowisku testowym DSP), aby mieć pewność, że zasoby ładują się poprawnie i nie ma błędów w kodzie.
- Upewnij się, że zawartość animowana jest zgodna z wytycznymi wydawcy w zakresie wydajności (np. nie blokuje wczytywania strony, nie obciąża przeglądarki).
7. Dodatkowe wymogi i dobre praktyki #
- Capping animacji: jak wspomniano, większość sieci wymaga zatrzymania animacji po określonym czasie. Max 30 sekund.
- Dźwięk: domyślnie wyciszony (mute). Jeżeli kreacja ma dźwięk, użytkownik powinien móc go włączyć ręcznie (autoplay z dźwiękiem może zostać zablokowany).
- Zachowanie responsywności: w przypadku reklam mobilnych upewnij się, że kreacja jest skalowalna lub masz przygotowane oddzielne rozmiary na mobile/tablet.
- Polityka prywatności / RODO: w niektórych przypadkach (szczególnie w UE) należy zadbać o odpowiednie zapisy informujące użytkownika o wykorzystaniu danych (zależnie od rodzaju kampanii, zawartości itp.).
8. Kroki końcowe przed wdrożeniem #
- Minifikacja: zminimalizuj JS, HTML, CSS, aby zmniejszyć wagę plików.
- Konsolidacja: jeśli to możliwe, ogranicz liczbę plików (np. CSS i JS w jednym pliku), tak by ułatwić ładowanie i zmniejszyć ryzyko problemów z hostingiem zasobów.
- Sprawdzenie wymogów sieci/DSP:
- Czy kreacja spełnia limit wagowy?
- Czy w kodzie wykorzystany jest poprawny clickTag?
- Czy rozmiar banera jest zgodny z zamówieniem?
- Wygenerowanie paczki ZIP: spakuj wszystkie pliki (index.html + zasoby) i przetestuj ją w środowisku testowym lub dostarcz do strony/sieci reklamowej.
Podsumowanie #
Tworząc reklamę display w HTML5 pod emisję programatyczną, należy przestrzegać standardów wagowych i rozmiarowych, poprawnie zaimplementować mechanizm pomiaru kliknięć (clickTag), zadbać o kompatybilność i wydajność oraz pamiętać o estetyce i wytycznych sieci reklamowych. W razie wątpliwości zawsze sprawdź aktualne wytyczne od konkretnego wydawcy lub platformy DSP, bo detale (jak dopuszczalny ciężar pliku czy nazwa zmiennej do clickTag) mogą się różnić.
