Banery HTML5: wymiary, waga i przygotowanie do kampanii

Baner HTML5 pozwala sterować ruchem i układem elementów, a grafika statyczna pokazuje jeden niezmienny obraz. Reklama elastyczna wykorzystuje zestaw zasobów, z których system sam składa układ dopasowany do dostępnej powierzchni, więc reklamodawca ma mniejszą kontrolę nad każdym wariantem.

Tabela porównuje formaty pod kątem kontroli wyglądu, czasu przygotowania i zastosowania. Google Ads może ograniczać możliwość przesyłania HTML5 dla danego konta lub kampanii, dlatego zgodność pliku nie przesądza o dostępności formatu.

HTML5 wybieramy, gdy sekwencja komunikatów wnosi wartość, a statyczny format, gdy najważniejsze są prostsza produkcja i stały wygląd. Google opisuje reklamy elastyczne jako format dopasowujący zasoby do dostępnych powierzchni; szczegóły przesyłanych formatów publikuje w specyfikacji reklam display Google Ads.

Jeżeli plan mediów obejmuje jednocześnie display i media społecznościowe, rozdzielamy ich role: baner kieruje komunikat do powierzchni display, a kampanie Google Ads mogą obejmować emisję w sieci reklamowej Google. Wspólny plan powinien uzgadniać ofertę i stronę docelową, nie zakładać identycznych wymiarów kreacji.

Popularne wymiary reklam display Google Ads obejmują 300 × 250, 728 × 90, 160 × 600 i 320 × 100 px, ale lista dopuszczonych rozmiarów jest dłuższa. Wymiar podaje szerokość i wysokość kreacji w pikselach; dostępność formatu w specyfikacji nie gwarantuje jego emisji w każdej kampanii ani regionie.

Tabela pokazuje przykładowe formaty i typowe proporcje powierzchni. Google publikuje kompletną i aktualną listę w specyfikacji przesyłanych reklam display; zakres zależy od rodzaju kampanii oraz dostępnego inwentarza.

Specyfikacja Google Ads zawiera też między innymi 200 × 200, 250 × 250, 336 × 280, 970 × 250, 300 × 50 i 320 × 50 px. Google zaznacza, że niektóre rozmiary są dostępne tylko w wybranych regionach. Zanim zlecisz pełen komplet, sprawdź plan emisji i raporty miejsc oraz urządzeń, które są dostępne dla kampanii.

Nie przenoś wymiarów Google Ads automatycznie do innego systemu reklamowego. Platformy mogą różnić się wymiarami, limitami paczki, regułami kliknięcia i wymaganiami dotyczącymi zasobów. Dla kampanii Demand Gen Google wskazuje, że przesłane reklamy HTML5 wyświetlają się wyłącznie w sieci reklamowej Google, a nie na YouTube, Discover, Mapach ani w Gmailu.

Paczka ZIP przesyłanej reklamy HTML5 w Google Ads może ważyć maksymalnie 600 KB i zawierać maksymalnie 40 plików. Limit 600 KB obejmuje wszystkie pliki w archiwum, a limit 40 plików dotyczy zawartości ZIP; Google opisuje je w specyfikacji HTML5 oraz instrukcji rozwiązywania problemów z przesłanymi reklamami.

Plik HTML powinien zawierać deklarację `<!DOCTYPE html>`, elementy `<html>` i `<body>` oraz metadane rozmiaru w sekcji `<head>`, na przykład `<meta name="ad.size" content="width=300,height=250">`. Google wymaga względnych ścieżek do zasobów znajdujących się w ZIP; dopuszcza określone zewnętrzne zasoby, takie jak Google Fonts i wskazane biblioteki hostowane przez Google.

Przed wysłaniem rozpakuj archiwum i sprawdź każdy plik:

• Upewnij się, że plik HTML otwierający kreację znajduje się na oczekiwanym poziomie ZIP.
• Potwierdź, że obrazy, skrypty i arkusze stylów używane przez kod są w paczce albo pochodzą z dozwolonego źródła.
• Sprawdź, czy ścieżki względne prowadzą do istniejących plików.
• Usuń nieużywane pliki robocze i ponownie sprawdź rozmiar archiwum.
• Policz pliki, aby paczka nie przekraczała limitu 40.

