Technické specifikace reklam
HTML5
Jedná se o zcela plnohodnotný fragment HTML, který bude do stránky vložen v tagu iframe.
TECHNICKÉ SPECIFIKACE
Požadovaný typ souboru
Bannery ve formátu HTML5 je nutné dodávat jako samostatný archiv s příponou ZIP.
Pojmenování archivu ZIP
Pro snadnou manipulaci s bannery ve formátu HTML5, pojmenujte každý archiv ZIP tímto způsobem: Klient+Akce+HTML5+rozmě/název banneru (př.: CSOB_Karty_HTML5_300x600.zip). Výrazně tím urychlíte celý proces nasazení banneru do reklamního systému.
Struktura banneru
Archiv banneru HTML5 (ZIP) musí obsahovat spouštěcí soubor s příponou „.html“ a případné všechny další soubory, které jsou nutné k bezchybnému zobrazení banneru ve stránce. Všechny soubory a adresáře musí být uloženy v první úrovni archivu, tj. bez složek a podsložek
Podporované typy souborů
V rámci archivu banneru HTML5 (ZIP) jsou povoleny všechny níže vyjmenované typy souborů:
- CSS
- JS
- HTML
- JSON
- GIF
- PNG
- JPG
- SVG
- WOFF/WOFF2
- EOT
- XML
Počet a názvy souborů
- Počet všech souborů v archivu HTML5 banneru nesmí překročit hodnotu 40.
- Názvy souborů v archivu nesmí obsahovat diakritiku a speciální znaky. Pokud je banner generován externím programem (Adobe Edge Animate, Google Webdesigner), je nutné se před exportem banneru ujistit, že názvy vrstev diakritiku či speciální znaky neobsahují.
Načítání dat z externích zdrojů
Celková maximální datová velikost banneru včetně všech scriptů, knihoven a datových zdrojů externích služeb, které jsou staženy až po umístění do stránky, nesmí po jejich rozbalení překročit 1MB. Důrazně doporučujeme používání externích zdrojů z rychlých a bezvýpadkových CDN, aby došlo k eliminaci chyb v důsledku pomalých odpovědí z CDN. Při překročení limitu 1 MB si vyhrazujeme právo na odmítnutí.
Doporučené externí zdroje:
- fonts.googleapis.com
- code.jquery.com
- s0.2mdn.net/ads/studio/
- s1.adform.net
- cdn.jsdelivr.net/npm/lottie-web
- ajax.googleapis.com/ajax/libs/jquery/
- code.createjs.com/createjs
- code.createjs.com/1.0.0/createjs.min.js
- cdnjs.cloudflare.com/ajax/libs/bodymovin/
Při načítání podpůrných knihoven musí adresa scriptu začínat dvěma lomítky (viz příklad níže).
Správně: <script src="//cdn.example.com/file.js"></script>
Špatně: <script src="http://cdn.example.com/file.js"></script>
Nastavení prokliku
V rámci HTML5 banneru je podporováno přesměrování pouze na jednu URL, kterou je nutné zaslat spolu s bannerem zvlášť. Prokliknutelná je celá část banneru (element <a>
s atributem href
, žádný onclick
). Cílovou adresu do atributu href
nastaví náš reklamní systém, je však nutné na konec kreativy vložit skript: <script type="text/javascript" src="//1gr.cz/js/ad/proklik.js"></script>
. Použití jiného JavaScriptu (např. window.open();
) není povoleno.
Správná funkčnost
Pozor! Za správné zobrazení v jednotlivých prohlížečích odpovídá výrobce, který musí zajistit bezproblémovou funkčnost ve všech majoritních prohlížečích, včetně mobilních verzí.
Upozornění
- V archivu banneru může být pouze jeden soubor s příponou „.html“.
- Uvnitř iframu se nesmí odehrát žádné přesměrování (nebo jiná změna adresy) způsobující, že kliknutí na tlačítko Zpět v prohlížeči na naší stránce nepovede na předchozí stránku.
- Prokliknutelná část banneru musí mít při najetí myší standardní kurzor ruky, který mívají odkazy. Neprokliknutelné části musí mít normální kurzor.
- Banner si nesmí ukrást focus nebo způsobit odchod z naší stránky bez standardní explicitní akce uživatele (tj. bez kliku myší, bez stisknutí enteru, bez dotyku ukončeného v místě, kde začal).
- Banner nesmí vydávat zvuky bez najetí myši nebo bez explicitní akce uživatele.
- Část uživatelů používá jinou výchozí velikost písma. Nevyžadujeme, aby banner vypadal při všech velikostech stejně, jen upozorňujeme, že je vhodné na tuto pružnost prostředí nezapomínat (zamezit jí nelze).
- Dodaný banner nebo kreativa nesmí nadměrně zatěžovat procesor a využívat paměťové zdroje zařízení, na kterém se zobrazuje. Při hodnocení vycházíme z doporučení iAB, kdy by jednotlivé kreativy neměly vyžadovat více jak 30 % dostupných prostředků CPU (vztaženo k průměrné uživatelské základně). Při nadměrné zátěži a využívání systémových prostředků dodanou kreativou si vyhrazujeme právo na její odmítnutí.
Tipy ke snížení datové velikosti
Použijte optimální formát pro vaši grafiku:
- JPEG: Hodí se na fotky. Nepodporuje průhlednost. Používá ztrátovou kompresi, která nemá ráda šrafování a jednolitou červenou a má naopak ráda zarovnání bloků do mřížky 8x8 pixelů. Datová velikost je úměrná rozměrům, nikoliv obrazové složitosti. Tip na nástroje ke kompresi: JPEGmini
- PNG: Hodí se na veškerou ostatní grafiku (loga, nápisy…), může mít průsvitné části. Komprese je běžně bezztrátová, ale je možné omezit paletu na 256 (a méně) barev, což může velikost srazit. Datová velikost je úměrná obrazové složitosti, nikoliv rozměrům. Tip na nástroje ke kompresi: PNG Gauntlet, TinyPNG
- GIF: Hodí se pouze na pohyblivou grafiku. Pro statický obrázek je vždy horší než PNG.
- SVG: Hodí se na veškerou vektorovou grafiku. Je bezztrátově zvětšitelný, ale může být datově náročný. Tip na nástroje ke kompresi: SVGOMG, SVG Editor
Co s nestandardními fonty?
- Převeďte na obrázek formátu PNG. Relativně nízká datová velikost. Jen na zařízeních s vyšší hustotou pixelů (mobily a tablety) může vypadat hůř. Přesto je to obvykle nejlepší řešení
- Vygenerujte webfont formátu WOFF/WOFF2. Například pomocí generátoru FontSquirrel lze vygenerovat webfont omezený na určitou škálu znaků – pak je WOFF soubor malý.
- Nepoužívejte nestandardní písmo. ;-) Tedy fonty které nejsou součástí operačních systémů (Windows, Mac OS (iOS), Linux, atp.)