BBelements Ad Server. I. Kreacje in-page

Transkrypt

1 I. Kreacje in-page Kreacje podstawowe, typu in-page, czyli wbudowane w stronę (np. billboard, rectangle, skyscrapper), aby spełnić wymagania techniczne muszą posiadać: 1. prawidłowe wymiary 2. prawidłową wagę 3. prawidłowo zdefiniowane przechwytywanie kliknięcia Zunifikowane informacje na temat uniwersalnych rozmiarów i wag kreacji w zależności od typów można znaleźć w dokumencie Standardy reklamy internetowej. Dokument ten opisuje obowiązujące na świecie standardy zebrane przez SPIR (IAB Czechy). Uwaga: celem IAB jest ujednolicenie specyfikacji na wszystkich rynkach reklamy internetowej, jednak na chwilę obecną mogą one różnić się w zależności od państwa i wydawcy. Dlatego wymiary kreacji i jej wagę należy każdorazowo skonsultować z wydawcą. Obszary klikalne definiuje się poprzez umieszczenie przezroczystego buttona nad całą powierzchnią, która ma być klikalna, na najwyższej warstwie kreacji. Do buttona należy dołączyć następujący kod: on (release) { if ((_root.clickthru == undefined) && (_root.clicktag)) { _root.clickthru = _root.clicktag; if ((_root.clickthru == undefined) && (_root.clicktag)) { _root.clickthru = _root.clicktag; if (_root.clicktarget == undefined) { _root.clicktarget = "_top"; geturl (_root.clickthru, _root.clicktarget); Strona 1

2 II Jedno- i dwuplikowa kreacja na warstwie Ten dokument opisuje sposób przygotowania flashowej kreacji na warstwie (m.in. expand, toplayer etc.). Podstawowy typ kreacji na warstwie składa się z elementu stałego umieszczonego w stronie oraz części znajdującej się na warstwie, wyposażonego w możliwość usunięcia (poprzez interakcję użytkownika lub kliknięcie przycisku zamknięcia). Wychodząc od wersji podstawowej można tworzyć różne wariacje i dostosowywać kreację do własnych potrzeb. Takimi modyfikacjami są np. toplayer, brandmark. Wszystkie te kreacje tworzone są w podobny sposób i funkcje w nich użyte zawsze są takie same. Klikalność kreacji przygotowuje się w identyczny sposób jak dla form płaskich (in-page). W przypadku kreacji na warstwie korzystającej z plików graficznych (jpg, gif, png) zachowanie kreacji definiowane jest poprzez obsługujący ją skrypt JavaScript. W przypadku kreacji flashowych ich zachowanie musi być zdefiniowane wewnątrz nich w języku ActionScript. Istnieją dwa podstawowe sposoby przygotowania kreacji na warstwie. Każdy z nich ma swoje zalety i wady, a wybór pozostaje po stronie twórcy kreacji. Pierwszym sposobem jest przygotowanie kreacji składającej się z dwóch plików, z których jeden odpowiada za formę in-page kreacji (starter), zaś drugi za wersję na warstwie (layer). Zarządzanie wyświetlaniem kreacji odbywa się za pomocą HTML i JavaScript. Należy pamiętać, że w przypadku plików obrazów (jpg, gif, png) jedyną możliwością zdefiniowania kreacji ekspandowalnej jest metoda dwuplikowa. Drugi sposób w większej części opiera swoje działanie na ActionScript (w kreacji muszą być zdefiniowane odpowiednie funkcje AS) i polega na przygotowaniu jednej kreacji flash zawierającej animacje odpowiedzialne zarówno za starter jak i layer. Rozmiar tak zdefiniowanej kreacji jest taki sam jak rozmiar jej części ekspandowanej. Należy pamiętać, że w tej metodzie wszystkie zachowania kreacji należy zdefiniować w niej samej. Strona 2

3 Okodowanie kreacji Poniższe kody napisane są w ActionScript2.0. Kody dla wersji AS3.0 zostaną przedstawione w dalszej części dokumentu. W pierwszej klatce kreacji należy umieścić poniższy kod. Odpowiada on za umożliwienie kreacji komunikacji zewnętrznej. if (!_root.domain1) { domain1 = "*"; if (!_root.domain2) { domain2 = ""; System.security.allowDomain(domain1, domain2, "*"); Obszary klikalne definiuje się poprzez umieszczenie przezroczystego buttona nad całą powierzchnią, która ma być klikalna, na najwyższej warstwie kreacji. Do buttona należy dołączyć następujący kod: on (release) { if ((_root.clickthru == undefined) && (_root.clicktag)) { _root.clickthru = _root.clicktag; if ((_root.clickthru == undefined) && (_root.clicktag)) { _root.clickthru = _root.clicktag; if (_root.clicktarget == undefined) { _root.clicktarget = "_top"; geturl (_root.clickthru, _root.clicktarget); Wszystkie elementy kreacji znajdujące się na warstwie muszą posiadać przycisk zamknięcia z dowiązanym kodem: on (release) { fscommand (_root.prefix + "_close"); else { Strona 3

4 geturl (("javascript:" + _root.prefix) + "_close()"); Okodowanie kreacji dwuplikowej 1. Okodowanie startera Do buttona odpowiadającego za kliknięcie w kreację należy dołączyć dodatkowy kod odpowiadający za ekspandowanie i zwijanie kreacji: on (rollover) { fscommand (_root.prefix + "_starterin"); else { geturl (("javascript:" + _root.prefix) + "_starterin()", "_self"); on (rollout) { fscommand (_root.prefix + "_starterout"); else { geturl (("javascript:" + _root.prefix) + "_starterout()", "_self"); Tak przygotowana kreacja może zostać też potraktowana jak zwykły banner i może być umieszczona na stronie tak, aby pełniła taką funkcję (w takim wypadku w JavaScript funkcje byłyby przechwytywane i przekazywane do funkcji, które nic nie wykonują). W przypadku potrzeby wyswietlenia layerowej części kreacji, jej zachowanie określone jest nie w ActionScript wewnątrz kreacji, a w zewnętrznym skrypcie JavaScript, w którym można określić również dodatkowe zachowania kreacji, takie jak: czy kreacja w momencie ładowania strony ma wyswietlić starter czy layer, ile razy w jakim okresie czasowym kreacja może załadować się wyekspandowana itp. Strona 4

5 2. Okodowanie layera Layer, podobnie jak starter, musi posiadać rozciągnięty nad całą powierzchnią button z podpietym skryptem odpowiedzialnym za przekierowywanie kliknięć oraz skryptem odpowiadającym za ekspandowanie i zwijanie kreacji: on (rollout) { if (_root.inout) { fscommand (_root.prefix + "_layerout"); else { geturl (("javascript:" + _root.prefix) + "_layerout()", "_self"); on (rollover) { if (_root.inout) { fscommand (_root.prefix + "_layerin"); else { geturl (("javascript:" + _root.prefix) + "_layerin()", "_self"); Dodatkowo należy pamiętać o przycisku zamknięcia X, który powinien być widoczny przez cały czas trwania animacji ustawiony w formie elementu button znajdującego się ponad powierzchnią kreacji. Fukcja zamykająca _close() opcjonalnie może być wywoływana automatycznie po upłynięciu określonego. Używając funkcji bezprzyciskowych (reagujących na interakcję użytkownika, np. Najechanie kursorem myszy nad powierzchnię kreacji) należy pamiętać o umieszczeniu funkcji stop() na końcu animacji, co pozwala uniknąć niekontrolowanego zapętlenia kreacji. Okodowanie kreacji jednoplikowej Cała animacja zdefiniowana jest w jednym pliku. Jej umiejscowienie na stronie oraz Strona 5

6 rozmiary w wersji zwiniętej są zdefiniowane w JavaScript. W wersji zwiniętej (starter) widoczna jest tylko część kreacji, natomiast w wersji rozwiniętej cała kreacja swf staje się widoczna. Przygotowanie kreacji jednoplikowej jest nieco bardziej skomplikowane i wymaga szczególnej uwagi przy rozmieszczaniu buttonów na kreacji, logicznym rozmieszczaniu funkcji i prawidłowej nawigacji pomiędzy animacją startera i layera. Główny button kreacji powinien mieć rozmiar startera (może być częścią osobnego MovieClip dla startera) i mieć przypisane takie same funkcje, jak starter kreacji dwuplikowej (nie zapominając o funkcji odpowiedzialnej za klikalność kreacji) uzupełnione o odwołanie do layerowej części animacji, np.: on (rollover) { fscommand (_root.prefix + "_starterin"); else { geturl (("javascript:" + _root.prefix) + "_starterin()", "_self"); on (rollout) { fscommand (_root.prefix + "_starterout"); else { geturl (("javascript:" + _root.prefix) + "_starterout()", "_self"); Jeśli kreacja ma się rozwinąć automatycznie po załadowaniu strony, nie można jej traktować jako kreacji dwulayerowej, zaś automatyczne wywołanie funkcji _starterin() musi zostać ponownie umieszczone w kreacji, najlepiej z ograniczeniem uniemożliwiającym zapętlenie się ekspandowania. Na części rozwiniętej lub na buttonie muszą być podpięte następujące funkcje: on (rollout) { if (_root.inout) { fscommand (_root.prefix + "_layerout"); else { geturl (("javascript:" + _root.prefix) + "_layerout()", "_self"); Strona 6

7 on (rollover) { if (_root.inout) { fscommand (_root.prefix + "_layerin"); else { geturl (("javascript:" + _root.prefix) + "_layerin()", "_self"); Tutaj również wymagany jest przycisk zamknięcia i o ile to możliwe zamknięcie części layerowej na końcu animacji. W każdym wywołaniu on rollover/on rollout funkcje JavaScript można umieszczać przed zdefiniowaniem nawigacji (przejścia między stadiami kreacji). Wskazówki: 1. Testuj, testuj i jeszcze raz testuj. Pamiętaj, że zmienne są przekazywane do kreacji za pomocą metody GET, np.:...starter.swf?prefix=123&activex=1&clickthru= Funkcje mogą być przechwytywane przez proste struktury, jak np.: <script> function 123_close() alert("calling closed")...</script> 2. Wewnętrzne wywołania funkcji (nawigacja w kreacji) umieszczone w buttonach ze zdefiniowanymi funkcjami, powinny zostać umieszczone za tymi funkcjami. 3. Testy należy wykonywać online, najlepiej na serwerze lokalnym, gdyż pewne rzeczy mogą funkcjonować inaczej, gdy skrypty uruchamiane są w sieci, a inaczej gdy z dysku twardego. 4. Dostarczając kreację, dobrze jest podać nazwy użytych funkcji i rozmiary kreacji (zarówno startera jak i layera), a w przypadku kreacji dwuplikowych również sposób i Strona 7

8 kierunek ekspandowania, czasy opóźnień i inne informacje na temat pożądanego zachowania się kreacji. 5. Jeśli rozwijanie i zwijanie kreacji zdefiniowane jest po interakcji użytkownika, np. po najechaniu i zjechaniu myszą z powierzchni kreacji, to umieszczenie na layerze krzyżyka zamykającego nie jest wymagane. Porównanie kreacji jedno- i dwuplikowych Zaślepka, wersja gif/jpg Funkcje zawarte w kreacji swf Oskryptowanie JS Kreacja dwuplikowa Możliwość stworzenia zaślepki GIF/JPG o działaniu takim, jak pełna kreacja SWF. Wymagane dostarczenie pliku startera i layera w wersji GIF/JPG. Kliknalny button w każdej kreacji, nawigacja pomiędzy kreacjami. Należy pamiętać, że animacja layera zawsze będzie zaczynać się od początku, nie ma możliwości innej synchronizacji, na końcu animacji layera należy zdefiniować funkcję stop(). XXX_starterIn() i XXX_starterOut() dla startera, XXX_layerOut(), XXX_layerIn(), XXX_close() dla layera, XXX_close() dla przycisku zamknięcia. Funkcje JS odwołują się do Kreacja jednoplikowa Zaślepka w formacie GIF/JPG jest w formie i rozmiarach startera kreacji. Nawigacja rozwijania/zwijania, klikalny button w każdym momencie animacji, opcjonalnie przycisk zamknięcia na layerze. XXX_starterIn(), XXX_starterOut(), XXX_layerIn(), XXX_layerOut(), XXX_close() umieszczone w jednym pliku w odpowiednich momentach Strona 8

9 Zalety Wady okna "_self". XXX jest zastępowane wartością zmiennej prefix. Kreację można przygotować ze zwykłych obrazów, można za pomocą zewnętrzych skryptów w większym stopniu kontrolować zachowanie kreacji, np. umiejscowienie layera względem startera, opóźnienia. Większa kontrola kreacji poprzez skrypt JS. Trudniejsza synchronizacja obu części kreacji. trwania animacji. Należy uważać, aby uniknąć zapętlenia ekspandowania. Odwołanie do okna "_self". Kreacja jest łatwiejsza do przygotowania, testowania i debugowania, możliwa jest precyzyjna synchronizacja animacji startera i layera. Taki rodzaj kreacji może nie być przyjmowany przez niektóre specyficzne adserwery. Ponadto wymagana ona większej biegłości w skryptowaniu, łatwiej jest popełnić błąd w którymś z newralgicznych punktów: umieszczenie odpowiednich funkcji w odpowiednich częściach kreacji i prawidłowa nawigacja pomiędzy animacjami. Strona 9