Branding
Branding je typ reklamy, který je umístěn na pozadí webové stránky za její obsahovou částí a pokrývá veškerý zbývající volný prostor okna prohlížeče – viz ukázka na https://seznam.prehledreklam.cz/cs/sklik/produkt/branding/105/124/.
Branding se vydává do zóny pro leaderboard (branding 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, 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>
if (window.innerWidth >= 1366) {
document.body.insertAdjacentHTML('afterbegin', '<div id="ssp-branding-1234"></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-branding-1234", // id elementu pro leaderboard
elements: [
{id: "ssp-zone-1234", width: 970}, // stačí uvést šířku
{id: "ssp-branding-1234", 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 https://seznam.prehledreklam.cz/cs/sklik/produkt/branding/105/124/:
/* 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;
}Pokud je potřeba změnit layout stránky při výdeji brandingu (například když je stránka příliš široká a zakrývala by branding), je možné tuto úpravu provést pomocí callbacku, právě když se vydá branding.
<div id="ssp-zone-1234"></div> <!--element pro leaderboard-->
<script>
// Funkce, která připraví stránku na branding
function setBranding(advert, data) {
// Pokud přišel branding bude šířka reklamy 2000
if (advert.width === 2000) {
// ...
var problematicElement = document.getElementById('article-container');
problematicElement.style.width = '1060px';
// ...
}
// Když jsou úpravy hotové, řekneme SSSP aby vydalo reklamu
return sssp.writeAd(advert, data);
}
if (window.innerWidth >= 1366) {
document.body.insertAdjacentHTML('afterbegin', '<div id="ssp-branding-1234"></div>');
var adZone = {
zoneId: 1234,
width: 2000,
// Nastavíme callback který se má zavolat
callback: setBranding,
id: "ssp-zone-1234",
elements: [
{id: "ssp-zone-1234", width: 970},
{id: "ssp-branding-1234", width: 2000, height: 1400}
]
};
} else {
var adZone = {
zoneId: 1234,
width: 970,
height: 210,
id: "ssp-zone-1234"
}
};
sssp.getAds(adZone);
</script>Alternativní možností je navázání změny layoutu při výdeji brandingu na událost sspadsloaded. Pokud k této události dojde a zároveň v DOM existuje element označený class="adFull" a id="ssp-branding-xxxx", kde xxxx je číselný identifikátor zóny (zoneId), můžeme stránku přizpůsobit brandingu.
window.addEventListener('sspadsloaded', function () {
if (document.querySelector('#ssp-branding-xxxx.adFull')) {
var css = document.createElement('style');
css.type = 'text/css';
var styles = 'body{width 1060px}';
css.appendChild(document.createTextNode(styles));
document.getElementsByTagName('head')[0].appendChild(css);
}
});Implementace brandingu z dat v 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>V uvedeném kódu je ssp-zone-1234 id elementu, do kterého se vykresluje leaderboard, a ssp-branding-1234 je id elementu, 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 https://seznam.prehledreklam.cz/cs/sklik/produkt/branding/105/124/), ale také provést měření zobrazení (viz Postup nasazení reklamy). Při výše uvedeném zápisu (v objektu zóny 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.
Pro případnou úpravu layoutu stránky platí totéž, co je uvedeno u výdeje brandingu do iframu.