Branding
Branding je nový typ reklamy, který je umístěn „za obsahovou částí webové stránky“ a pokrývá veškerý volný prostor okna prohlížeče – viz https://www.technickaspecifikace.cz/cz/211/branding-sklik/.
Branding se standardně vydává do zóny pro leaderboard (musí být z naší strany povolen na web/zónu), pokud je aktuální šířka okna větší nebo rovna 1 366 px.
Implementace brandingu v iframu
Branding se standardně vydává v iframu do zóny pro leaderboard (musí být ze strany Seznam Partner povolen na web/zónu), odkud ho výdejový JavaScript přesune do elementu <div id="branding"></div>, který je ve stránce vytvořen, pokud je aktuální šířka okna větší nebo rovna 1 366 px. V takovém případě se do proměnné adZone zapíše objekt s parametry pro branding, jinak objekt s parametry pro leaderboard.
<div id="ssp-zone-1234"></div> <!-- element pro leaderboard -->
<script src="https://ssp.seznam.cz/static/js/ssp.js"></script>
<script>
if (window.innerWidth >= 1366) {
document.body.insertAdjacentHTML('afterbegin', '<div id="ssp-zone-1234-branding"></div>'); // vytvoří element pro branding za <body>
var adZone = {
zoneId: 1234, // číselné ID zóny
width: 2000, // maximální šířka požadované reklamy
id: "ssp-zone-1234", // id elementu pro leaderboard
elements: [
{id: "ssp-zone-1234", width: 970}, // stačí uvést šířku
{id: "ssp-zone-1234-branding", width: 2000, height: 1400} // je nutné uvést šířku i výšku
]
};
} else {
var adZone = {
zoneId: 1234,
width: 970,
height: 210,
id: "ssp-zone-1234"
}
};
sssp.getAds(adZone); // požadavek na výdej reklamy (objekt adZone lze použít i v rámci multirequestu)
</script>Zároveň je potřeba doplnit CSS, které zajistí správné umístění brandingu na stránce dle www.technickaspecifikace.cz/cz/211/branding-sklik/:
/* styl definující umístění elementu určeného pro vykreslení brandingu k hornímu okraji okna prohlížeče a vodorovně uprostřed okna prohlížeče */
#ssp-zone-1234-branding {
position: fixed;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
}
/* definice vlastností třídy adFull, která se elementu s brandingem přiřadí v okamžiku, kdy je do něj úspěšně vykreslena reklama; určuje šířku (2000 px) a výšku (1400 px) elementu s brandingem */
#ssp-zone-1234-branding.adFull {
width: 2000px;
height: 1400px;
}
/* příklad definice odsazení těla stránky (předpokládáme umístění v elementu div#page) o 226 px od horního okraje po vykreslení brandingu */
#ssp-zone-1234-branding.adFull ~ #page {
position: relative;
top: 226px;
}Implementace brandingu z JSONu
Požadavek na výdej brandingu ve formátu JSON odesíláme stejně jako u ostatních rozměrů bannerů, avšak jen v případě, pokud má okno prohlížeče šířku alespoň 1 366 px:
<div id="ssp-zone-1234"></div> <!-- element pro leaderboard -->
<div id="ssp-zone-1234-branding"></div> <!-- element pro branding -->
<script src="https://ssp.seznam.cz/static/js/ssp.js"></script>
<script>
sssp.getAds({
zoneId: 1234, // číselné ID zóny
width: 2000, // maximální šířka požadované reklamy
height: 1400, // maximální výška požadované reklamy
callback: function(ads) {
// JS pro zpracování dat, vykreslení reklamy
// a zobrazení měřicích pixelů
}
})
</script>kde ssp-zone-1234 je id elementu na stránce, do kterého se vykresluje leaderboard, a ssp-branding-1234 je id elementu na stránce, do kterého se vykresluje branding. Pokud se v rozhraní pro zónu 1234 povolí formáty 2 000 × 1 400 px a 970 × 210 px, do aukce budou vstupovat oba dva. Callbacková funkce musí umět jednotlivé formáty v odpovědi nejen rozlišit a vykreslit do správných elementů (je třeba dodržet umístění brandingu a rozměry stránky dle technické specifikace www.technickaspecifikace.cz/cz/211/branding-sklik/), ale také provést měření zobrazení (viz Implementace). Při výše uvedeném zápisu (záměrně chybí parametr id) je nezbytné samostatně volat URL pro měření visibilní imprese uvedenou v poli ads.tracking.visible – viz Callback funkce.