Pomoc Google Ads wymienia dla HTML5 obsługiwane typy plików, takie jak CSS, JS, HTML, GIF, PNG, JPEG i SVG. Nie dodawaj przypadkowych bibliotek ani odwołań do zewnętrznych serwerów, ponieważ mogą nie ładować się w środowisku emisji lub naruszać wymagania paczki.

Limity różnych produktów Google nie są zamienne. Przykładowo specyfikacja HTML5 dla kampanii promujących aplikacje opisuje inne wymiary i limit wagi niż reklamy display. W Google Web Designer wybierz właściwe środowisko reklamy przed eksportem, a gotowy ZIP sprawdź według wymagań konkretnej kampanii.

Czytelna animacja pokazuje jeden główny komunikat naraz i pozostawia widoczne wezwanie do działania. Na wąskiej powierzchni, takiej jak 320 × 50 px, ograniczamy treść do informacji, którą odbiorca może szybko odczytać.

Google Ads wymaga, aby animacja reklamy HTML5 zakończyła się po maksymalnie 30 sekundach. Zasada wskazana w polityce animowanych reklam Google wymaga też, aby reklama po tym czasie pozostała nieruchoma. Limit poniżej 5 klatek na sekundę dotyczy animowanych GIF-ów i nie należy przenosić go na HTML5.

Sprawdź kontrast tekstu i tła w każdej klatce, a nie tylko w pierwszym ujęciu. Odbiorca powinien rozpoznać produkt, ofertę i następny krok także wtedy, gdy animacja zatrzyma się na końcowej klatce.

Oceniaj tempo w rzeczywistym rozmiarze, nie tylko w powiększonym podglądzie projektu. Każda klatka powinna pozostawać wystarczająco długo, aby dało się odczytać jej komunikat, a ruch nie powinien odciągać uwagi od oferty.

Z naszych wdrożeń wynika, że przeniesienie tekstu z dużego formatu na mały bez skrócenia komunikatu często obniża czytelność. Zalecamy ustalić hierarchię informacji dla każdego wymiaru, a dopiero potem dopasować animację i elementy dekoracyjne.

Przed wgraniem sprawdź paczkę ZIP, animację, obszar klikalny i adres docelowy w rozmiarze, w którym reklama ma się wyświetlać. Google udostępnia HTML5 Validator, a po przesłaniu reklamy umożliwia sprawdzenie jej podglądu i statusu.

• Rozpakuj ZIP i otwórz główny plik HTML w przeglądarce.
• Obejrzyj początek, przebieg i końcowy kadr animacji; sprawdź zatrzymanie przed upływem 30 sekund.
• Potwierdź, że lokalne grafiki i skrypty ładują się bez błędów.
• Sprawdź docelowy URL ustawiony przy reklamie i działanie obszaru klikalnego.
• Jeśli kreacja korzysta z `clickTag`, sprawdź, czy zmienna jest dostępna dla systemu reklamowego, a kliknięcie otwiera właściwą stronę.
• Uruchom Google Ads HTML5 Validator, popraw zgłoszone problemy, a po przesłaniu sprawdź podgląd oraz status reklamy.

ClickTag to zmienna, którą system reklamowy może odczytać i wykorzystać do kierowania kliknięcia na stronę docelową. Google opisuje konfigurację clickTag w dokumentacji HTML5 dla Display & Video 360: skrypt ustawia `var clickTag = "https://example.com"`, a element kreacji korzysta z tej wartości przy otwieraniu strony. Nie zakładaj, że przykład dla Display & Video 360 jest automatycznie właściwy dla każdego produktu Google; sprawdź specyfikację platformy, do której eksportujesz kreację.

Podgląd może ograniczać przejście na stronę docelową, więc brak nawigacji po kliknięciu nie zawsze oznacza błędny URL. W Chrome sprawdź konsolę pod kątem błędów skryptów, a kartę Network pod kątem brakujących plików i nieudanych żądań.

