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#branding, 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ň existuje element označený id „#ssp-branding-xxxx“, kde xxxx je číselný identifikátor zóny (zoneId), a třídou „.adFull“, 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);
	}
});