Vložení reklamního kódu na web

Vložením reklamního kódu do zdrojového kódu vaší stránky zajistíte zobrazení reklamy na webu.

V záložce Moje kódy najdete přehled všech vámi vygenerovaných reklamních kódů.

Příklady implementace reklamy od Seznam.cz

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ášť zpomalí 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.imedia.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.imedia.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ě.

Technickou dokumentaci k singlerequestu naleznete na stránce https://ssp.imedia.cz/static/doc/#getByTags.

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 <div> 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>

Není dovoleno volat najednou všechny zóny a regulovat jejich zobrazení pouze pomocí CSS (display: none;) – takový přístup by způsobil, že by se zobrazení reklamy započítalo i tehdy, když by reálně nebyla vidět a uživatel webu by na ni tedy nemohl kliknout.

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 metodu getAds() opakovaně 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ě.

Stylování reklamy

SSP skript ve stránce vykreslí několik HTML elementů obalujících reklamu – jedná se o elementy <div> s třídami adFull, sssp-posCont a sssp-resizeCont.

CSS styly pro pozicování aplikujte výhradně jen na vnější obalující element <div>, který po vykreslení reklamy dostane atribut class="adFull". Vnitřní elementy nestylujte!

Příklad HTML kódu vykreslené reklamy SMR 300 × 250 px:

<div id="ssp-zone-123456" style="height: 250px; width: 300px; max-width: 100%;" class="adFull">
     <div class="sssp-posCont" style="width: 100%; height: 100%; position: relative;">
          <div class="sssp-resizeCont" style="width: 300px; height: 250px; position: absolute;">
               <iframe scrolling="no" id="sf1" src="//c-ko.imedia.cz/imp?k=9416459e-b71e-414c-867a-47ac9ed382b5" width="300" height="250" frameborder="0">
               </iframe>
          </div>
     </div>
</div>

Nikdy nepřebíjejte vygenerované inline CSS styly obalujících HTML elementů .adFull, .sssp-posCont a .sssp-resizeCont a atributy nastavující velikost iframe reklamy vlastním CSS.