Jak vytvorit funkcní banner pro reklamní systémy

Sdílet Tento návod by mel pomoci vsem, kterí mají za úkol vytvorit flash banner, který bude fungovat v reklamních systémech. V úvodní cásti je vysvetlen smysl pouzívání promenných a v dalsí cásti je pak velmi podrobne a krok po kroku popsán zpusob vlození promenné do banneru. Na konci clánku je ke stazení HTML soubor k otestování vasich banneru.

Trocha z historie aneb proc vlastne promennou do banneru vkládáme

U banneru v reklamních systémech je treba sledovat kolik lidí na daný banner kliklo. To lze merit pomocí speciální URL adresy, která zapocítá v reklamním systému proklik a poté uzivatele presmeruje na cílovou stránku. V dobách animovaných GIF banneru bylo snadné tuto URL vlozit prímo do HTML a byla tak nezávislá na banneru. S príchodem flash banneru vsak nastal problém. URL, na kterou flash banner odkazuje totiz musí být vlozena prímo do banneru. V banneru je vsak, jak uz jsme si rekli, treba mít speciální URL, kterou vsak tvurce banneru znát jeste nemuze, protoze ji vygeneruje teprve samotný reklamní systém po vlození banneru. Naopak clovek obsluhující reklamní systém nemá kapacity ani moznosti na to, aby URL do kazdého banneru vkládal. Zacarovaný kruh dalo by se ríct.

Potom vsak nejaká chytrá hlava vymyslela systém, kdy se do banneru vlozí pouze promenná, která si svoji hodnotu vezme z HTML stránky do které je banner vlozen. V praxi to pak vypadá tak, ze do banneru je vlozena napríklad promenná "clickthru". K této promenné je pak prímo v HTML prirazen speciální odkaz z reklamního systému, který zajistí jak zapocítání prokliku tak presmerování na cílovou webovou adresu. Tím bychom v ideálním prípade mohli skoncit, ale happyend se nekoná.

Problém nastává v okamziku, kdy máte promennou do banneru vlozit. První vase otázka asi bude: Jakou tu promennou mám do banneru vlozit? Odpoved není jednoduchá. Vzhledem k tomu, ze neexistuje zádný úzus v tom jaká promenná se bude v reklamních systémech pouzívat ani v tom jakým zpusobem se bude do banneru vkládat, resí si kazdý server tento problém po svém. V technické specifikaci media plánu (v ideálním prípade ji máte) se pak doctete, ze nekteré servery pouzívají promennou clickthru, nekteré clicktag, nekteré to písou clickTAG a u nekterých serveru se vkládá jeste dalsí promenná "clickTarget", kterým rídí do jakého okna by se mel odkaz otevrít. Jako tvurci banneru by jste vzdy meli mít presnou informaci o techto promenných.

Co je tedy treba vedet predem?

Pokud pripravujete bannerovou kampan, pak v ideálním prípade dostanete, jako soucást media plánu, technické specifikace jednotlivých serveru. Tam se, krome rozmeru a datové velikosti, doctete ze skript, který máte do banneru vlozit vypadá napríklad takto:

on (release) {
    if (clickTAG.substr(0, 5) == "http:") {
        getURL(clickTAG, "_blank");
    }
}


Tento skript v podstate ríká, ze server pouzívá promennou "clickTAG", odkaz otevre do nového okna a URL v parametru clickTAG musí zacínat znaky "http:". Ta poslední podmínka je tam kvuli bezpecnosti. Tento kód pouzívá napríklad AdWords Googlu. Podobné skripty by jste nasli i u ostatních serveru. Jeste pro príklad uvedu jaký skript pouzívají servery z rodiny Seznam.cz:

on (release) {
	if (!_root.clickthru && _root.clickTag) {
		_root.clickthru = _root.clickTag;
    }
    getURL(_root.clickthru, _root.clickTarget);
}

Tento skript, krome predání promenné "clickthru", pracuje i s promennou "clickTarget", kterou rídí, do jakého okna se po kliknutí na banner otevre odkaz.

Co delat kdyz nevím nic

Dost casto se setkávám s tím, ze zádnou technickou specifikaci nedostanu. Potom je treba se ptát. V podstate vám bude stacit, pokud se vám podarí zjistit název promenné, jakou server pouzívá a do jakého okna se má odkaz otevrít. Nejcasteji se vám dostane odpovedi, ze promennou pouzívají "clickthru" ci "clicktag" (pozor na velká a malá písmena, na velikosti zálezí) a ze se má banner po kliknutí otevrít do nového okna (coz pro vás znamená pouzití parametru "_blank", do stejného okna by to pak byl parametr "_top"). Podle techto informací uz si pak snadno muzete upravit kód, který jsem zde vlozil jako první ukázku.

Takto tedy muze vypadat kód, pokud budeme pouzívat promennou "clickthru" a banner se bude otevírat do stejného okna:

on (release) {
    if (clickTAG.substr(0, 5) == "http:") {
        getURL(clickthru, "_top");
    }
}


Samozrejme, ze toto není jediný zpusob jak lze správne kód do banneru zapsat. Sám jsem videl i pouzíval nekolik variant, tento zpusob mi vsak prijde dobrý vzhledem k zabezpecení problému s podstrcenýmJavascriptem místo URL adresy a navíc je tento kód doporucován i spolecností Adobe.

Jak kód do banneru vlozit

Kód tedy znáte a ted jde o to jej vlozit do banneru. Budete k tomu predevsím potrebovat zdrojový soubor banneru (vetsinou se jedná o soubor s príponouFLA ). Soubor si tedy otevrete. Doporucuji si vytvorit v hlavní scéne novou vrstvu, která bude umístena co nejvíc nahore nad vsemi vrstvami. Vrstvu si pojmenujte napríklad "URL".

Kliknete na symbol obdélnícku a ve scéne nakreslete jakoukoli barvou jakýkoli obdélník. V paletce Properties zmente jeho rozmer na stejný jaký má vás banner. Predpokládejme napríklad 250 x 250 px.

Klepnete v paletce tools na sipku a poté si klepnutím oznacte obdélník. Stisknete klávesu F8, címz vyvoláte dialog ve kterém vyberte moznost "Button" a potvrdte. Tím jste vytvorili tlacítko, na které povesíme zadaný kód.

Kliknete na obdélník címz se dostanete do jeho editace. V horní cásti by jste v tuto chvíli meli videt na casové ose pouze 4 polícka. Klepnete na první z nich a táhnutím preneste jeho obsah do ctvrtého polícka s názvem "Hit". Toto polícko oznacuje aktivní plochu tlacítka, která pri finálním exportu není viditelná. První tri polícka by mela zustat prázdná.

Klepnete vlevo nahore na polozku "Scene 1" címz se dostanete zpet do hlavní scény. Obdélník nyní zmení svoji barvu na svetle modrou, to je ciste oznacení pruhlednosti. Pri exportu se tato modrá nebude zobrazovat. Tlacítko je nyní treba umístit presne pres celý banner. Klepnete prosím na tlacítko a v paletceProperties nastavte polozku X a Y na hodnotu "0".

Ujistete se, ze máte oznacené tlacítko, pro jistotu na nej klepnete jeste jednou. Stisknutím klávesy F9 vyvoláte paletku Actions. Zkopírujte si napríklad z této stránky kód:

on (release) {
    if (clickTAG.substr(0, 5) == "http:") {
        getURL(clickTAG, "_blank");
    }
}


a pres klávesy CTRL + V jej vlozte do paletky Actions. Tím je vlození kódu hotovo. Banner ulozte a vyexportujte výsledný SWF soubor.

Jak banner otestovat

Pred odesláním banneru na server bychom meli jeste otestovat, ze jsme kód do banneru vlozili správne. Lze toho docílit velmi jednoduse a to tím, ze si vytvoríte jednoduchou HTML stránku, ve které promennou do banneru predáte.

Testovací HTML stránka, kde budeme testovat správné vlození promenné "clickthru" by mohla vypadat napríklad takto:

<html>
<body>


    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="250" height="250">
    <param name="movie" value="banner-250x250.swf?clickTAG=http://www.designportal.cz/" />
    <embed SRC="http://www.designportal.cz/banner-250x250.swf?clickTAG=http://www.designportal.cz/" width="250" height="250" />
    </object>


</body>
</html>


V této HTML stránce testuji funkcnost promenné predáním parametru URL stránek Design portálu. Cervene vyznacené jsou cásti kódu, které budete pravdepodobne menit pokud se vás soubor bude jmenovat jinak ci budete mít jinou  promennou, cílovou URL atd. HTML kód si zkopírujte, vlozte napríklad doNotepadu a ulozte jako soubor s príponou HTM, napríklad "banner-test.htm".

Stáhnete si ukázkové soubory spolu se zdrojovým FLA souborem.

Dalsí pozadavky na banner

Krome pozadavku na správne vlozenou promennou se muzete setkat jeste s dalsími jako je napríklad verze flash playeru, 1px linky kolem banneru, zákaz opakování animace atd. Vse zálezí od pozadavku toho serveru, na kterém bannery pobezí, proto je dobré predem si vyzádat veskeré technické pozadavky aby jste se pak vyhnuli predelávání banneru.

Doufejme, ze vám tento návod alespon trochu pomuze ve vytvárení banneru pro reklamní systémy. Pokud by jste narazili na nejakou nepresnost ci neco co vám v návodu chybí, napiste mi, není problém tento návod upravit dle vasich pozadavku.

Prectete si dalsí clánky v rubrice:
Návody

Autor clánku:
Martin Kalda