AgoraSpec

Devices: Desktop, Mobile

Format: gif / jpg / png / html5
Rozmiar: 940x300 + mobilna kreacja 600x300 (skalowana do 300x150) lub 300x250 gif/jpg/png (all screen)
Waga: 150 KB
Produkt dostępny w opcji z wideo [streaming]
Maksymalnie 3 kreacje w rotacji

Kreacja HTML5 nie może być zapętlana dłużej niż 30 sekund.

Przykładowa kreacja HTML5

<!DOCTYPE html> <html> <head>  </head> <body>  <img src="data:image/png;base64,..." /> </body> </html>

Implementacja zliczania kliknięć: aby umożliwić zliczanie kliknięć w kreację, tuż przed zamknięciem znacznika </body> należy umieścić poniższy skrypt:

oraz objąć cały obszar klikalny kreacji znacznikiem <a>, dbając o zgodność zadeklarowanych identyfikatorów (id):

Przykładowy kod kreacji, uwzględniający wszystkie wskazane wyżej modyfikacje:

<html> <head> </head> <body> <a id="creativelink" target="_blank"> <img src="data:image/png;base64,..." /> </a> <script type="text/javascript"> var parsed = (document.location.href.split('#')[1]||'').split('&'); var params = parsed.reduce(function (params, param) { var param = param.split('='); params[param[0]] = decodeURIComponent(param.slice(1).join('=')); return params; }, {}); document.getElementById('creativelink').href = params.clickTag; </script> </body> </html>

Obsługa kreacji typu MultiClick: każdy dodatkowy obszar klikalny musi posiadać swój dedykowany znacznik <a> zawierający unikalny identyfikator (id):

<a id="creativelink" target="_blank"><img src="data:image/png;base64,..." /></a>  <a id="creativelink1" target="_blank"><img src="data:image/png;base64,..." /></a>  <a id="creativelink2" target="_blank"><img src="data:image/png;base64,..." /></a>

W celu obsłużenia dodatkowych obszarów klikalnych, należy zmodyfikować skrypt umieszczony tuż przed zamknięciem znacznika <body>. Modyfikację należy wykonać według poniższego szablonu, ze wskazaniem na wyżej zadeklarowane identyfikatory (id):

document.getElementById('creativelink').href = params.clickTag; document.getElementById('creativelink1').href = params.clickTag1; document.getElementById('creativelink2').href = params.clickTag2;

Prosimy o dostarczenie kompletu kreacji wraz z odnośnikami URL na dwa dni robocze przed startem kampanii.
Materiał nie może wymieniać danych z zewnętrznymi serwerami, zapisywać, zmieniać cookie. W szczególności zabronione jest stosowanie odwołań do innych plików, wysyłanie danych z kreacji i do kreacji bez wcześniejszej zgody Agory.
Zabronione są skrypty zmieniające rozmiar i położenie okna przeglądarki.
Materiał nie może generować błędów, ostrzeżeń, blokować lub utrudniać korzystania ze stron.
Zabronione jest używanie w reklamach grafiki przypominającej elementy systemów operacyjnych (np. okna z przyciskami minimalizowania, zamykania)
Pola formularzy w reklamach muszą wykonywać funkcje zgodne z ich standardową funkcją i treścią komunikatu prezentowanego na przyciskach (np. kliknięcie w listę rozwijaną lub pole tekstowe nie może powodować przekierowania na strony Klienta).
Obciążenie procesora na komputerach klienckich w trakcie wyświetlania reklamy nie może istotnie i zauważalnie utrudniać korzystania z przeglądarki internetowej i innych jednocześnie uruchamianych aplikacji.

Rozwijanie / zwijanie kreacji:

Reklama może rozwinąć się w dół do maksymalnej wysokości 600px. Rozwinięcie materiału musi nastąpić po akcji użytkownika (klik lub umieszczenie wskaźnika myszy nad obszarem kreacji). Jeżeli rozwinięcie materiału nastąpiło po umieszczeniu wskaźnika myszy nad obszarem kreacji, zwinięcie musi nastąpić po wycofaniu kursora znad powierzchni materiału.

Poniżej kody do wykonania równolegle ze zdarzeniem inicjującym rozwinięcie i zwinięcie kreacji:

// rozwinięcie kreacji: window.parent.postMessage(params.doexpand, '*'); // zwinięcie kreacji: window.parent.postMessage(params.dolittle, '*');

Streaming (In-Banner Video):

Streaming emitowany jest ze standardowych, graficznych form reklamowych, wykonanych w technologii html5. Składa się z dwóch elementów - odtwarzacza i filmu. Wideo w bannerze nie może być zapętlane.

Odtwarzacz powinien zawierać wbudowane przyciski sterujące (co najmniej przycisk STOP).

Film może zostać odtworzony automatycznie, natomiast ścieżka dźwiękowa musi być inicjowana wyłącznie przez użytkownika. W przypadku gdy dźwięk uruchamiany jest po najechaniu kursorem myszy na obszar kreacji, po zdjęciu kursora powinno nastąpić wyciszenie dźwięku. W przypadku gdy dźwięk uruchamiany jest po kliknięciu w kreację, może być również odtwarzany po zdjęciu myszy znad obszaru kreacji.

