Sticky skyscraper
Formát sticky skyscaper je desktopová reklamní plocha formátu 300 × 600 px, která je umístěna nejčastěji napravo od hlavní části webu a při scrollování se pohybuje společně s oknem prohlížeče, takže je stále viditelná. Implementovat sticky skyscraper dává smysl v případě, že prostor, který je k dispozici pro svislý posun reklamy, má výšku alespoň 1 500 px. Typicky se jedná o články standardní délky, dlouhý či nekonečný výpis souvisejích článků, fotogalerie a podobně.
Optimální řešení, jak dosáhnout výše popsaného chování skyscraperu, závisí na konkrétním webu. Každý provozovatel si proto musí tuto funkcionalitu implementovat na míru svým stránkám, tedy připravit si vlastní CSS, případně JS, které zajistí fixní pozicování vzhledem k oknu prohlížeče v požadovaném rozsahu. Níže uvedený návod poskytuje pouze základní myšlenku, jak zprovoznit opakované volání pozice.
Základní popis funkcionality
Pokud je na stránce ve svislém směru dostatek místa pro umístění více než jedné reklamní plochy formátu sticky skyscraper (tedy alespoň 3 000 px), je zapotřebí tento prostor (o výšce v v pixelech) rozdělit na n pod sebou umístěných částí (pro každou reklamní zónu jedna) tak, aby každá z částí měla výšku alespoň 1 500 px a aby platilo, že n = floor(v / 1 500).
Například na stránce, která pro sticky skyscraper poskytuje ve svislém směru prostor o výšce v = 8 300 px, se tento prostor rozdělí na n = 5 částí, z nich každá bude mít výšku 1 660 px.
Požadavek na reklamu do plochy, ke které uživatel ještě nedoscrolloval, je třeba odeslat až tehdy, kdy se zmíněná reklamní plocha dostane 100 px nebo méně pod dolní okraj okna.
Opakovaný výdej stejné zóny do více pozic
Odesílání požadavků na výdej jednotlivých sticky skyscraperů se provádí opakovaným voláním funkce getAds(), jejímiž parametry budou při každém volání stejné zoneId, ale jiné ID elementu, do kterého se má reklama vykreslit. Základní princip volání výdeje při prostoru o výšce 3 000 px využitém pro dvě reklamní plochy může vypadat například takto:
var adOffset = getElementById('ssp-zone-12345-1').offsetHeight;
sssp.getAds({
"zoneId": 12345,
"id": "ssp-zone-12345-1",
"width": 300,
"height": 600
});
if(window.scrollY > 1500 - adOffset) {
sssp.getAds( {
"zoneId": 12345,
"id": "ssp-zone-12345-2",
"width": 300,
"height": 600
});
};
Tato ukázka předpokládá dva prázdné elementy (obvykle typu div), do kterých se má reklama vykreslit, označené kotvami ssp-zone-12345-1 a ssp-zone-12345-2 a umístěné v pravé části webu – každý uvnitř elementu o výšce 1 500 px, které budou v tomto případě dva po sebou. Nepočítá ale s žádným prvkem nad prostorem pro scrolování (např. menu, jiná reklamní plocha nebo boxy, které se zde na řadě webů vyskytují).