Vkladání tlapiček k reklamním pozicim

Reklama od Seznamu musí být viditelně označena, aby nesplývala s obsahem stránky, na které je umístěna. U reklam vydávaných v iframu zajišťuje označení reklamní systém, který do pravého dolního rohu vkládá šedý poloprůhledný čtverec velikosti 15 × 15 px s bílým otiskem psí tlapky otočeným podle DSP, ze kterého byla konkrétní reklama vydána. Označení zároveň funguje jako odkaz na stránku s informacemi o reklamě v souladu s DSA.

V případě, že je reklama webu předávána jako data v JSONu a vykreslována anebo stylována na straně partnera, je její označení povinností partnera. Ten buď v bezprostřední blízkosti reklamní plochy umístí slovní označení „Reklama“, nebo s využitím funkcí popsaných níže vykreslí a pomocí vlastního CSS napozicuje do pravého dolního rohu reklamní plochy tlapku označující Seznam reklamu. Použití SSP funkce zajistí, že rotace tlapky bude odpovídat vydanému DSP.

Použije-li partner textové označení „Reklama“, obalí je elementem <a></a>. Jako atribut href tohoto elementu použije URL, která je hodnotu položky adInfoUrl z objektu příslušné reklamy z XHR odezvy reklamního systému. Odkazovaná stránka obsahuje informace o vydané reklamě v souladu s DSA. V případě, že partner zvolí označení reklamy tlapkou generovanou pomocí SSP funkce, odkaz nepřidává, protože je již součástí vygenerovaného kódu.

window.sssp.getPawHTML(ad)

Metoda vrací HTML element obsahující obrázek tlapky obalený odkazem na stránku s informacemi o vydané reklamě v souladu s DSA. Služba musí sama implementovat mouseover chování ("rozbalení" ikony při najetí myši). V případě, kdy reklama z SSP serveru bude obsahovat DSP typ jiný než SKLIK | ADVERT | OGAR | ONEGAR | APPNEXUS | PUBMATIC metoda vrátí null.

Parameter	Význam
ad	reklama z SSP serveru

Příklad použití

JavaScript soubor

// reklama z SSP serveru
sssp.getAds({
  zoneId: 123456,
  id: 'elm-123456',
  callback: (ad) => {
    // ...
    // kód nevyužívající "sssp.writeAd" metodu
    // ...
    // HTML element tlapičky
    const pawHTML = sssp.getPawHTML(ad);
    // ...
  },
});

window.sssp.appendPawToElement(ad, element)

Vytváří HTML element tlapičky a následně ho vkládá do zvoleného HTML elementu. V případě DSP typu jiného než SKLIK | ADVERT | OGAR | ONEGAR | APPNEXUS | PUBMATIC a/nebo nevalidního HTML elementu se konání metody zastaví.

Parameter	Význam
ad	reklama z SSP serveru
element	HTML element, kam je potřeba vložit tlapičku

Příklad použití

HTML soubor

<!--HTML element, kam by měla být vložena tlapička-->
<div id="element"></div>

JavaScript soubor

// HTML element, kam vložíme tlapičku
const element = document.querySelector('element');

// reklama z SSP serveru
sssp.getAds({
  zoneId: 123456,
  id: 'elm-123456',
  callback: (ad) => {
    // ...
    // kód nevyužívající "sssp.writeAd" metodu
    // ...
    // vkladání tlapičky do HTML elementu
    sssp.appendPawToElement(ad, element);
    // ...
  },
});

window.sssp.appendCoopIconToElement(params, element)

Vytváří HTML element ikonky Komerční spolupráce a následně ho vkládá do zvoleného HTML elementu. V případě nevalidního HTML elementu se konání metody zastaví.

Parameter	Význam
params	Parametry info stránky
element	HTML element, kam je potřeba vložit ikonku

Příklad použití

Zdrojové HTML může vypadat následovně:

<!--HTML element, kam by měla být vložena ikonka-->
<div id="element"></div>

<script>
  // HTML element, kam vložíme ikonku
  const element = document.querySelector('element');

  sssp.appendCoopIconToElement({paid: 'Seznam.cz', behalf: 'Seznam.cz'}, element);
</script>

Parametry konfiguračního objektu params funkce appendCoopIconToElement:

parameter	typ	popis
paid	string	kdo za spolupráci platí
behalf	string	zadavatel spolupráce
align	'left' nebo 'right'	Zarovnání ikonky (vlevo, vpravo)
disableAnimation	boolean	vypnout animaci při nájezdu kurzorem

Všechny parametry jsou nepovinné. Pokud je nezadáte paid nebo behalf, zobrazí se informace o tom, že plátce/inzerent je v ověřovacím procesu.

Formát URL

Funkce vytvoří podle zadaných parametrů adresu URL a nastaví odkaz na ikonce. Pokud z nějakých důvodů chcete vytvořit odkaz po svém je potřeba vytvořit JSON v následujícím formátu:

{
    "a": [
      {
        "p": "Plátce",
        "b": "Zadavatel",
        "r": [2]
      }
    ]
}

Z vytvořeného řetězce obsahující data ve formátu JSON vytvoříte URL například následujícím způsobem:

function stringToBase64url(str: string) {
  const bytes = new TextEncoder().encode(str);
  const binString = Array.from(bytes, (byte) => String.fromCodePoint(byte)).join('');
  return btoa(binString).replace(/\+/g, '-').replace(/\//g, '_');
}

const url = `https://ssp.seznam.cz/cooperation-info#${stringToBase64url(urlHash).replace(/=/g, '')}`

Využití enkodéru je potřeba pro správné uložení Unicode znaků.