Příklady implementace reklamy

1. Singlerequest – použití pro začátečníky

U singlerequestu voláte metodu getAds() pro každou reklamní zónu samostatně.

Tento způsob výdeje je nejjednodušší, ale doporučujeme místo něj používat multirequest (viz dále), protože poskytuje více funkcí SSP serveru. Použití singlerequestu pro každou zónu na stránce zvlášť také zpomaluje načítání reklamy.

<div id="ssp-zone-12345"></div>

<script>
	sssp.getAds([
		{
			"zoneId": 12345,
			"id": "ssp-zone-12345",
			"width": 300,
			"height": 250
		}
	]);
</script>

Technickou dokumentaci k singlerequestu naleznete na stránce https://ssp.seznam.cz/static/doc/#pouziti-pro-zacatecniky-singlerequest.

2. Multirequest

Multirequest umožňuje výdejovému skriptu SSP obsloužit všechny reklamní pozice na stránce najednou odesláním jediného požadavku na SSP server.

Všechny objekty popisující reklamní zóny je třeba nadefinovat v jednom poli a metodu getAds() zavolat pouze jednou. Volání musí být provedeno až poté, co se na stránce nacházejí všechny HTML elementy, do kterých se má reklama vykreslit.

Tento přístup značně snižuje pravděpodobnost zobrazení stejných reklam na jedné stránce.

<div id="ssp-zone-12345"></div> // SMR 300×250 px
<div id="ssp-zone-67890"></div> // wallpaper 480×300 px

<script>
	sssp.getAds([
		{
			"zoneId": 12345,
			"id": "ssp-zone-12345",
			"width": 300,
			"height": 250
		},
		{
			"zoneId": 67890,
			"id": "ssp-zone-67890",
			"width": 480,
			"height": 300
		}
	]);
</script>

Technickou dokumentaci k multirequestu naleznete na stránce https://ssp.seznam.cz/static/doc/#multirequest-pouziti.

3. Zjednodušené volání reklamy metodou getAdsByTags()

Metoda getAdsByTags() umožňuje výdejovému skriptu SSP obsloužit všechny reklamní pozice na stránce najednou odesláním jediného požadavku na SSP server. Na rozdíl od multirequestu nejsou údaje o jednotlivých zónách parametrem funkce zajišťující odeslání požadavku, ale pro každou zónu zvlášť tvoří součást jejího reklamního kódu – elementu, kam se bude reklama vkládat.

<div id="ssp-zone-12345" data-szn-ssp-ad='{"zoneId": 12345, "id": "ssp-zone-12345", "width": 970, "height": 310}' ></div>
...
<div id="ssp-zone-67890" data-szn-ssp-ad='{"zoneId": 67890, "id": "ssp-zone-67890", "width": 300, "height": 250}' ></div>

<script>
sssp.getAdsByTags();
</script>

Volání metody getAdsByTags() musí být provedeno až poté, co se na stránce nacházejí všechny HTML elementy, do kterých se má reklama vykreslit. V každém takovém elementu je třeba doplnit atribut data-szn-ssp-ad a nastavit jeho hodnotu na objekt s údaji o odpovídající zóně. Ty jsou totožné jako při použití metody getAds() pro jednu pozici (singlerequest). Takto lze nadefinovat všechny pozice ve stránce a následně na konci stránky zavolat metodu getAdsByTags(), která nalezne všechny elementy s atributem data-szn-ssp-ad a odešle hromadný požadavek na SSP server.

Na tuto vlastnost je třeba myslet tehdy, když je potřeba vykreslit pouze část zón (například jiné zóny pro desktopovou a jiné pro mobilní verzi webu). Metoda getAdsByTags() zavolá reklamu vždy pro všechny elementy s atributem data-szn-ssp-ad, které se na stránce nacházejí. Je tedy nutné buď zajistit vkládání reklamních kódů na stránku odděleně pro jednotlivé varianty, nebo použít místo metody getAdsByTags() multirequest, tedy opakované volání metody getAds() pro jednotlivé varianty, které je popsané v dalším bodě.

4. Opakované volání metody getAds()

Tento postup použijete v případě, že chcete reklamu vykreslit jen do vybraných zón za přítomnosti určitých podmínek (např. jiné zóny zobrazujete na desktopovém a jiné na mobilním zařízení). Metodu getAds() můžete volat několikrát a pokaždé v ní mít definovaný pouze výběr zón, které v dané situaci chcete vykreslit.

Platí také, že ve stránce můžete mít umístěny HTML elementy všech zón, ale reklamu metodou getAds() volat jen do některých (tzn. HTML element
může zůstat prázdný).

Opět platí, že volání metody getAds() musí být provedeno až poté, co se na stránce fyzicky nacházejí všechny HTML elementy daných zón.

<div id="ssp-zone-11111"></div> // text 300×250 px mobil
<div id="ssp-zone-22222"></div> // text 480×300 px desktop
<div id="ssp-zone-33333"></div> // skyscraper 300×600 px desktop

<script>
	// podmínka detekující např. šířku zařízení
	if (window.innerWidth <= 767)  {
		// zóny pro mobil
		sssp.getAds([
			{
				"zoneId": 11111,
				"id": "ssp-zone-11111",
				"width": 300,
				"height": 250
			}
		]);
	} else {
		// zóny pro desktop
		sssp.getAds([
			{
				"zoneId": 22222,
				"id": "ssp-zone-22222",
				"width": 480,
				"height": 300
			},
			{
				"zoneId": 33333,
				"id": "ssp-zone-33333",
				"width": 300,
				"height": 600
			}
		]);
	}
</script>

5. SPA vs. MPA

Jsou vaše webové stránky psány jako Single Page Aplication (SPA) a potřebujete načítat Seznam reklamu opakovaně bez obnovení stránky? Jednoduše volejte metodu getAds() opakovaně. Tím získáte nové reklamy pro nové pozice ve stránce. Doporučujeme volat opakovaně metodu getAds() jen v případě, že změna stránky bez obnovení odpovídá načtení nové stránky běžné webové aplikace (MPU) – např. kliknutím na odkaz, odesláním formuláře a podobně.