Maksymalny rozmiar i czas trwania filmu 1 MB / 30 sek.

Maksymalny bitrate: 512kbps.

Dźwięk w filmie reklamowym należy znormalizować do -4dB.

A8e09dc9208f3c572a38b50fcbdd150b367088af topboard wideboard

Dobre praktyki reklamowe w Gazeta.pl

Rynek reklamy internetowej nieustannie się zmienia, aby dostarczać maksymalne korzyści zarówno dla reklamodawcy jak i użytkownika, czyli odbiorcy potencjalnej reklamy. Od pewnego czasu możemy zauważyć silny trend związany z zapewnieniem jak najlepszego User Experience, mający na celu poprawić odbiorcy kontakt ze stronami, np. zwiększyć ich wydajność, zminimalizować przepustowość sieci czy ograniczyć zużycie baterii.

Tematem tym w ostatnim czasie zajął się także Google, wprowadzając ograniczenia dla nieprzyjaznych użytkownikom reklam – tzw. Heavy Ads Interventions. Przeglądarka może całkowicie zablokować reklamę, która:

używa głównego wątku łącznie przez ponad 60 sekund
używa głównego wątku przez ponad 15 sekund w dowolnym 30-sekundowym oknie
wykorzystuje ponad 4 megabajty przepustowości sieci

Jeśli nie chcemy, aby kreacja została zablokowana w przeglądarce istotne jest przestrzeganie kilku elementów podczas tworzenia reklamy. Są nimi:

niezapętlanie animacji w bannerze i stopowanie jej w czasie nie dłuższym niż 30 sekund,
stopowanie wideo na ostatniej klatce (nie dłuższe niż 30 sekund) w formatach reklamowych, gdzie zostało zaimplementowane.

Więcej informacji dotyczących Heavy Ads Interventios znajdziemy pod linkiem: https://developers.google.com/web/updates/2020/05/heavy-ad-interventions

Reklama spełniająca wyżej wymienione kryteria zostanie szybciej załadowana, wyświetlona i zauważona, co przekłada się na lepsze statystyki kampanii.

Wskazówki tworzenia przyjaznych kreacji

Poniżej zamieścimy kilka sugestii dotyczących tworzenia bardziej przyjaznych reklam. Wszystkie wskazówki bazują na wytycznych dotyczących tworzenia kreacji reklamowych według organizacji IAB:

wszelkie bannery z plikami wideo powinny mieć wyłączony dźwięk i zawierać przyciski nawigujące tak, aby użytkownik mógł sam wejść w interakcję z reklamą i samodzielnie włączyć dźwięk wideo,

zaleca się nie przeciążać procesora użytkownika – serwowane kreacje powinny płynnie działać i nie zaburzać działania strony ani aplikacji – w tym celu wskazane jest, aby kreacja nie była przeładowana dużą ilością węzłów, miała umiarkowaną ilość zastosowanych efektów cieni, zamgleń czy gradientów. Miała użytą odpowiednią ilość klatek w animacji (za optymalne przyjmuje się 18 klatek na sekundę). Obciążać może także zbyt duża ilość animowanych sekwencji pomiędzy warstwami emitowana w tym samym czasie, a także zaimplementowanie skryptu losującego zdarzenia w animacji, a także importowane grafiki skalowane przez długi czas. Najlepsza wersja kreacji html5 to taka, która nie zawiera zbędnych funkcji i nie jest przeładowana dużą ilością kodu zarówno w bibliotece .js, jak i pliku html,

maksymalna liczba żądań plików inicjowanych przez serwer nie powinna przekraczać 15 podczas początkowego ładowania elementów kreacji.
dobrze, aby kreacja podczas początkowego ładowania zawierała tylko lekkie pliki, aby pojawiała się w pierwszych dwóch milisekundach, jeśli elementy kreacji są rozbudowane i ciężkie powinno się je zoptymalizować,
sugerujemy odrzucić lub zminimalizować skrypty blokujące renderowanie kreacji (CSS, JavaScript) podczas wstępnego ładowania. Elementy takie jak biblioteka js. czy plik ze stylami CSS korzystnie jest osadzać w pliku html, używając do tego atrybutu inline, który pozwoli zoptymalizować czas ładowania kreacji,

sugerujemy, aby rozbudowane i obciążające funkcje były umiejscowione w tzw. subload - kolejne w sekwencji ładowanie po ładowaniu początkowym – load,
ciężkie pliki powinny być pobierane tylko po interakcji z użytkownikiem.

Więcej informacji na stronie IAB:

https://www.iab.org.pl/wp-content/uploads/2020/08/Dobre-Praktyki-Viewability-IAB-Polska-2020.pdf

https://www.iab.org.pl/wp-content/uploads/2020/04/Standardy_IABPolska_2016.pdf

https://www.iab.com/wp-content/uploads/2019/04/IABNewAdPortfolio_LW_FixedSizeSpec.pdf