Branding
Branding se standardně vydává v iframu do zóny pro leaderboard (musí být z naší strany povolen na web/zónu), odkud ho výdejový JS 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 www.technickaspecifikace.cz/cz/181/branding-rtb/novinky/:
/* 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-branding-1234 {
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-branding-1234.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-branding-1234.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);
}
});
