Vkládání reklamy napřímo (ne přes `<iframe>`)

Reklama neumístěná v iframu má mnohem víc možností, ale zároveň představuje pro naši stránku mnohem větší hrozbu. Proto vyžaduje důslednější otestování, při němž klademe zvláštní důraz na prevenci kolizí.

Změny od roku 2019

Kvůli přechodu z iBillboardu na SAS jsou některé kroky v tomto návodu od jara 2019 jiné. Pokud máte kreativu připravenou podle staršího návodu, potřebujete vědět, že:

Nasazovací kód už není JavaScript napsaný v [číslo]/bbkod.txt, ale HTML kód napsaný v kreativa/[název].html.
Místo konstanty %%__REDIRECT%% se nově používá %%PRECLICKURL%%.
Místo konstanty %%URL%% se nově používá %%BASEURL%%/%%ADVID%%/%%X_SUBDIR%%/ (všechny tři takhle za sebou, včetně koncového lomítka!).

Nekolizní technické postupy

Naše protikolizní požadavky:

V dodaném HTML kódu nesmí být <head>, <title>, <!doctype> a podobné věci (jde nám jen o kus kódu vkládaný do našeho HTML kódu, není to samostatná HTML stránka).
Styly nesmí počítat s žádným konkrétním CSS resetem.
Skripty nesmí počítat s žádným JS frameworkem (na iDNESu nepoužíváme žádný).
Nic nesmí být přilinkováno napevno z protokolu HTTP. Pokud potřebujete načítat věci z jiných domén, používejte buď napevno HTTPS, nebo relativní bezprotokolové adresy (//example.com místo http://example.com).
Všechny třídy a všechna ídéčka používaná v generovaném HTML musí být nazvané unikátně podle kampaně.

Selektory v CSS nesmí zaměřovat elementy obecně, bez zacílení na specifické ídéčko nebo třídu.

* { box-sizing: border-box }
ul, ol { color: pink }

#banner-bezmase-parky * { box-sizing: border-box }
#banner-bezmase-parky ul, #banner-bezmase-parky ol { color: pink }

Dynamicky načítané webfonty, animace přes @keyframes (a případné další věci s globální působností) musí být též nazvané unikátně podle kampaně.
Skripty nesmí pracovat s cookies ani s localStorage. Smí mít nanejvýš jednu položku v sessionStorage.
Skripty nesmí přepisovat globální události onscroll, onload apod., ani události navěšené na document, na <body> a na <html>.

Skripty smí vytvářet nanejvýš jednu globální proměnnou. V takové proměnné může být cokoliv (klidně objekt/struktura obsahující funkce apod.), ale musí být jen jedna. Její název musí být opět unikátní a odvozený od názvu kampaně.

var banner = document.getElementById("banner-bezmase-parky");
function rozbalit() {
  rozbaleno = true;
  banner.className = "rozbaleny";
}
function zabalit() {
  rozbaleno = false;
  banner.className = "";
}

var BannerBezmaseParky = {};
BannerBezmaseParky.banner = document.getElementById("banner-bezmase-parky");
BannerBezmaseParky.rozbalit = function() {
  this.rozbaleno = true;
  this.banner.className = "rozbaleny";
};
BannerBezmaseParky.zabalit = function() {
  this.rozbaleno = false;
  this.banner.className = "";
};

Nekolizní vzhled

U banneru by mělo být na první pohled zřejmé, kde končí reklama a začíná náš obsah. Pokud to zřejmé není, prokliknutelná oblast reklamy smí být jen v místě, kde je jisté, že jde o reklamu. Průsvitné části nesmí být proklikávací.

Součásti banneru nesmí vypadat jako běžné části naší stránky.

Způsob vkládání banneru

Hlavní kostru na rozdíl od běžného HTML banneru netvoří index.html, ale HTML kód vkládaný napřímo do naší stránky.

Relativní cesty k externím souborům musí být v tomto HTML kódu uzpůsobené tak, aby začínaly sekvencí %%BASEURL%%/%%ADVID%%/%%X_SUBDIR%%/. Náš reklamní systém sám nahrazuje tuto sekvenci konstant za absolutní adresu složky, v níž jsou uložené soubory náležící ke kreativě. Podobně pak také místo cílové adresy prokliku je nutné použít %%PRECLICKURL%%. (Kompletní seznam strojově nahrazovaných řetězců najdete na webu SASu.)

<a href="http://www.konev.cz">
  <img src="zalevani.jpg">
</a>

<a href="%%PRECLICKURL%%">
  <img src="%%BASEURL%%/%%ADVID%%/%%X_SUBDIR%%/zalevani.jpg">
</a>

(Finální skutečná adresa obrázku bude cosi jako https://content.aimatch.com/mafra/1234/neco-konev/zalevani.jpg.)

Testování a ladění kreativy

Začátkem dubna 2016 jsme pro vás přichystali ke stažení makety stránek, které do sebe AJAXem načítají reklamní kódy z podadresářů a provádějí s nimi podobné úkony, jako provádí náš reklamní systém, takže věrně simulují nasazení banneru u nás.

Vyjma prohlížečů vycházejících z Webkitu (třeba Chrome) fungují tyto makety i na pseudoprotokolu file:///. Pokud je chcete spouštět v Chromu, musíte si je rozběhnout přes HTTP protokol (třeba přes lokální webserver, nebo nahrát je do nějakého pracovního adresáře na živém webu).

U maket v podadresáři kreativa vyrobíte soubor pojmenovaný podle označení reklamy (třeba branding.html, nebo halfpagead.html) a do něj umístíte svůj nasazovací HTML kód. Do tohoto podadresáře dále přidáte všechny soubory (typicky obrázky), které reklama načítá, při čemž v HTML kódu uvedete cesty s %%BASEURL%%/%%ADVID%%/%%X_SUBDIR%%/. Jakmile budete mít hotovo, obsah podadresáře (nikoliv celý podadresář) zazipujete a pošlete nám…

branding.zip         <zazipovaný soubor>
  /kreativa          <složka>
    /obrazek.jpg     <obrázek>
    /branding.html   <HTML soubor>

branding.zip         <zazipovaný soubor>
  /obrazek.jpg       <obrázek>
  /branding.html     <HTML soubor>

Doplňky k brandingu

Pokud vaše kreativa potřebuje doplnit standardní branding, kód poběží v pozici nazvané branding a základní část branding.html bude tvořit volání naší funkce Ads.Branding, která se stará o nastavení pozadí a o optimální zachycení prokliku. Toto volání vám můžeme dodat během schvalování, nebo si ho můžete s trochou přemýšlení vyrobit sami. Příklad:

<script>
  Ads.Branding({
    "link": "%%PRECLICKURL%%",
    "main": "%%BASEURL%%/%%ADVID%%/%%X_SUBDIR%%/zahlavi.jpg",
    "body": "%%BASEURL%%/%%ADVID%%/%%X_SUBDIR%%/opakovany.jpg",
    "body-color": "#ABCDEF",
    "double-board": true,
    "fixni-body": false,
    "fixni-main": true
  });
</script>

Parametry ve volání odpovídají možnostem, které u nás brandingy mají, některé jsou nepovinné. Efekt volání funkce Ads.Branding s různými parametry si můžete bezpečně vyzkoušet v naší maketě, nebo v libovolné stránce linkující <script src="//1gr.cz/js/uni/uni.js"></script>.

Prvky reklamy, kterými branding překryjete, by měly mít nastavenu CSS vlastnost pointer-events: none, aby klik v jejich prostoru byl zachycený naší brandingovou funkcí.

Vkládání reklamy napřímo (ne přes <iframe>)