Nasazení HTML5 banneru do iBB Ad Server

Nasazení HTML5 banneru do iBB Ad Server
Zdeněk Vojkůvka
2016/08/23 11:22
AdServer v2 - Nasazení HTML5 banneru do iBB Ad Server
Tabulka obsahu
Co je třeba ke zvládnutí HTML bannerů znát a jaké nástroje používat? .................................................................................... 3
Page 2 - naposledy upravil(a) Zdeněk Vojkůvka - 2016/08/23 11:22
AdServer v2 - Nasazení HTML5 banneru do iBB Ad Server
Co je třeba ke zvládnutí HTML bannerů znát a jaké
nástroje používat?
Ke zvládnutí HTML 5 bannerů a html bannerů obecně, bychom měli mít/znát dvě základní věci: •
•
Základy struktury HTML a CSS
Mít základní editor pro psaní HTML (pspad, notepad++ aj.)
Pro nás jako Administrátory iBB Ad Server je důležité vědět, že HTML 5 banner se dá použít s podobným efektem jako u
klasických flash bannerů a kromě nich má řadu výhod:
•
•
Zobrazování i na zařízeních, které nepodporují flash (mobilní zařízení)
Není nutný na rozdíl od klasických flashů žádný plugin do prohlížeče. (flash
plugin způsobuje často pády celého prohlížeče)
Má však i nevýhody, které se projeví hlavně ve spojitosti s jejich nasazováním do reklamních systémů:
•
•
•
Všechny funkce HTML5 a potažmo CSS3 nejsou podporovány ve starších
prohlížečích a v těch nových se podpora funkcí může v rámci jejich vzájemné
kompatibility různit. Jedná se pořád o novinku, byť HTML 5 je již pár let nejnovějšími prohlížeči
podporován. Tzn. Že je zde určitý důraz na schopnosti kodéra, který daný
banner připravuje = každý banner se svou strukturou liší a je nutná z naší
strany pokaždé jiná úprava. Standardizování je zde velmi problematické.
Špatně vyrobený HTML 5 banner může mít negativní dopad na celou web
stránku (konflikt názvů stejných CSS tříd, přepisování defaultních css stylů,
které jsou již implementovány ve stránce aj.). Z tohoto důvodu využívá
implementace prostřednictvím iframe.
HTML banner se nejčastěji skládá z těchto souborů:
1.
2.
3.
Zdrojový index.html, který je zdrojovým kódem celé konstrukce banneru
Soubor CSS – nutný pro správné zobrazení a nastylování banneru. Může
být jako externí soubor, nebo přímo vložen v hlavčice html dokumentu
index.html
Externí image obrázky ve formátu GIF/PNG/JPG
Přípravná fáze nasazení HTML 5 banneru v prostředí iBB
Ad Server
1.
Kontrola dodaných podkladů
Ještě před tím, než začneme kód banneru vkládat, projdeme všechny soubory,
které klient zaslal. Hlavní zdrojový soubor se nazývá většinou index.html.
Pokud nám klient dodá banner zabalený ve formátu RAR, nejprve jej
rozbalíme do jedné složky a klikem na index.html si ověříme, jestli se vůbec
banner vykresluje. Pokud ano, můžeme přejít k dalšímu kroku.
Page 3 - naposledy upravil(a) Zdeněk Vojkůvka - 2016/08/23 11:22
AdServer v2 - Nasazení HTML5 banneru do iBB Ad Server
2.
Editace index.html souboru a zdrojových adres souborů
Projdeme si zdrojový kód HTML banneru. Pokud byly spolu s bannerem
zaslány externě CSS styly, v hlavičce index.html dokumentu si najdeme řádek
(ctrl+f a vyhledat „link rel“, nebo „stylesheet“:
<link rel="stylesheet" href="css/style.css" type="text/css"> a všímáme si
hlavně atributu href=””, ve kterém je obsažena cesta k externím css stylům.
V rámci Ad Serveru je nutné, aby byly všechny odkazy v html banneru
buď externí, (tzn. Na serveru třetí strany) nebo když už jsou zaslány spolu s
bannerem, tak zadané bez podsložek.
Příklad:
<link rel="stylesheet" href="css/style.css" type="text/css">
upravíme na:
<link rel="stylesheet" href="style.css" type="text/css">
To znamená, umažeme podsložku css/
Podobně pokračujeme i u zdrojových souborů obrázků, nebo javascriptů. U
obrázků si všímáme tagu <img src=““> kdy provedem stejnou úpravu jako v
předešlém příkladu:
<img src=“img/bg.png“>
upravíme na:
<img src=“bg.png“>
A takto postupujeme u všech obrázů.
Page 4 - naposledy upravil(a) Zdeněk Vojkůvka - 2016/08/23 11:22
AdServer v2 - Nasazení HTML5 banneru do iBB Ad Server
3.
Vložíme js kód, který zabezpečí předávání REDIRECTU. (V případě, že
je HTML 5 banner připraven podle našich specifikací, měl by být tento
kód již v těle html banneru vložen.)
Je nutné jej vložit mezi značky <script type=text/javascript> </script>, do
hlavičky dokumentu. Pokud tagy nejsou vytvořeny, vytvoříme je. Kód, který
vkládáme:
function getQueryParam(paramName) {
var qs=location.search;
qs=qs.substr(qs.indexOf("?")+1);
allParams=qs.split("&");
for (var i=0;i<allParams.length;i++) {
keyVal=allParams[i].split("=");
if (keyVal[0]==paramName){
return unescape(keyVal[1]);
}
}
return null;
Page 5 - naposledy upravil(a) Zdeněk Vojkůvka - 2016/08/23 11:22
AdServer v2 - Nasazení HTML5 banneru do iBB Ad Server
}
document.addEventListener("DOMContentLoaded", function(event) {
var aredir = document.getElementsByTagName('a');
for ( i=0; i<aredir.length; i++){
aredir[i].href= getQueryParam('redir');
aredir[i].target= getQueryParam('bbtarget');
}
}); Nyní máme banner připravený k vložení do Ad Server systému
Page 6 - naposledy upravil(a) Zdeněk Vojkůvka - 2016/08/23 11:22
AdServer v2 - Nasazení HTML5 banneru do iBB Ad Server
Implementační fáze do iBB Ad Server
1.
Do javascriptové verze banneru vložíme tuto šablonu pro iframe:
document.write ('<iframe src="%%URL%%index.html?redir=%
%__REDIRECT_ENCODED%%&bbtarget=%%__TARGET%%"
width="970" height="310" scrolling="no" style="margin:0px; border:0px"
seamless></iframe>');
Pro parametry width a height upravíme správné rozměry a klikneme na
tlačítko „VLOŽIT“
2. Nyní máme připraveno tělo banneru. Nahrajeme klíčové soubory pro jeho správné zobrazení. Klíčovými soubory se
rozumí soubory s příponou .css, img obrázky, případně js. knihovny.
Page 7 - naposledy upravil(a) Zdeněk Vojkůvka - 2016/08/23 11:22
AdServer v2 - Nasazení HTML5 banneru do iBB Ad Server
Otestujeme v reálném náhledu, zdalí se nám vrací banner a vizuálně se shoduje s dodanými podklady. Otestujeme fiddlerem,
zdali se nám vykoná v pořádku REDIRECT.
Page 8 - naposledy upravil(a) Zdeněk Vojkůvka - 2016/08/23 11:22