1. září 2012
Responsivní reklama v OpenX - technické řešení
Jak jsem v předchozím článku o responsivní reklamě zmínil, další část se bude zabývat konkrétním technickým řešením. V tomto článku konkrétně řešení pro OpenX, které používám.
Responsivní reklama pro OpenX
Správce reklamních ploch v OpenX umožňuje generovat zobrazovací kód na 3 varianty. Javascript Tag, iFrame Tag a Local Mode Tag. Použitelná je právě a pouze první varianta. iFrame nelze použít mimo jiné i kvůli upraveným pravidlům Adsense, které nepovolují zobrazovat reklamu v iframech. Local mód vkládá reklamu na základě PHP, což je řešení které neumí rozpoznat rozlišení obrazovky.
Analýza zobrazovacího kódu OpenX
Javascriptem vygenerovaný kód vypadá takto
<script type='text/javascript'><!--//<![CDATA[
document.MAX_ct0 ='INSERT_CLICKURL_HERE';
var m3_u = (location.protocol=='https:'?'https://ad.iluze.com/www/delivery/ajs.php':'http://ad.iluze.com/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=20");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if ((typeof(document.MAX_ct0) != 'undefined') && (document.MAX_ct0.substring(0,4) == 'http')) {
document.write ("&ct0=" + escape(document.MAX_ct0));
}
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://ad.iluze.com/www/delivery/ck.php?n=aa241909&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://ad.iluze.com/www/delivery/avw.php?zoneid=20&cb=INSERT_RANDOM_NUMBER_HERE&n=aa241909&ct0=INSERT_CLICKURL_HERE' border='0' alt='' /></a></noscript>
Část kódu "http://ad.iluze.com" odkazuje na můj reklamní server, u vás bude jinak. Podstatné z hlediska určení reklamní plochy je zoneid a v části noscript je to pak parametr n, tyto parametry mají v každém kódu jiné hodnoty. Na ty se ty při úpravách budeme muset zaměřit.
Detekce rozlišení v hlavičce stránek
Pro detekci aktuálního rozlišení prohlížeče a nastavení parametrů použivám mezi tagy <head></head> v html následující kód.
<script type="text/javascript">
var screenwidth;
var TopReklamaZoneID;
var SideReklamaZoneID;
var Side2ReklamaZoneID;
/* ZoneID
760x100 = 111
468x60 = 138
320x50 = 139
160x600 = 110
empty = 140
250x250 = 125
*/
screenwidth = document.documentElement.clientWidth;
if (screenwidth < 480) {
TopReklamaZoneID = 139;
SideReklamaZoneID = 140;
Side2ReklamaZoneID = 140;
} else if ((screenwidth > 479) && (screenwidth < 768) ) {
TopReklamaZoneID = 138;
SideReklamaZoneID = 140;
Side2ReklamaZoneID = 140;
} else if ((screenwidth > 767) && (screenwidth < 959) ) {
TopReklamaZoneID = 111;
SideReklamaZoneID = 110;
Side2ReklamaZoneID = 140;
} else {
TopReklamaZoneID = 111;
SideReklamaZoneID = 125;
Side2ReklamaZoneID = 125;
}
</script>
Krátké vysvětlení, na stránkách nh6.cz používám 3 různé velikosti top banneru podle šířky rozlišení: 760x100, 468x60, 320x50. Pro postranní banner mám dvě reklamní pozice, kde zobrazují buď dvakrát 250x250, nebo jednou 160x600 a druhá pozice je prázdná, nebo postraní panel není vidět a obě pozice jsou prázné. Zeleně je v komentáři napsáno které zoneID odpovídá které reklamní ploše a potom pouze pomocí document.documentElement.clientWidth detekuji rozlišení a podle výsledku nastavím hodnoty pro konkrétní zóny.
Úprava javascript části OpenX kódu
V javascriptové části OpenX kód pak nastavím vhodnou proměnou místo původní napevno zadané hodnoty, tedy například místo
použiji
podobně pak pro další dvě plochy v postranním panelu
Tím mám zajištěno, že načítám odpovídající reklamní rozměr a zpracovává se část kódu pro javascript.
Co s noscript částí
V části s javascriptem není problém změnit hodnotu zoneid s pevně daného čísla na proměnou. Ale co s kódem mezi <noscript>? Tam se při vytváření stránky podsunout hodnota nedá a šla by až zpětně po načtení stránky. Zde stačí drobná úvaha, noscript se používá v případě že dané zařízení neumí javascript, nebo ho má zakázáno použít. V tu chvíli nebude fungovat ani detekce rozlišení pomocí javascriptu, ani AJAX, který je taky javascriptový. V principu tedy nemá moc smysl se touto částí zabývat, ale je dobré dát sem kód s nejmenší reklamní plochou pro daný web, případně "empty" plochu, tedy takovou co nemá přiřazenou žádnou kampaň a banner k zobrazení.
V mém případě je to tedy uděláno tak, že dolní část <noscript> má natvrdo vložené kódu 320x50 pro horní banner a empty pro pro postranní pozice.
Tím mám OpenX ve webu nastavený a můžete si vyzkoušet jak to při načtení v různých velikostech prohlížeče funguje.