Jeśli reklama jest ucięta, sprawdź wymiary płótna, marginesy i padding w HTML lub CSS. Po każdej zmianie ponownie spakuj pliki i wykonaj test paczki, bo modyfikacja ścieżki albo nazwy zasobu może spowodować nowy błąd.

Najpierw zamów formaty, dla których plan kampanii potwierdza powierzchnię emisji i urządzenia odbiorców. Sama obecność rozmiaru na liście platformy nie uzasadnia kosztu jego produkcji.

Tabela porządkuje decyzję według potwierdzenia emisji, nie według prognozowanych wyników. Gdy kampania nie ma historii, potraktuj priorytety jako kolejność pracy, a nie obietnicę zasięgu.

Dane o emisji powinny decydować o kolejności produkcji; przy ich braku zaczynamy od mniejszego zestawu formatów potwierdzonych w planie. Dobór wymiarów banerów display pozostaje osobnym zadaniem, a prowadzenie kampanii Google Ads może uwzględniać emisję w sieci reklamowej Google. Jeśli planujesz oba kanały, wspólne planowanie komunikatu i strony docelowej pomoże zachować spójność.

Typowe problemy techniczne to przekroczenie limitu ZIP, brak zasobu wskazanego w kodzie, nieobsługiwany plik albo nieprawidłowa struktura archiwum. Kreacja może przejść wysyłkę, a mimo to renderować się wadliwie z powodu błędu JavaScript lub niedziałającego odwołania zewnętrznego.

• Jeśli ZIP nie przechodzi wysyłki, sprawdź rozmiar, liczbę plików, typy i nazwy katalogów.
• Jeśli podgląd jest pusty, sprawdź główny plik HTML, brakujące zasoby i błędy konsoli.
• Jeśli reklama jest ucięta, zweryfikuj wymiary, marginesy i padding.
• Jeśli tekst jest nieczytelny, przygotuj osobny układ dla wymiaru zamiast zmniejszać wszystkie elementy proporcjonalnie.
• Jeśli kliknięcie prowadzi pod zły adres, porównaj URL końcowy z konfiguracją clickTag i ustawieniami reklamy.
• Jeśli animacja trwa dłużej niż 30 sekund, skróć ją i sprawdź, czy po zakończeniu pozostaje nieruchoma.

Google może odrzucić reklamę z przyczyn technicznych albo z powodu zasad reklamowych. Po przesłaniu sprawdź szczegóły statusu, aby odróżnić błąd walidacji pliku od problemu z treścią lub stroną docelową.

Porównuj wyświetlenia, widoczność, kliknięcia, CTR i konwersje w tym samym okresie oraz przy porównywalnych warunkach emisji. CTR to stosunek kliknięć do wyświetleń, więc nie odpowiada samodzielnie na pytanie, czy ruch przyniósł wynik biznesowy.

Aby ocenić wpływ formatu, porównaj wersję statyczną i HTML5 z tym samym komunikatem, ofertą, grupą odbiorców oraz stroną docelową. Zmieniaj jeden element naraz, ponieważ równoczesna zmiana formatu, tekstu i odbiorców utrudnia ustalenie przyczyny różnicy.

Zalecamy oceniać kreację według celu kampanii, na przykład konwersji albo wartości sprzedaży, a CTR traktować jako wskaźnik pośredni. Sprawdzaj także udział urządzeń i miejsc emisji, bo inny rozkład powierzchni może zmienić wynik bez związku z samym formatem.

Perspektywa KC Mobile

Z naszych wdrożeń wynika, że czytelność, zgodność paczki i dopasowanie komunikatu do celu trzeba oceniać osobno. Kreacja może przejść walidację techniczną, a mimo to nie przekazywać oferty jasno, dlatego zestawiamy wynik z założeniem kampanii i stroną docelową.

• Google Display Network (GDN): co to jest i jak działa
• Reklama dla Generacji Z: jak dobrać kanał, przekaz i sposób pomiaru
• Marketing a reklama: czym się różnią i jak wspólnie wspierają sprzedaż
• Google Ads czy social media? Wybierz kanał do celu i budżetu