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

Podobne dokumenty