Specyfikacja techniczna form reklamowych
Transkrypt
Specyfikacja techniczna form reklamowych
Specyfikacja techniczna form reklamowych Specyfikacja zgodna ze standardem IAB Polska Data aktualizacji 06.05.2016 Liczba stron: 32 Typ opracowania: Specyfikacja techniczna Rodzaj dokumentu: Dokument jawny SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH SPIS TREŚCI WPROWADZENIE ........................................................................................................................ 4 ogólne założenia dotyczące, przygotowania reklamy ...................................................... 4 materiały kierowane do polska press ............................................................................... 5 nazewnictwo plików reklamowych ................................................................................... 6 KREACJE – SWF ........................................................................................................................... 6 KREACJE – HTML5....................................................................................................................... 8 KREACJE 3RD PARTY ................................................................................................................. 10 FORMY REKLAM – ROZMIARY I WAGI ...................................................................................... 11 FORMY STANDARDOWE ........................................................................................................... 15 billboard, double billboard, triple billboard ................................................................. 155 wideboard ..................................................................................................................... 155 halfpage ........................................................................................................................ 155 rectangle ....................................................................................................................... 155 screening ....................................................................................................................... 155 FORMY LAYEROWE ................................................................................................................. 166 kreacje swf ...................................................................................................................... 16 kreacje html5 .................................................................................................................. 16 brandmark ...................................................................................................................... 17 banderola / rollband ..................................................................................................... 199 drawbridge .................................................................................................................... 199 foot scroller ................................................................................................................. 1920 interstitial .................................................................................................................... 2020 scroll billboard, scroll double billboard ...................................................................... 2020 sticky scroll .................................................................................................................. 2021 toplayer ....................................................................................................................... 2121 FORMY EXPANDOWANE ........................................................................................................ 221 expandy klasyczne ........................................................................................................ 221 expand corner ............................................................................................................... 233 push expand triple billboard ......................................................................................... 244 push expand triple billboard plus ................................................................................. 255 2 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH sidekick.......................................................................................................................... 288 FORMY VIDEO......................................................................................................................... 288 preroll............................................................................................................................ 288 postroll .......................................................................................................................... 299 overlay .......................................................................................................................... 299 FORMY MOBILE ........................................................................................................................ 29 standardowy banner, podwójny banner ........................................................................ 29 standardowy rectangle, rectangle 320x320 ................................................................... 29 rectangle video ............................................................................................................... 29 layer ................................................................................................................................ 29 fullpage ......................................................................................................................... 291 3d cube............................................................................................................................ 31 scratch ....................................................................................................................... 31291 INNE FORMY REKLAMY ........................................................................................................ 3131 e-insert ............................................................................................................................ 31 watermark....................................................................................................................... 32 slidenote ......................................................................................................................... 32 expand videostitial .......................................................................................................... 33 link reklamowy ................................................................................................................ 33 artykuł sponsorowany .................................................................................................... 33 box zobacz koniecznie .................................................................................................... 34 box serwisów regionalnych ............................................................................................ 34 fake ad............................................................................................................................. 34 show case ........................................................................................................................ 35 megaboard ...................................................................................................................... 35 post sponsorowany na fb................................................................................................ 35 wider kontext .................................................................................................................. 36 captcha ............................................................................................................................ 36 MAILING ................................................................................................................................... 37 GÓLNE WYMAGANIA FORM REKLAMOWYCH ......................................................................... 39 INFORMACJE WAŻNE I PRZYDATNE ......................................................................................... 40 3 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH WPROWADZENIE OGÓLNE ZAŁOŻENIA DOTYCZĄCE PRZYGOTOWANIA REKLAMY 1. Wymagane jest przesłanie kompletu materiałów, nie później niż 3 dni robocze przed datą planowanej emisji. W innym przypadku może nie być możliwe sprawdzenie oraz emitowanie reklamy w wyznaczonym terminie. 2. Dla form w technologii streaming okres ten wynosi 5 dni. 3. Wraz z kreacjami konieczne jest przesłanie URL docelowego, do miejsca gdzie ma kierować kreacja po kliknięciu w nią. 4. Do emisji przyjmowane są kreacji typu HTML5, SWF, JPG, GIF, PNG, o wymiarach i wadze nie przekraczających założeń podanych w dalszej części dokumentu. 5. Kreacje HTML5 powinny być przygotowane zgodnie ze specyfikacją oraz przesłane w spakowanej wersji wraz z wszelkimi potrzebnymi elementami do emisji (biblioteki, grafiki itp.). 6. Kreacje SWF powinny być przygotowane w wersji nie wyższej niż 10 (zalecana wersja 8.0). Wymagane jest zastosowanie Action Script 2.0 lub 3.0. 7. Do każdej kreacji flash niezbędne jest przesłanie kreacji zastępczej w formacie JPG/GIF/PNG (zaślepki) o wymiarach kreacji bazowej. 8. Limit FPS (frame per second) we wszystkich kreacjach to 25 fps. 9. Użycie streamingu dozwolone jest wyłącznie w przypadku reklam wideo, które powinny posiadać dobrze widoczne przyciski akcji jak: play, stop, mute. Forma ta może być uruchamiana automatycznie, ale z wyciszonym dźwiękiem. 10. Przy emisji reklamy SWF należy podać kolor tła w formacie szesnastkowym, lub zastosować dany kolor w reklamie na najniższej warstwie (jako obiekt). W innym przypadku brak będzie sugerował, że jest to tło transparentne. 11. Jeżeli w kreacji wymagane jest użycie więcej niż jednego URL-a (multiclickTag), należy umieścić odpowiednie zaszycie: _root.clickTag1 dla pierwszego url-a, _root.clickTag2 dla drugiego url-a, itd. 12. Niedozwolone jest używanie skryptów śledzących interakcję użytkownika. 13. Kreacje niekompletne lub wywołujące błędy na stronie, nie będą przyjmowane. 14. Zabronione jest stosowanie skryptów zmieniające okno przeglądarki, jej wymiar oraz położenie. 15. Kreacje nie powinny być zabezpieczone przed debugowaniem. 16. Formy reklamowe tekstowe, np. link sponsorowany, mają zawsze zastosowany atrybut rel="nofollow" dla znacznika <a>. 17. Każdy błąd przesuwa start rozpoczęcia emisji kampanii. 4 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH 18. W celu stworzenia reklamy na wzór z pliku FLA, zalecane jest zapisanie go do najniższej możliwej wersji np. do CS4 oraz przesłanie wszystkich niestandardowych czcionkami wykorzystanymi w tej kreacji. 19. Wszystkie kreacje emitowane z kodów zewnętrznych powinny zostać dostarczone w wersji asynchronicznej. 20. Polska Press Grupa Sp. z o.o. zastrzega sobie prawo do weryfikacji przesłanych kreacji pod kątem zgodności ze specyfikacją oraz nie przyjęcia bądź przerwania emisji w przypadku jej braku. 21. Polska Press Grupa Sp. z o.o zastrzega sobie możliwość odmowy przyjęcia do emisji kreacji lub jej przerwania w przypadku uznania reklamy za zbyt dokuczliwą dla użytkowników, łamiącą prawo, propagującą treści pornograficzne lub dobre obyczaje. 22. Polska Press Grupa Sp. z o.o nie ponosi odpowiedzialności za nieprawidłową emisję reklam na przeglądarkach niestandardowych, lub niestandardowych (niedomyślnych) ustawieniach przeglądarek lub systemu operacyjnego 23. Każda z kreacji nie może obciążyć procesora wzorcowego, ustalonego przez PPG na P IV 2,6GHz, w więcej niż 30%. W momencie przekroczenia tej wartości Polska Press mogą nie dopuścić do emisji takiej kreacji. NIEKTÓRE ELEMENTY, KTÓRE MOGĄ WPŁYWAĆ NA NADMIERNE OBCIĄŻENIE TO: 1. Duża ilość akcji onClipEvent(enterFrame) wykonywanych jednocześnie. 2. Animacja skomplikowanych kształtów wektorowych - polecamy zmniejszenie ilości punktów edycji krzywych. Kształty wektorowe o znacznej ilości punktów węzłów polecamy taki obiekt wyeksportować jako plik (jpg,png) i zaimportować ponownie. 3. Animacja obiektów składających się z dużej ilości gradientów. 4. Animacja wielu obiektów jednocześnie. 5. Nadmierne używanie przejść z przezroczystości (alfa) na bitmapach - zalecamy stosowanie efektu tint. MATERIAŁY KIEROWANE DO POLSKA PRESS Wszystkie materiały muszą być dostarczone jednorazowo, na cały okres trwania kampanii. Jako komplet materiałów rozumie się: 1. Komplet kreacji spełniających warunki specyfikacji lub kody serwujące kreacje, 2. Komplet aktywnych URL-i, 3. Zlecenie emisji, 5 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH NAZEWNICTWO PLIKÓW REKLAMOWYCH Materiały powinny być nazwane według następującego schematu, np. dom_a_nto_billboard_750x100_transparent_v1 dom_b_lubuska_expand_rectangle_300x250x600_as2_v2 dom a,b nto billboard expand 300x250x600 transparent v1, v2 nazwa własna rozróżnienie dla więcej ilość form (jeśli występują) witryna na której będzie emitowana dana forma forma reklamy forma rozwijana podstawa 300x250 rozwijany 600x250 przeźroczyste tło (jeśli występują) wersja reklamy KREACJE – SWF NIEANIMOWANE Formy tego typu powinny spełniać wszelkie wymogi dotyczące rozmiarów i wag podanych w tabeli. ANIMOWANE Przygotowanie kreacji typu .SWF z zaszytymi zmiennymi i różnicami, które się pod nimi kryją. Uwaga: Jedna z poniższych zmiennych powinna się znajdować w każdej reklamie. Niezastosowanie kodu spowoduje brak przekierowania oraz brak statystyk kliknięć. clickTaga o umożliwia zliczanie statystyk, o zmianę adresu www nie ingerując w reklamę, o adres URL do akcji _root.clickTag,"_blank" należy przesłać razem z materiałami reklamowymi, zaszycie URL na stałe, (tzw. zaszycie na sztywno) o link do strony umieszczony w kreacji o brak statystyk kliknięć, o zmiana adresu www poprzez ingerencję grafika, multiclickTaga o umożliwia podpięcie więcej niż jednego przekierowania, o w tym przypadku należy dodać cyfry: root.clickTag1 dla pierwszego url-a, _root.clickTag2 dla drugiego url-a, itd 6 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Action Script 2.0 1. Na najwyższej warstwie listwy czasowej, rysujemy obiekt, następnie przekształcamy go w symbol „button” i nadajemy efekt przeźroczystości. 2. Wybierając symbol na stole roboczym uruchamiamy ustawiamy parametr operacji (operacja przycisk) na zmienną: Zmienna clickTag on (release) { getURL(_root.clickTag,"_blank"); } Zaszycie na sztywno on (release) { getURL("http://polskapress.pl", "_blank"); } Zmienna multiclickTag on (release) { getURL(_root.clickTag1,"_blank"); } Action Script 3.0 Uwaga: Wielkość liter w zmiennej ma znaczenie clickTag. var clickTag:String=LoaderInfo(this.root.loaderInfo).parameters.clickTag; target_button.addEventListener(MouseEvent.CLICK, targetUrlHandler); function targetUrlHandler(e:MouseEvent):void{ if(clickTag){ var req:URLRequest = new URLRequest(clickTag); if(!ExternalInterface.available){ navigateToURL(req, "_blank"); }else{ var strUserAgent:String = String(ExternalInterface.call("function(){return navigator.userAgent;}")).toLowerCase(); if(strUserAgent.indexOf("firefox") != -1 || (strUserAgent.indexOf("msie") != -1 && uint(strUserAgent.substr(strUserAgent.indexOf("msie")+5,3))>=7)){ ExternalInterface.call("window.open", req.url, "_blank"); }else{ navigateToURL(req, "_blank"); }}}} 7 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH KREACJE – HTML5 Kreacja HTML powinna składać się z jak najmniejszej liczby elementów. Im mniejsza liczba dodatkowych elementów, tym szybciej kreacja zostanie załadowana i wyświetlona końcowemu użytkownikowi. Wszystkie odwołania do elementów składowych powinny być wykonywane za pomocą adresów względnych (wyjątkiem są elementy umieszczone na zewnętrznych serwerach). Arkusze stylów i biblioteki JS mogą zostać umieszczone bezpośrednio w treści głównego pliku html, co zmniejszy liczbę elementów składowych. Elementy graficzne również mogą zostać umieszczone w głównym pliku (poprzez zakodowanie za pomocą Base64), jednak może to w znacznym stopniu zwiększyć rozmiar pliku oraz czas ładowania kreacji w przeglądarce użytkownika. Kreacje HTML osadzane są na stronie za pomocą znacznika <iframe>. W adresie do pliku kreacji przekazywane są parametry po znaku krzyżyka (#) w postaci NAZWA_PARAMETRU=WARTOŚĆ. W celu odczytania parametrów przekazywanych do kreacji (m. in. skryptów do pomiaru kliknięć), należy dołączyć poniższy kod do kodu kreacji na początku <body>: <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; }, {}); </script> Kreacja, w głównym pliku HTML, powinna udostępniać zmienną, do której można przekazać adres docelowy kreacji. Do tej zmiennej należy przypisać wartość odczytaną z parametrów przekazanych automatycznie do kreacji, znajdującą się w zmiennej params.clickTag (po wykonaniu kodu odczytującego parametry). Poniżej znajduje się przykład, w którym adres docelowy należy przypisać zmiennej globalnej clickTag: <script> ... //umieść adres strony docelowej w zmiennej clickTag, np.: //clickTag='http://www.polskapress.pl/; clickTag=params.clickTag; //przekazuje wartość odczytaną z parametrów ... </script> 8 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH HTML5 pozwala na emisję kreacji zawierających kilka zmiennych. W takiej sytuacji należy zastosować się do poniższego zapisu: <script> ... clickTag1=params.clickTag1; //przekazuje wartość odczytaną z parametrów clickTag2=params.clickTag2; //przekazuje wartość odczytaną z parametrów ... </script> Poniżej znajdują się kody przykładowych kreacji z poprawną obsługą przekierowania na stronę docelową. <html> <head></head> <body> <a href=”#” target=”_blank” id=”creativelink”> <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; }, {}); //ustawienie adresu docelowego w linku HTML document.getElementById(' creativelink').href = params.clickTag; </script> </body> </html> 9 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH KREACJE 3RD PARTY Emisja kampanii reklamowych może odbywać się bezpośrednio z adservera PPG lub z zewnętrznych systemów serwowania reklam, za pośrednictwem systemu PPG. Druga ze wspomnianych możliwości ze względu na swą specyfikę i uwarunkowania technologiczne wiąże się ze szczególnymi wymaganiami dla kreacji emitowanych w taki sposób, określonymi poniżej. 1. Emisja kreacji z kodów zewnętrznych powinno zostać przesłane do Działu Emisji i Wsparcia Sprzedaży w celu sprawdzenia poprawności emisji. 2. Kody emisyjne powinny być przystosowane do ich asynchronicznego osadzania: Kody emisyjne kreacji standardowych (typu inpage), powinny być dostarczone w postaci IFrame. Kody emisyjne kreacji standardowych (typu inpage) mogą być również dostarczone w postaci JavaScript. Jednak w takim wypadku zostaną one umieszczone w IFrame po stronie PPG, dotyczy to w szczególności sytuacji, w której kod emisyjny korzysta z polecenia „document.write”. 3. W przypadku braku możliwości dostosowania kodów emisyjnych do w/w wymagań a także w przypadku reklam nietypowych, tzn. wchodzących w interakcje z elementami strony lub analizujących parametry strony, na której się emitują (reklamy typu XHTML), ich emisja odbywać się będzie w całości z serwerów Wydawcy w oparciu o skrypty przygotowane przez Wydawcę. 10 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH FORMY REKLAM – ROZMIARY I WAGI FORMY STANDARDOWE FORMAT WYMIAR (piksele) WAGA (kB) billboard html5,swf, jpg, gif, png 750x100 do 60 double billboard html5,swf, jpg, gif, png 750x200 do 60 triple billboard html5,swf, jpg, gif, png 750x300 do 60 wideboard html5,swf, jpg, gif, png 980x200 do 100 halfpage html5,swf, jpg, gif, png 300x600 do 60 rectangle html5,swf, jpg, gif, png 300x250 do 60 box 300x125 html5,swf, jpg, gif, png 300x125 do 60 belka30 html5,swf, jpg, gif, png 980x30, 780x301, 540x302, do 60 box 750x360 (statyczny) html5,swf, jpg, gif, png 750x360 do 100 box 670x360 (statyczny) html5,swf, jpg, gif, png 670x360 do 60 jpg, gif, png zgodnie ze specyfikacją do 120 NAZWA screening (statyczny) OPIS Str. 15 FORMY LAYEROWE FORMAT WYMIAR (piksele) WAGA (kB) brandmark html5, swf 300x300 do 60 drawbridge html5, swf foot scroller html5, swf, jpg, gif, png NAZWA 120x600 120x600 750x300 970x30 1600x30 1600x100 1300x30 750x200 960x200 + 2x 30x2003 800x468, 800x600 OPIS do 60 do 60 Str. 16-21 rolland (banderola) html5, swf, jpg, gif, png do 60 interstitial html5, swf, jpg, gif, png scroll baner html5, swf, jpg, gif, png 468x60 do 60 scroll billboard html5, swf, jpg, gif, png 750x100 do 60 scroll doublebillboard html5, swf, jpg, gif, png 750x200 do 60 do 60 1 Dla serwisu www.expressilustrowany.pl wymiar belki to 780x30 2 Dla serwisu moto.gratka.pl wymiar belki to 540x30 3 Do kreacji należy wykonać przyciski Zwiń i Rozwiń 11 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH sticky scroll html5, swf, jpg, gif, png 140x140 do 60 toplayer html5, swf, jpg, gif, png dowolny do 60 FORMY EXPANDOWANE expand belka30 html5,swf 980x30>300 980x30>200 780x30>3004 do 60 belka expand dom.gratka.pl html5,swf 640x35>200 do 60 expand billboard html5,swf 750x100>300 do 60 expand doublebillboard html5,swf 750x200>300 do 60 expand triple billboard html5,swf 750x300>600 do 60 expand rectangle html5,swf 300>600x250 do 60 expand rectangle html5,swf 300>600x250> 500 do 60 expand halfpage html5,swf 300>600x600 do 60 expand corner html5,swf expand videostital html5,swf push billboard html5,swf 750x100>300 do 60 push double billboard html5,swf 750x200>300 do 60 push triple billboard html5,swf 750x300>600 do 60 push triple billboard plus html5,swf 750x300>600 do 60 sidekick html5,swf 300x250 do 60 120>520x120> 520 600>800x400> 600 Str. 21-28 do 60 do 60 FORMY MOBILNE (SMARTPHONE) NAZWA FORMAT SLOT Standardowy Banner jpg, gif, png Top, Bottom Podwójny Banner jpg, gif, png Top, bottom Rectangle 320x320 jpg, gif, png Middle jpg, gif, png; video: mp4, iframe (youtube) Middle Standardowy Rectangle jpg, gif, png Middle 3D Cube jpg, gif, png Middle, Rectangle Video 4 WYMIAR piksele 640x100, 320x50 640x200, 320x100 640x640, 320x320 640x480 (640x100+640 x380) 600x500,300x 250 320x320,640x WAGA do 95 kB do 95 kB do 95 kB do 95 kB, video do 1 MB do 95 kB do 95 Dla serwisu www.expressilustrowany.pl wymiar belki expand to 780x30>300 12 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Overlay Overlay, Gallery Interstitial Overlay, middle, Gallery Interstitial 640 kB5 640x640, 320x320 do 95 kB 640x640x2, 320x320x2 do 95 kB Layer jpg, gif, png Scratch jpg, gif, png Fullpage jpg, gif, png Overlay 640x960 do 95 kB Fake ad jpg, gif, png fakead 280x172 do 60 kB jpg, gif, png Overlay, top, bottom, middle 640x640, 640x100, 320x320, 320x50 do 95 kB Swipe Banner FORMY MOBILNE (TABLET) NAZWA FORMAT SLOT Rectangle (Tablet) jpg, gif, png Rectangle Medium Rectangle (Tablet) jpg, gif, png Rectangle Doublebilboard (Tablet) jpg, gif, png Top, Bottom Leaderboard (Tablet) jpg, gif, png Leaderboard Layer (Tablet) jpg, gif, png Overlay WYMIAR piksele 360x300, 180x150 600x500, 300x250 750x200, 750x100 728x90, 1456x180 600x500, 550x480,320x 250 WAGA do 95 kB do 95 kB do 95 kB do 95 kB do 95 kB INNE FORMY FORMAT WYMIAR (piksele) WAGA ----- 40 znaków ----- low cost (statyczny) jpg, gif, png 140x110, 140x170 do 60 kB box zobacz koniecznie jpg, gif, png 170x122 do 60 kB box serwisów regionalnych jpg, gif, png 800x600 do 60 kB swf, jpg, gif, png ----- do 20 kB fake ad jpg, gif, png 280x172 do 60 kB fake ad mapa jpg, gif, png 343x160 do 60 kB belak30 gratka html5,swf, jpg, gif, png 540x30 do 60 kB swf, jpg, gif, png 234x60 do 60 kB NAZWA link reklamowy watermark (statyczny) box mapa 5 Str. 31-36 Waga dotyczy wszystkich ścianek kreacji. 13 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH pasek pomiędzy ogłoszeniami gratka (statyczny) swf, jpg, gif, png 980x90 do 60 kB png, gif, jpg 2000x460 do 250 kB big box jpg, gif, png 630x300 do 60 kB Show Case jpg,gif,png 860x400 do 150kB swf 800x600 do 200 kB flv, mov, mp4 16:9 15s. - 1,5Mb 30s. - 2,5Mb 45s.- 3Mb html5, swf, jpg, gif, png 500x60 do 60 kB swf, jpg, gif, png 350x140 do 50 kB winieta serwisy regionalne jpg,gif,png 1170x172 do 100 kB galeria jpg,gif,png 770x512 do 60 kB captcha jpg,gif,png 300x150 do 30 kB html5, swf, png, gif, jpg 1170x550 do 60 kB jpg, gif, png 884x100 do 60 kB Skyscrapper html5, swf, png, gif, jpg 120x600 do 60 kB Box 200x2407 html5, swf, png, gif, jpg 200x240 do 60 kB jpg + tekst 504x504 do 100 kB winieta wyszukiwarki (statyczny) gratka e-insert preroll, postroll (In stream VideoAd) Overlay (video) slidenote (statyczny) Megaboard (statyczny) leaderborder (statyczny)6 Post sponsorowany na FB 6 7 Dostępna tylko na serwisie wspomnijbliskich.pl Dostępna tylko na serwisie nekrologi.net 14 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH FORMY STANDARDOWE Billboard, Double Billboard, Triple Billboard Popularna forma reklamowa występująca najczęściej na górnym slocie reklamowym. Może występować w formie statycznej bądź animowanej. Billboard oraz Double Billboard mogą występować zarówno w formie rozwijanej odpowiednio do rozmiaru 750x200 i 750x300 oraz scrollowanej. Wideboard Wideboard jest popularną formą reklamową występującą w górnym slocie reklamowym. Format jest również wykorzystywany w przypadku formy Rollband (Banerola). Halfpage Format reklamowy w postaci pionowego prostokąta emitowany w górnej części prawej kolumny nawigacyjnej. Halfpage może występować również w wersji rozwijanej do rozmiaru 600x600 px. Rectangle Formaty reklamowe emitowane w prawej kolumnie nawigacyjnej oraz wewnątrz artykułów. Rectangle może występować również w wersji rozwijanej do rozmiaru 600x250 px. Screening Popularna forma reklamowa wyświetlana jako połączenie tła serwisu z górną formą reklamową np. billboardem, double billboardem, triple billboardem czy wideboardem oraz odpowiednikami w formie expandowanej lub push. Screening jest wczytywany od górnej krawędzi przeglądarki. Przygotowywany jako jeden plik graficzny i jest wyśrodkowany względem serwisu. Kreacja należy przygotować w oparciu o poniższe specyfikacje. Rozmiary, odstępy przedstawiają poniższe rysunki. Klienci mogą również skorzystać z jednego z szablonu zapisanego w formacie .PSD (Photoshop). http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/screening_750x100.png http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/screening_750x100.psd http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/screening_750x200-980x200.png http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/screening_750x200-980x200.psd http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/screening_750x300.png http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/screening_750x300.psd 15 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Forma posiada ograniczenia wagowe do 120 kB (tapeta + kreacja). Zaleca się zmianę kolor tła, dopasowując go do screeningu. Kod koloru należy podać w formie szesnastkowej np. #000000 – kolor czarny. FORMY LAYEROWE Kreacja SWF Krzyżyk zamykający powinien mieć dowiązaną funkcję onCrossClick, a jego ramiona nie powinny być mniejsze niż 14px. Action Script 2.0 on (release){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.onCrossClick); }else{ getURL("javascript:"+_root.onCrossClick+"();","_self"); }} Action Script 3.0 var onCrossClick:String=LoaderInfo(this.root.loaderInfo).parameters.onCrossClick; closeButton.addEventListener(MouseEvent.CLICK,closeAds); function closeAds(e:MouseEvent):void{ if(onCrossClick){ ExternalInterface.call(onCrossClick); }} 16 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Kreacja HTML5 Kreacje typu Toplayer wymagają interakcji z kodem szablonu, który odpowiada za zmianę rozmiarów lub ukrycie kreacji. Do kreacji HTML5 przekazywane są za pomocą dodatkowych parametrów (analogicznie jak clickTag) nazwy funkcji, które należy wykonać w momencie odpowiedniego zdarzenia. W przypadku kreacji Toplayer onCrossClick. Instrukcja odpowiedzialna za wykonanie tych funkcji ma postać: window.parent.postMessage(params. NAZWA_PARAMETRU, '*'); Przykładowy fragment kodu kreacji typu Toplayer, w której po kliknięciu w element o id równym closeButton powinno nastąpić zamknięcie kreacji: <script type="text/javascript"> ... //dodanie wykonania funkcji zamykaj cej kreacj po kliknięciu //w element o id=”closeButton” document.getElementById(' closeButton'). addEventListener(' click' , function() { window.parent.postMessage( params.onCrossClick, '*'); }); FORMY LAYEROWE Brandmark Reklama otwiera się nad aktywnym oknem przeglądarki. W górnej części znajduje się belka, która umożliwiająca przesuwanie reklamy w obrębie okna przeglądarki. Na której znajdują się przycisk „zamknij X”, minimalizujący oraz maksymalizujący, zamieszczone w prawym górnym rogu. • Krzyżyk zamykający powinien mieć dowiązaną funkcję onCrossClick, a jego ramiona „X” nie powinny być mniejsze niż 14px. • Funkcja minimalizuj odpowiada za zwinięcie reklamy do postaci belki, wykonywana jest za pomocą zmiennej minimize. Przez co obszar pod belką staje się przeźroczysty. Zakres formy podstawowej nie może pozostać klikalny, ponieważ będzie uniemożliwiał użytkownikowi naciśnięcie linku na serwisie. 17 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH • Funkcja powrotu do rozmiaru standardowego, odbywa się poprzez umieszczenie zmiennej maximize. Action Script 2.0 Krzyżyk zamykania (onCrossClick) on (release){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.onCrossClick); }else{ getURL("javascript:"+_root.onCrossClick+"();","_self"); }} Przycisk minimalizuj (minimize) on (release){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.minimize); }else{ getURL("javascript:"+_root.minimize+"();","_self"); }} Przycisk (maximize) on (release){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.maximize); }else{ getURL("javascript:"+_root.maximize+"();","_self"); }} 18 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Action Script 3.0 var onCrossClick:String=LoaderInfo(this.root.loaderInfo).parameters.onCrossClick; var minimize:String=LoaderInfo(this.root.loaderInfo).parameters.minimize; var maximize:String=LoaderInfo(this.root.loaderInfo).parameters.maximize; closeButton.addEventListener(MouseEvent.CLICK,closeAds); function closeAds(e:MouseEvent):void{ if(onCrossClick){ ExternalInterface.call(onCrossClick); }} minButton.addEventListener(MouseEvent.CLICK,minimizeAds); function minimizeAds(e:MouseEvent):void{ if(minimize){ ExternalInterface.call(minimize); }} maxButton.addEventListener(MouseEvent.CLICK,maximizeAds); Banderola / Rollband Forma reklamowa wyświetlana na półprzeźroczystym tle przechodzącym przez środek przeglądarki. Posiada funkcję scrollowania, wzdłuż serwisu. Zminimalizowanie do prawej strony jest wywoływane automatycznie po ustalonym czasie lub ingerencji użytkownika. Naciskając na krzyżyk lub pasek zwijający, który zostaje zamieszczony poprzez kody emisyjne. Drawbridge Reklama składa się z trzech form reklamowych, dwóch skyscraper’ów oraz toplayera. Skyscrapery są formami scorllowanymi wyświetlonymi w obu górnych rogach przeglądarki. Po najechaniu użytkownika na daną formę zostaje wywołana funkcja expand poprzez parametry doexpand, funkcja dolittle nie zostaje wykorzystywana. Następnie zostaje wyświetlony tolayer z zamieszczoną zmienną onCrossClick analogicznie jak w formie Toplayer. 19 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Foot Scroller Foot scroller jest reklamą w formie paska znajdującego się w dolnej części ekranu o wymiarach 1600x30,1600x100 lub 1300x30. Kreacja ta przypomina popularne w telewizji paski o charakterze informacyjnym (najlepiej krótkie hasła reklamowe). Czas trwania przekazu wynosi 30 sekund i jest on z góry określony przez kody emisyjne. Reklama 1600x100 jest identyczna jak 1600x30, lecz wzbogacona o element statyczny lub animowany zamieszczony z lewej strony reklamy w polu o wymiarach 100x100 pikseli. Reszta animacji nie może przekraczać wysokości 30px. Reklama nie dopasowuje się do danej rozdzielczości monitora, jest wyświetlana od lewej krawędzi przeglądarki. Prawa strona zostanie „przycięta”. Obszar nad paskiem powinien posiadać tło transparentne. Formaty 1600x30 i 1300x30 mogą być poruszane bezpośrednio podczas emisji za pomocą kodu serwującego, w zależności od kierunku (lewo, prawo). Wystarczy przygotować kreację statyczną (JPG, GIF, PNG) oraz wskazać kierunek w zleceniu emisji. Interstitial Interstitial jest formą pełnoekranową niezajmującą całej powierzchni ekranu, lecz całą przestrzeń wewnątrz okna przeglądarki. Forma ta nie jest skalowana, zostaje ona wyświetlona na środku przeglądarki z otaczającym ją jednolitym kolorem zasłaniającym cały serwis. Istnieje możliwość ustawienia stopnia przeźroczystości 0100% tego koloru, który należy podać w kodzie szesnastkowym np. #000000. Czas trwania animacji nie przekracza 10 sekund i jest on z góry określony przez kody emisji. Podczas której zostanie dodatkowo podpięty przycisk „zamknij X”, będzie on się znajdował nad reklamą przy prawej górnej krawędzi. Scroll Billboard, Scroll Double Billboard Posiada funkcję scrollowania, wzdłuż serwisu. Jest stale widoczna dla użytkownika., zawiera przycisk zamknięcia ”zamknij X”, który po kliknięciu powoduje „odesłanie” kreacji do podstawowego miejsca reklamowego. Przycisk zamykający jak i efekt scroll jest wywoływany za pomocą kody emisyjnych. Sticky Scroll Forma jest wyświetlana po każdorazowym przewinięciu serwisu przez użytkownika. Znajduje się w obszarze suwaka przeglądark, na „marginesie”. Automatycznie zostaje zamknięta po upływie 3 sekund, czas jest określony w kodach emisyjnych. 20 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Toplayer Reklama otwiera się nad aktywnym oknem przeglądarki, zdefiniowana na przezroczystej warstwie. W prawym górnym rogu znajduje się dobrze widoczny przycisk zamykający „zamknij X”. Reklama wyłącza się po pływie wyznaczonego czasu nieprzekraczającego 20sek, czas jest ustawiany poprzez kody emisyjne. FORMY EXPANDOWANE Efekt rozwinięcia kreacji regulują parametry liczbowe w funkcji doexpand (rozwiń) oraz dolittle (zwiń) w kodzie emisyjnym. Forma ta powinna posiadać obszary aktywne, przez cały czas trwania emisji. Po najechaniu na reklamę powinna się ona rozwijać, natomiast po zjechaniu zwinąć do stanu pierwotnego. Od momentu zwinięcia, do rozwinięcia nie powinien on przekraczać 5 sekund. Expandy Klasyczne expand belka, expand belka 30, expand belka sponsorska, expand banner, expand billboard /doublebillboard / triplebillboard, expand rectangle, expand halfpage, expand skyscraper. Kreacje SWF Action Script 2.0 on (rollOver){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.doexpand); }else{ getURL("javascript:"+_root.doexpand+"();","_self"); }} on (rollOut){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.dolittle); }else{ getURL("javascript:"+_root.dolittle+"();","_self"); }} 21 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Action Script 3.0 var doexpand:String=LoaderInfo(this.root.loaderInfo).parameters.doexpa nd; var dolittle:String=LoaderInfo(this.root.loaderInfo).parameters.dolittle; target_button.addEventListener(MouseEvent.ROLL_OVER, mouseRollOver); target_button.addEventListener(MouseEvent.ROLL_OUT, mouseRollOut); function mouseRollOver(e:MouseEvent):void{ if(doexpand){ ExternalInterface.call(doexpand); }} function mouseRollOut(e:MouseEvent):void{ if(dolittle){ ExternalInterface.call(dolittle); }} 22 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Kreacje HTML5 Kreacje typu Expand wymagają interakcji z kodem szablonu, który odpowiada za zmianę rozmiarów lub ukrycie kreacji. Do kreacji HTML5 przekazywane są za pomocą dodatkowych parametrów (analogicznie jak clickTag) nazwy funkcji, które należy wykonać w momencie odpowiedniego zdarzenia. W przypadku kreacji Expand są to parametry doexpand oraz dolittle. Przykładowy fragment kodu kreacji typu Expand, w której po najechaniu kursorem myszy na element o id równym expandButton powinno nastąpić rozwinięcie kreacji, a po opuszczeniu tego elemetu przez kursor myszy powinien nastąpić powrót do rozmiaru wyjściowego: <script type="text/javascript"> ... //dodanie wykonania funkcji rozwijaj cej kreacj po najechaniu ą ę //na element o id=”expandButton” document.getElementById(' expandButton'). addEventListener( ' moueseenter' , function() { window.parent.postMessage( params.doexpand, '*'); }); //dodanie wykonania funkcji zwijaj cej kreacj po zjechaniu ą ę //z elementu o id=”expandButton” document.getElementById(' expandButton'). addEventListener( ' moueseleave' , function() { window.parent.postMessage( params.dolittle, '*'); }); ... </script> Expand Corner Reklama zamieszczona w górnym prawym rogu przeglądarki, rozwijana po przekątnej ku jej środkowi. W formie zwiniętej wygląda jak zagięta kartka zeszytu, przez którą widać następną stronę. Efekt zagięcia nie jest dodawany poprzez kody emisyjne. Efekt rozwinięcia kreacji analogicznie jak przy formach Expand, poprzez parametry liczbowe doexpand (rozwiń) oraz dolittle (zwiń), uruchamiane poprzez kody emisyjne. Forma ta powinna posiadać obszary aktywne, przez cały czas trwania emisji. Po najechaniu na reklamę powinna ona się rozwijać, natomiast po zjechaniu z 23 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH obszaru reklamy, warstwa powinna się zwinąć do stanu pierwotnego. Od momentu rozwinięcia do zwinięcia, nie powinien on przekraczać 5 sekund. Kreacja zawiera w prawym rogu dobrze widoczny przycisk zamykający „X” widoczny przez cały czas trwania emisji. Krzyżyk zamykający powinien mieć dowiązaną funkcję onCrossClick, analogiczne forma Toplayer, a jego ramiona nie powinny być mniejsze niż 14px. Push Expand Triple Billboard Efekt rozwinięcia kreacji regulują parametry liczbowe w funkcji dopushlock, dopushon oraz dopushunlock, dopushoff w kodzie emisyjnym. Forma ta powinna posiadać obszary aktywne, przez cały czas trwania emisji. Po najechaniu na reklamę powinna się ona rozwijać z jednoczesnym rozpychaniem serwisu w dół. Natomiast po zjechaniu z obszaru reklamy, warstwa powinna się zwinąć do stanu pierwotnego, ściągając serwis w górę. Od momentu zwinięcia, do rozwinięcia nie powinien on przekraczać 5 sekund. Action Script 2.0 on (rollOver){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.dopushlock); }else{ getURL("javascript:"+_root.dopushlock+"();", "_self"); }} on (rollOut){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.dopushunlock); }else{ getURL("javascript:"+_root.dopushunlock+"();", "_self"); }} 24 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Action Script 3.0 var dopushon:String=LoaderInfo(this.root.loaderInfo).parameters.dopushon; target_button.addEventListener(MouseEvent.ROLL_OVER, mouseRollOver); function mouseRollOver(e:MouseEvent):void{ if(dopushon){ ExternalInterface.call(dopushon); }} var dopushunlock:String=LoaderInfo(this.root.loaderInfo).parameters.dopushunlock; if(dopushunlock){ ExternalInterface.call(dopushunlock); } var dopushoff:String=LoaderInfo(this.root.loaderInfo).parameters.dopushoff; target_button.addEventListener(MouseEvent.ROLL_OUT, mouseRollOut); function mouseRollOut(e:MouseEvent):void{ if(dopushoff){ ExternalInterface.call(dopushoff); }} var dopushlock:String=LoaderInfo(this.root.loaderInfo).parameters.dopushlock; if(dopushlock){ ExternalInterface.call(dopushlock); } Push Expand Triple Billboard Plus Efekt rozwinięcia kreacji regulują parametry liczbowe w kodzie emisyjnym. Forma ta powinna posiadać obszary aktywne, przez cały czas trwania emisji. Po pełnym wczytaniu zostaje automatyczne wywołana funkcja dopushlock powodująca rozwijanie reklamy oraz rozpychanie serwisu w dół. Po upływie 5 sekund następuje wywołanie funkcji dopushunlock powodując jego ściąganie oraz powrót reklamy do postaci zwiniętej. Kolejne rozwinięcia występują już po samej ingerencji użytkownika. 25 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Action Script 2.0 if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.dopushlock); }else{ getURL("javascript:"+_root.dopushlock+"();", "_self"); } Action Script 3.0 var dopushunlock:String=LoaderInfo(this.root.loaderInfo).parameters.dopushunlock; if(dopushunlock){ ExternalInterface.call(dopushunlock); } Po 5 sekundach powinna zostać wywołana funkcja doushunlock. Action Script 2.0 if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.dopushunlock); }else{ getURL("javascript:"+_root.dopushunlock+"();", "_self"); } Action Script 3.0 var dopushlock:String=LoaderInfo(this.root.loaderInfo).parameters.dopushlock; if(dopushlock){ ExternalInterface.call(dopushlock); } Rozwinięcie po akcji użytkownika poprzez najechanie kursorem na reklamę. 26 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Action Script 2.0 on (rollOver){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.dopushlock); }else{ getURL("javascript:"+_root.dopushlock+"();", "_self"); }} on (rollOut){ if(flash.external.ExternalInterface.available){ flash.external.ExternalInterface.call(_root.dopushunlock); }else{ getURL("javascript:"+_root.dopushunlock+"();", "_self"); }} Action Script 3.0 var dopushon:String=LoaderInfo(this.root.loaderInfo).parameters.dopushon; target_button.addEventListener(MouseEvent.ROLL_OVER, mouseRollOver); function mouseRollOver(e:MouseEvent):void{ if(dopushon){ ExternalInterface.call(dopushon); }} var dopushoff:String=LoaderInfo(this.root.loaderInfo).parameters.dopushoff; target_button.addEventListener(MouseEvent.ROLL_OUT, mouseRollOut); function mouseRollOut(e:MouseEvent):void{ if(dopushoff){ ExternalInterface.call(dopushoff); }} 27 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Sidekick Reklama składa się z dwóch form .swf, rectangle i halfpage. Najpierw zostaje wyświetlona forma rectangle. Po najechaniu użytkownika na przycisk „otwórz” zostaje wywołana funkcja doexpand, analogicznie jak w formach Expand. Funkcja dolittle nie zostaje wykorzystywana. Dla AS3.0 należy zamienić nazwę obszaru aktywnego z „target_button” na „open_button” gdyż clickTag i przycisk otwórz nie mogą się nazywać tak samo, przykład poniżej. Po aktywacji serwis zostaje przesunięty w lewo na szerokość reklamy, a w wolne miejsce zostaje wczytany halfpage, zawierając zmienna onCrossClick analogicznie jak w formie Toplayer zamieszczony pod przyciskiem „zamknij”. Formy nie łączą się ze sobą graficznie, lecz występują w pewnej odległości od siebie. Action Script 3.0 var doexpand:String=LoaderInfo(this.root.loaderInfo).parameters.doexpand; open_button.addEventListener(MouseEvent.ROLL_OVER, mouseRollOver); function mouseRollOver(e:MouseEvent):void{ if(doexpand){ ExternalInterface.call(doexpand); }} FORMY VIDEO Preroll Preroll jest filmem video (spotem reklamowym) pojawiającym się przed faktycznym kontentem w playerze. Waga materiału jest nieograniczona. UWAGA! W przypadku form video kody do odsłon musza być wygenerowane jako obrazek <img_src>. Jednocześnie kody te nie mogą być wygenerowane w JavaScript. Akceptowanym formatem pliku SD jest: Quicktime z rozszerzeniem „ .mov ” z audio Aspekt ratio: 16:9 FHA (Full-Height Anamorphic) Kodek: Apple DV-PAL 25 4:2:0 (PAL 601) 25 klatek/s (fps) Rozdzielczość obrazu: 720(H) na 576(V) pixeli, interlace (dolne pół-pola) audio zapisane w dwóch pierwszych kanałach dźwiękowych (stereo) poziom dźwięku -4VU / -13db częstotliwość próbkowania audio: 48 kHz rozdzielczość próbkowania audio: 16 bitów 28 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Postroll Postroll jest filmem video (spotem reklamowym) pojawiającym się po zakończeniu emisji faktycznego kontentu w playerze. Maksymalna długość materiału video wynosi 30 sekund. Waga materiału jest nieograniczona. UWAGA! W przypadku form video kody do odsłon musza być wygenerowane jako obrazek <img_src>. Jednocześnie kody te nie mogą być wygenerowane w JavaScript. Akceptowanym formatem pliku SD jest: Quicktime z rozszerzeniem „ .mov ” z audio Aspekt ratio: 16:9 FHA (Full-Height Anamorphic) Kodek: Apple DV-PAL 25 4:2:0 (PAL 601) 25 klatek/s (fps) Rozdzielczość obrazu: 720(H) na 576(V) pixeli, interlace (dolne pół-pola) audio zapisane w dwóch pierwszych kanałach dźwiękowych (stereo) poziom dźwięku -4VU / -13db częstotliwość próbkowania audio: 48 kHz rozdzielczość próbkowania audio: 16 bitów Overlay Overlay jest graficzną formą reklamy, emitowaną w trakcie odtwarzania kontentu video w dolnym obszarze materiału, nad paskiem nawigacyjnym playera. Overlay znika po 10 sekundach. Kliknięcie w overlay powoduje przejście na adres docelowy kreacji. Istnieje możliwość, aby Overlay nie znikał po 10 sekundach, a minimalizował się do logotypu. Po najechaniu na logotyp, kreacja pokazuje się ponownie. W tym przypadku, należy również dostarczyć logotyp. Dopuszczalne formaty formy reklamowej: „ .swf ”, „ .jpg ”, „ .gif ”, „ .png ” Wymiary przy zwykłym playerze: 640x60 px Wymiary przy playerze kinowym: 960x60 px Waga maksymalna: 50 KB 29 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH FORMY MOBILE Reklama na urządzenia mobilne oraz telefony komórkowe należy przygotować we wszystkich rozmiarach jakie zostały wymienione w tabeli na stronie X. Dana forma będzie wyświetlana na ekranie z rozdzielczością dla niej przeznaczoną. Waga jednego pliku nie powinna przekraczać 100kB. Standardowy Banner, Podwójny Banner Standardowa forma reklamowa emitowana w górnej oraz dolnej części serwisów mobilnych. Forma Standardowy Banner najczęściej występuje w rozmiarze 640x100: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Standard.html Forma Podwójny Banner występuje najczęściej w rozmiarze 640x200: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Double_Sized.html Standardowy Rectangle, Rectangle 320x320 Forma reklamowa emitowana w środkowej strefie serwisów mobilnych. Forma Standardowy Rectangle najczęściej występuje w rozmiarze 640x480: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Half_Page.html Forma Rectangle 320x320 najczęściej występuje w rozmiarze 640x640: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Rectangle.html Rectangle Video Forma reklamowa zawierająca wewnątrz kreacji plik wideo. Plik wideo nie powinien ważyć więcej niż 1 MB. Najczęściej forma występuje w rozmiarze 640x480: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Half_Page_Video.html Layer Forma reklamowa wyświetlana na warstwie, posiadająca przycisk zamykający. Reklama może przesuwać się razem z serwisem, może zostać zamknięta przez użytkownika lub automatycznie po określonym czasie. Najczęściej występuje w formacie 640x640: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Layer.html Fullpage Forma reklamowa wyświetlana na warstwie, przykrywająca cały ekran urządzenia mobilnego. Reklama może zostać zamknięta przez użytkownika lub automatycznie po określonym czasie. Najczęściej występuje w formacie 640x960: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Full_page.html 30 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH 3d Cube Forma 3D Cube ma kształt prostopadłościanu (kostki) i może być obracana we wszystkich kierunkach. Każda z 6-ciu ścian może zawierać inny materiał graficzny lub wideo. Kreacja posiada ograniczenie wagowe do 95kB dla wszystkich grafik (ścian) formy. http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_3D.html Scratch Scratch jest interaktywną formą reklamową wyświetlaną na warstwie. Użytkownik musi zdrapać pierwszą warstwę grafiki aby zobaczyć docelową reklamę. Forma występuje najczęściej w formacie 640x640: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/mobile_Scratch.html INNE FORMY REKLAMY E-Insert Jest to gazetka reklamowa w wersji elektronicznej (książeczki). Składa się z pliku głównego i plików pobocznych w formacie .SWF (duże strony). Plik główny zawiera małe strony poglądowe, oraz otaczające je grafika wraz z przyciskami nawigacji. By obniżyć wagę gazetki duże pliki zaciągane są z osobnego folderu (pages), każda duża strona powinna być zamieszczona w osobnym pliku .swf i nie przekraczać dopuszczalnej wagi 200kb. Należy pamiętać, że im więcej stron tym waga głównego pliku rośnie, co może powodować długie wczytywanie się gazety. Do e-insertu należy przygotować obrazek, który będzie zapowiedzą, przeważnie jest to mała strona główna o wymiarach 200x280px Można przygotować e-insert w formacie PDF. Uwaga: 1. Kreacje należy przygotować za pomocą Adobe Flash 9.0 lub w niższej wersji. 2. Wymagany jest zastosowanie Action Script 2.0. 3. Powiadomienie wyskakujące w przypadku braku lub starej wersji wtyczki Flash Palyer, z możliwością jego ściągnięcia. 4. Małą wagę umożliwiającą szybkie wczytywanie. 5. Możliwość powiększenia, przekładania stron, jeśli jest to wymagane. 31 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH 6. Strony duże w e-insercie powinny znajdować się w osobnym pliku i być zaciągane do kreacji osobno. Co umożliwi stopniowe wczytywanie wybranych stron i zmniejszy wagę pliku głównego (.SWF). Watermark 1. Forma statyczna, może zawierać logo, znaki graficzne itp. 2. Jeden plik zostaje powielony na całą szerokość i wysokość serwisu. 3. Reklama powinna być pokryta wzorem o obniżonej widoczności, jasnych kolorach, a powtarzający się motyw nie może utrudniać czytelności serwisu (znak wodny). Dział emisji każdorazowo sprawdza wygląd zamieszczanego watermarka i mogą odmówić przyjęcia zamówienia na ten rodzaj reklamy bez podania przyczyny. Slidenote Forma reklamy tekstowej lub graficznej występująca na stronach artykułowych. W trakcie przewijania serwisu w dół, następuje wysunięcie z prawego dolnego rogu. Kod serwujący podpięty podczas emisji zawiera opcję zamykania. Video Ad Prosimy o dostarczenie pliku HTML5 spełniającego wymagania techniczne formatu bazowego z zaimplementowanym odwołaniem do pliku MP4. Dodatkowo forma powinien zawierać przyciski sterujące (play, stop, wycisz). Dźwięk w filmie musi być wyciszony na starcie, a włączony jedynie po akcji użytkownika. Obraz może być uruchomiony na starcie i odtwarzać się w pętli. Rekomendowanie kodowanie video H.264, audio ACC. Maksymalna dopuszczalna waga pliku video wg czasu: • 15s.- 1,5Mb • 30s.- 2,5Mb • 45s.- 3Mb Zalecenie: Przed przystąpieniem do tworzenia kreacji zalecany jest kontakt z biurem reklamy 32 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Expand Videostitial Reklama występuje z górną forma reklamową. Składa się z kreacji video w małej formie pozycjonowanej do prawego dolnego rogu przeglądarki po, najechaniu której wywołana zostaje druga, większa forma layerowa przykrywająca treść strony WWW Wymagane materiały: Forma przed expandem: do dyspozycji pole o powierzchni 600x400px z czego 400x300px przeznaczone na film video. Pozostałe pole możliwe do brandingu. Prosimy o przesłanie kreacji tła z pozostawioną przeźroczystą przestrzenią na film (film umiejscowiony centralnie) oraz film w formacie flv. Waga filmu: 500kB Waga tła: 50kB Forma po expandzie: możliwa emisja do pełnoekranowej kreacji z czego obszar 800x600px przeznaczony na film. Pozostałe pole możliwe do brandingu. Prosimy o przesłanie kreacji tła z pozostawioną przeźroczystą przestrzenią na film (film umiejscowiony centralnie) oraz film w formacie flv. Waga filmu: 1MB Waga tła: 100kB Link Reklamowy Płatne reklamy tekstowe wyeksponowane w taki sposób, aby nie pomylić ich z niekomercyjnymi treściami serwisów. Linki reklamowe mogą kierować internautę (użytkownika) do wewnątrz serwisu np. na stronę artykuły sponsorowanego, stronę Klienta lub landing page. Prosimy o przesłanie tekstu złożonego z maksymalnie 40 znaków wraz ze spacjami.8 Artykuł Sponsorowany Forma reklamowa w postaci artykułu na serwisie. Artykuły sponsorowane są wyeksponowane w taki sposób, aby nie pomylić ich z niekomercyjnymi artykułami. Publikacja artykułów sponsorowanych występuje na listingu, nie jest publikowany na stronie głównej. Specyfikacja artykułów sponsorowanych: • Treść: do 2 500 znaków, • Tytuł: do 100 znaków ( nie używać drukowanych liter), • Do 10 zdjęć o wym. 800x600 px wyłącznie w formacie JPG o wadze do 5 Mb9, • Pliki w formacie PDF nie będą przyjmowane. 8 9 Ilość znaków zależna od serwisu, zalecany kontakt z biurem reklamy Przy większej ilości zdjęć podzielić mail na kilka paczek. 33 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Box Zobacz Koniecznie Forma reklamy w postaci grafiki i krótkiego opisu. Reklama występuje na stronach głównych serwisów. Specyfikacja: • Grafika: 170x122 px, • Tytuł: do 35 znaków, • Opis: do 45 znaków. Box Serwisów Regionalnych Forma reklamowa wyświetlana na stronach głównych serwisów regionalnych w postaci grafiki i krótkiego tytułu. Użytkownik po kliknięciu zostaje przeniesiony do artykuły sponsorowanego. Fake Ad Forma reklamowa wyświetlana jako pierwsza pozycja na stronie listy wyników z ogłoszeniami. Może być parametryzowana jak inne formy reklamowe, tzn. na wybrane regiony lub kryteria wskazane przez użytkownika. Forma reklamowa składa się z grafiki oraz tekstu przypominając regularne ogłoszenie. Specyfikacja formy Fake ad: • Rozmiar zdjęcia: 280x186px, • maksymalna liczba znaków w tytule i opisie zależy od tego czy użyta zostanie sekcja z ceną oraz ile znaków chcemy mieć w polu tytuł, a ile w polu opis. Wyjaśnia to tabela poniżej: Czy jest sekcja cena Maks. Liczba znaków w tytule Maks. Liczba znaków w opisie TAK 50 (będzie 1 wiersz) 200 (będą 3 wiersze) TAK 100 (będą 2 wiersze) 150 (będą 2 wiersze) NIE 140 (będą 2 wiersze) 200 (będą 2 wiersze) NIE 70 (będzie 1 wiersz) 300 (będą 3 wiersze) Poniższy link przedstawia rozmieszczenie elementów formy Fake ad: http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/fake.png 34 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Show Case Forma reklamy emitowana wyłącznie na stronie głównej serwisu gratka.pl. Forma emituje naprzemiennie 4 grafiki z krótkim tytułem. Po kliknięciu użytkownik przekserowany zostaje na podany adres URL. Specyfikacja Show Case: • Tytuł kreacji: maksymalny tytuł 30 znaków ze spacjami, • Grafika: - 860x400 px, • Maksymalna wielość pliku graficznego 150kB. Megaboard Statyczna forma reklamy emitowana wyłącznie na stronach głównych serwisów regionalnych. Od pozostałych form różni się nietypowym rozmiarem 1170x550. http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/megaboard.png Post Sponsorowany Na Fb Jednorazowa publikacja postu na wybranym FunPage serwisu internetowego Polska Press Grupy. Post przekierowuje do artykułu sponsorowanego lub akcji (konkurs, plebiscyt) opublikowanej w serwisie internetowym Polska Press Grupy. Specyfikacja postu: • Tekst – optymalnie do 80 znaków. Jeśli tekst będzie dłuższy FB zwinie go i umieści link ZOBACZ WIĘCEJ. • Link – URL do artykułu opublikowanego w serwisach Polska Press Grupa (w NM czy innych mediach grupy). • Obrazek – statyczny w formacie JPG, GIF lub PNG; rozdzielczości (72 dpi); max. wymiary 504x504 piksele Dodatkowe ustalenia: • dobór FP odpowiadających charakterowi i tematyce akcji oraz publikacja postu/ów – • obowiązuje limit publikacji postów sponsorowanych: 1 post dziennie/fan page, co drugi dzień, maksymalnie 4 posty tygodniowo • posty są publikowany między godziną 8:00 a 10:00 rano • materiały do publikacji muszą zostać wysłane min. 3 dni przed publikacją http://pliki.serwisyregionalne.pl.s3.amazonaws.com/ckie/emisja/FB-post.png 35 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Wider Kontext LINK LOGO Tytuł (max) Opis (max) 25 znaków 70 znaków Adres www (max) 35 znaków Słowa kluczowe (max) EXCULUSIVE PREMIUM lista 15 -30 słów URL (max) 1024 znaki Grafika GIF/JPG/PNG ----- 72x60px 200x50px, 240x120px, 125x125px 728x90 px, 750x100 px, 750x200 px Grafika GIF/JPG/PNG ----- ----- ----- 300x250px Waga ----- 10kB 15kB 30kB Captcha Plik statyczny wyświetlany przy formularzu lub na forach w celu zabezpieczenia strony www i danych wypełnionych przez użytkownika. Skłania do interakcji. 1. Wytyczne odnośnie hasła przepisywanego przez internautów: • czytelny slogan bez znaków specjalnych (+; %; @; itp.), składający się maksymalnie z 3 wyrazów (20 znaków) ujęty w cudzysłowie • wyraźne odróżnienie sloganu od pozostałej treści przekazu (wielkość, bold, itp.) 2. Zalecenia względem zawartości obrazka: • możliwie jak najmniejsza ilość dodatkowych napisów na kreacji • w przypadku podlinkowanej kampanii – umieszczenie na kreacji graficznego przycisku Call To Action (czytelny komunikat do odbiorcy, by kliknął w banner) 3. Link do strony docelowej po kliknięciu w obrazek: • http://www._________________________ • każda kampania wymaga tylko jednego landing page. Ten sam URL jest podpięty do każdego z trzech rozmiarów kreacji graficznych. * Materiały wysyłamy na adres: [email protected]. Polska Press Sp. z o.o. zastrzega sobie prawo do zmiany powyższej specyfikacji w dowolnym terminie. 36 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH Mailing Forma reklamowa wysyłana w formie elektronicznego listu w formacie tesktowym (.txt) lub html do użytkowników posiadających konta na serwisach Polska Press. Specyfikacja techniczna: 1. Polska Press opracowuje projekt graficzny i i technologiczny: 2. Materiały graficzne od klienta: • • • • • zdjęcia, grafiki (jpg, tiff) logotypy (najlepiej wektorowe ai, eps, pdf) gotowe teksty pliki otwarte (najlepiej psd z warstwami, teksty edytowalne) dokładnie opisane linkowania np.: „w lewym górnym rogu do napisu „zobacz więcej” linkujemy http://www.gratka.pl/” 3. Klient przygotowuje projekt graficzny, Polska Press przygotowuje stronę technologiczną. 4. Polskapresse powinna otrzymać gotowy materiał graficzny w formacie PSD (Photoshop) z warstwami, teksty edytowalne. Dla handlowca materiał podglądowy w JPG. 5. Dokładnie opisane linkowania np.: „W lewym górnym rogu do napisu 'zobacz więcej' linkujemy http://www.gratka.pl/' 6. Użycie podstawowych czcionek systemowych np Arial, Verdana, Tahoma, Georgia, lub Times New Roman. Czcionki mogą być tylko w jednym kolorze, bez dodatkowych „upiększeń” typu gradient, cień itd 7. Tekst może znajdować się tylko na jednolitym tle (gradient również odpada) możliwym do prawidłowego wyświetlenia w mailingu. Teksty znajdujące się grafice będącej dla nich tłem w komórce tabeli, nie wyświetlają się poprawnie. Jeśli klient samodzielnie chce przygotować cały mailing do wysyłki: 1. Kodujemy w standardzie ISO-8859-2 (tzw. Latin-2). Pozostałe kodowania Windows1250 oraz UTF 8 są zdecydowanie bardziej problematyczne, dlatego zalecamy korzystanie z tego pierwszego. 2. Przygotowany mailing powinien w całości opierać się na formie tabelarycznej odpowiednio sformatowanej przy pomocy stylów CSS. Dla wszelkich tabel parametry sugerujemy parametry: cellspacing=”0” cellpadding=”0”. 3. Szerokość maila, którą rekomendujemy to 480-600 px. Większe kreacje u użytkowników, którzy korzystają z ekranów o mniejszej rozdzielczości, mogą 37 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH wymagać przewijania w poziomie, a jak wiadomo jest to niezgodne z utartymi zasadami użyteczności i projektowania. Mailing powinien być wycentrowany. 4. Atrybuty CSS, umożliwiają strukturalne wystylizowanie przygotowywanego mailingu. Dla poprawnego ich zaimplementowania doradza się stosowania tzw. style „inline” (stylowanie wewnątrz dokumentu, czyli we właściwościach każdego elementu), mailingu, oznaczającej definiowanie poszczególnych znaczników kodu HTML, XHTML za pomocą własności CSS w znaczniku body dokumentu. Zalecamy aby nie używać atrybutu <style> w sekcji HEAD. 5. Używamy podstawowych czcionek systemowych np Arial, Verdana, Tahoma, Georgia, lub Times New Roman z określeniem ich wielkości. 6. Chcąc określić wygląd czcionek, atrybut style najczęściej przypisujemy do znaczników <td>, <a> i <span>. Zamiast <p> zalecamy stosowanie znacznika <span>, gdyż znacznik <p> jest różnie interpretowany przez programy pocztowe i może doprowadzić do niepoprawnego wyświetlania się wiadomości w programach pocztowych. 7. Przy osadzaniu w mailingu większych elementów graficznych, zalecane jest stosowanie tagu ALT, z odpowiednio przygotowaną treścią, np. hasło z grafiki, opis grafiki, tekst przekonywujący do pobrania grafiki, gdy jest ona automatycznie blokowana (np. „Pobierz grafikę i zobacz co przygotowaliśmy dla Ciebie”). 8. Do odnośników <a> (tekstowych i graficznych) stosujemy tag TITLE. 9. Do KAŻDEGO nawet najmniejszego obrazka dodajemy style=”display:block, border=0px” 10. Grafiki umieszczane w tle (table>td> lub tr>) mogą być niepoprawnie wyświetlane w niektórych programach pocztowych. Dlatego też zalecamy użycie atrybutu bgColor. Tło komórki może być wyłącznie 1-kolorowe. 11. Wszelkie bloki dokumentu zawierające kod powiązany z językiem Javascript lub Flash są przeważnie pomijane przez większość popularnych programów pocztowych. 12. Gotowy mailing powinien być dostarczony w postaci pliku ZIP. Struktura takiego katalogu po rozpakowaniu powinna zawierać plik główny z rozszerzeniem .html, oraz pliki graficzne (np. jpg, gif). W pliku zip nie mogą się znajdować foldery. 13. Wiadomość nie powinna mieć więcej niż 60kB aby nie zapychać skrzynek Twoich klientów. 14. Paddingi nie zadziałają. Wszelkie przestrzenie uzyskujemy tylko poprzesz zakodowanie pustych komórek tabel o określonych szerokościach. 15. Wszystkie szerokości tabel i komórek w nich zawartych muszą zgadzać się co do piksela i muszą być określone (choćby HTML-owo). 16. Im więcej w mailingu tekstu, tym lepiej. Mailing oparty na tekście jest bardziej 38 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH skuteczny, bo jest widoczny dla większej grupy użytkowników, a grafika powinna być tylko jego uzupełnieniem. Obrazki nie zawsze otwierają się domyślnie. Czasami trzeba kliknąć "Pobierz obrazki", żeby je zobaczyć. Tekst widzimy od razu. Dlatego mailing, który powstał w oparciu tylko o obrazki to nie jest dobry pomysł. 17. Zbyt duże obrazki (rozmiarowo/wagowo) najprawdopodobniej spowodują, że mailing wpadnie w spam. Dlatego np. zdjęcie o rozmiarze 600x300 px rozcinamy na 3 kawałki 600x100 px. 18. Atrybut line-height jest bardzo trudny do kontrolowania. W każdym kliencie pocztowym interpretowany jest nieco inaczej. Dlatego nie zaleca się projektowania kreacji newsletterów, w których występują boksy otoczone borderem z zaokrąglonymi rogami. Tych ostatnich nie da się bowiem skodować czystym HTMLem, czy CSS-em. Wstawianie borderów, jako grafiki jest z kolei bardzo ryzykownym przedsięwzięciem. 19. Do kodowania nie używamy poleceń HTML 5 i CSS 3. Nie są poprawnie obsługiwane przez większość klientów pocztowych. OGÓLNE WYMAGANIA FORM REKLAMOWYCH 1. Formy reklamowe powinny być wykonane według powyższej specyfikacji. 2. Nazwy przesłanych plików muszą być identyczne, różniące się jedynie rozszerzeniem. 3. Reklama video, czyli główny plik .swf powinien komunikować się plikiem zawierającym streaming. 4. Pliki JPG/GIF/PNG nie są formą umożliwiającą emisję filmu wideo. 5. Rozmiar reklamy powinna zgadzać się z opisem w nazwie. 6. Formy niestandardowe występujące w kreacji należy przekonwertować na grafikę wektorową. 7. Wszystkie reklamy muszą posiadać zaszytą zmienną „_root.clickTag” pozwalającą podpiąć w kodach serwujących prawidłowy link. 8. Przyciski typu: play, stop, rewind, „zamknij X „ powinny być łatwo dostępne niesprawiające trudności dla użytkownika. 9. Należy zwrócić szczególną uwagę na wielkość liter w zmiennych. 39 / 40 SPECYFIKACJA TECHNICZNA FORM INTERNETOWYCH INFORMACJE WAŻNE I PRZYDATNE! Jak sprawdzić czy plik .swf posiada poprawnie „zaszyty” _root.clickTag? 1. Plik z reklamą musimy umieścić na serwerze 2. W oknie przeglądarki (np.: IE 6) wpisujemy adres url do pliku .swf (nie lokalnie, tylko przez http://) 3. Dopisujemy bez pozostawiania odstępu: ?clickTag= i także bez odstępu adres url, na który ma odnosić kreacja, inny niż docelowy dla danej kampanii, np.: http://polskapress.pl 4. Następnie klikami na kreację. Jeśli w nowym oknie otworzy się strona, której url wpisaliśmy, to kreacja jest poprawnie wykonana. 40 / 40