Návod na nasadenie remarketingového riešenia
INRES používa tzv. remarketingové tagy na opätovné oslovenie používateľov, ktorí navštívili stránky klienta. Tieto tagy treba nasadiť správnym spôsobom do kódu web stránky klienta.
V prípade dynamického remarketingu je okrem nasadenia týchto kódov potrebné dodať aj export produktov, ktoré sa majú zobrazovať na remarketingových dynamických banneroch.
Tento dokument sa venuje technologickým aspektom nasadenia kódov a tiež exportu produktov.
Remarketingový tag
Ide o krátky Java Script kód, umiestnený na webe zákazníka. Pokiaľ vám nebol doručený e-mailom, je možné ho získať aj priamo v systéme INRES. Po prihlásení pod daným klientom v hornom menu Remarketing > Tagy a produkty:
V prípade, že kód už je v systéme vytvorený, stačí kliknúť na ikonku a otvorí sa okno, z ktorého je možné kód skopírovať.
Pokiaľ zatiaľ nebol kód vytvorený, stačí kliknúť na , zvoliť názov tagu (napríklad podľa názvu klienta alebo webu) a kliknúť na “PRIDAŤ TAG”.
Príklad štandarného tagu pre statický a dynamický remarketing:
<!-- INRES REMARKETING START v2std -->
<script>
if (typeof g_ntscRmkQueue == "undefined") var g_ntscRmkQueue = [];
g_ntscRmkQueue.push({
t: X, /* tag id, do not change */
e: null,/* optional custom event(s), string or array of strings */
p: null /* optional product id(s) for dynamic remarketing, string or array of strings */
});
</script>
<script src="https://inres.uspech.sk/js/rsysc.js" async></script>
<!-- INRES REMARKETING END v2std -->
Pokiaľ váš TAG vyzerá inak (okrem parametra t), alebo neobsahuje všetky parametre, prosíme ho nenasadzovať. Môže ísť o chybu pri kopírovaní z tela e-mailu a podobne.
Remarketingový kód je potrebné umiestniť na koniec stránky pred </body> tag, v plnom znení tak, ako ste ho dostali. Je potrebné dodržať aj nové riadky, vzhľadom na to, že obsahuje komentáre.
V prípade, že používate nejaký TAG manager, je možné ho použiť, INRES tag by však nemal byť vložený v iframe, pretože potrebuje poznať aktuálnu URL. V prípade vloženia do iframe, bude síce INRES tvoriť zoznamy, ale nebude možné korektne vytvárať publiká podľa navštívených URL. V prípade nutnosti použiť iframe môžete túto funkcionalitu čiastočne nahradiť využívaním udalostí (ďalej “eventov”) - podobnosť s eventami pre Google Analytics.
Parametre v INRES tagu:
- t
- obsahuje celé číslo identifikujúce remarketingový TAG
- toto číslo sa nesmie nijako upravovať
- parameter musí byť vždy nastavený
- e
- slúži na klientom definované udalosti
- obsahuje reťazec alebo pole reťazcov, ktoré reprezentujú sledované udalosti (events)
- nastavené udalosti je možné využiť na vytváranie remarketingových zoznamov pre statický remarketing
- celková dĺžka nesmie presiahnuť 255 znakov
- pre stránku bez udalostí možno tento parameter vynechať, nastaviť na prázdny reťazec alebo null (podobne ako v príklade tagu vyššie)
- príklad pre stránku s jednou udalosťou
- príklad pre stránku s viacerými udalosťami
- e: ["event1", "event356"]
- p
- obsahuje navštívené produkty pre dynamický remarketing
- obsahuje reťazec alebo pole reťazcov, ktoré reprezentujú sledované produkty
- jednotlivé reťazce reprezentujú ID produktu zobrazeného na aktuálnej stránke pre účely dynamického remarketingu
- celková dĺžka nesmie presiahnuť 255 znakov
- pre stránku bez produktov možno tento parameter vynechať, nastaviť na prázdny reťazec alebo null (podobne ako v príklade tagu vyššie)
- príklad pre stránku s jedným produktom
- príklad pre stránku s viacerými produktami
V prípade statického remarketingu stačí použiť TAG v pôvodnom znení a nie je potrebné vypĺňať žiadne špeciálne parametre (ak nepotrebujete využívať eventy).
Ak je na stránke naraz viacero eventov alebo viacero produktov, ktoré chcete umiestniť do remarketingových kampaní, je možné to urobiť jedným volaním, príklad:
<!-- INRES REMARKETING START v2std -->
<script>
if (typeof g_ntscRmkQueue == "undefined") var g_ntscRmkQueue = [];
g_ntscRmkQueue.push({
t: X,
e: ["event1", "event2"],
p: ["prod1", "prod2"]
});
</script>
<script src="https://inres.uspech.sk/js/rsysc.js" async></script>
<!-- INRES REMARKETING END v2std -->
Eventy je vhodné využívať najmä v prípadoch, keď udalosť nemá samostatnú URL, napríklad odoslanie objednávky má rovnakú URL ako košík. Zvolený event je potom možné nastaviť na vylúčenie inzercie na tých, ktorí už produkt nakúpili. Event môže byť pomenovaný ľubovoľne a následne využitý pri definovaní publík v rozhraní INRES.
V núdzovom prípade môže byť event využitý ak je INRES tag vložený v iframe a teda nevidí skutočné URL. Vtedy je možné volať event napríklad pri vložení produktu do košíka, alebo pri odoslaní objednávky.
Prosíme, aby ste v INRES tagu nemodifikovali nič okrem parametrov e a p. Iba tak je možné zaručiť správnu funkčnosť zbierania remarketingových zoznamov. Tiež prosíme o umiestňovanie tagu na koniec HTML stránky, pred tag </BODY>. Ak používate viacero INRES tagov na jednej stránke, na ich poradí nezáleží.
Export dát pre dynamický remarketing
V prípade, že je nasadený INRES TAG pre dynamický remarketing (používa sa neprázdny parameter p), bude potrebné pripraviť export produktov.
Podrobnosti o exporte produktov nájdete v Špecifikácii exportu produktov pre dynamický remarketing.
Vlastné dáta pre smart bannery
Ak plánujete zbierať a používať vlastné dáta pre použitie v smart banneroch, je potrebné nasadiť tag so smart dátami. Existujú dve verzie tohoto tagu:
- "Server side" verzia - používa sa vtedy, keď dáta pre smart banner sú známe v čase generovania kódu stránky na serveri a tag aj s vyplnenými dátami možno vložiť priamo do kódu stránky.
- JS verzia - používa sa vtedy, keď dáta pre smart banner sú dostupné až v JS kóde stránky na strane klienta, napríklad ako výsledok nejakej akcie návštevníka stránky
Nasadenie tagu so smart dátami - "Server side" verzia
Kód tagu možno zobraziť aj priamo v INRESe po kliknutí na ikonu v zozname tagov. Otvorí sa okno s kódom tagu.
Potom ešte v tomto okne treba zmeniť typ kódu na "S dátami pre smart banner - server side verzia". Z tohoto okna možno kód tagu jednoducho skopírovať.
Tag vyzerá takto:
<!-- INRES REMARKETING START v2smsrv -->
<script>
if (typeof g_ntscRmkQueue == "undefined") var g_ntscRmkQueue = [];
g_ntscRmkQueue.push({
t: X, /* tag id, do not change */
e: null, /* optional custom event(s), string or array of strings */
p: null, /* optional product id(s) for dynamic remarketing, string or array of strings */
s1: null, /* optional custom data 1 for smart banner */
s2: null, /* optional custom data 2 for smart banner */
s3: null, /* optional custom data 3 for smart banner */
s4: null, /* optional custom data 4 for smart banner */
s5: null, /* optional custom data 5 for smart banner */
s6: null, /* optional custom data 6 for smart banner */
s7: null, /* optional custom data 7 for smart banner */
s8: null, /* optional custom data 8 for smart banner */
s9: null, /* optional custom data 9 for smart banner */
s10: null /* optional custom data 10 for smart banner */
});
/* Smart banner custom data variables may contain only JSON compatible data types:
booleans, strings, numbers and (nested) arrays or objects. */
</script>
<script src="https://inres.uspech.sk/js/rsysc.js" async></script>
<!-- INRES REMARKETING END v2smsrv -->
Pre vyplnenie parametrov t, e a p platia presne tie isté pravidlá, ako pre štandarný tag. Tento tag ale navyše obsahuje 10 nepovinných parametrov s1 až s10,
do ktorých možno uložiť ľubovoľné vlastné dáta. Tieto dáta sa potom sprístupnia smart banneru. Parametre s1 až s10 podporujú nasledujúce typy dát:
- boolean
- číslo
- reťazec
- pole (aj vnorené)
- objekt (aj vnorené)
- celková veľkosť dát (s1 až s10 spolu) nesmie presiahnuť 1024 bajtov
Príklad: Do s1 uložíme číslo 34, do s2 reťazec "Testovací text", do s3 pole a do s4 zložitejší objekt. Tag bude vyzerať takto:
<!-- INRES REMARKETING START v2smsrv -->
<script>
if (typeof g_ntscRmkQueue == "undefined") var g_ntscRmkQueue = [];
g_ntscRmkQueue.push({
t: X, /* tag id, do not change */
s1: 34,
s2: "Testovací text",
s3: [4.2, 8.1, 11.6],
s4: {a: "Ahoj", b: [1, 2, 3, 4], c: { x: 33, y: 21 } }
});
</script>
<script src="https://inres.uspech.sk/js/rsysc.js" async></script>
<!-- INRES REMARKETING END v2smsrv -->
Nasadenie tagu so smart dátami - JS verzia
Kód tagu možno zobraziť aj priamo v INRESe po kliknutí na ikonu v zozname tagov. Otvorí sa okno s kódom tagu.
Potom ešte v tomto okne treba zmeniť typ kódu na "S dátami pre smart banner - JS verzia". Z tohoto okna možno kód tagu jednoducho skopírovať.
Tag vyzerá takto:
<!-- INRES REMARKETING START v2smjs -->
<script>
if (typeof g_ntscRmkQueue == "undefined") var g_ntscRmkQueue = [];
if (typeof g_ntscRmkQueueStore == "undefined") {function g_ntscRmkQueueStore(obj) {if (typeof obj == "object")
{ if (typeof g_ntscAd == "object") g_ntscAd.remarketing2(obj); else g_ntscRmkQueue.push(obj);}}}
</script>
<script src="https://inres.uspech.sk/js/rsysc.js" async></script>
<!-- INRES REMARKETING END v2smjs -->
<!-- After inserting above code somewhere on a page (only once), remarketing data
can be sent to INRES using following JS call:
g_ntscRmkQueueStore({
t: X, /* tag id, do not change */
e: null, /* optional custom event(s), string or array of strings */
p: null, /* optional product id(s) for dynamic remarketing, string or array of strings */
s1: null, /* optional custom data 1 for smart banner */
s2: null, /* optional custom data 2 for smart banner */
s3: null, /* optional custom data 3 for smart banner */
s4: null, /* optional custom data 4 for smart banner */
s5: null, /* optional custom data 5 for smart banner */
s6: null, /* optional custom data 6 for smart banner */
s7: null, /* optional custom data 7 for smart banner */
s8: null, /* optional custom data 8 for smart banner */
s9: null, /* optional custom data 9 for smart banner */
s10: null /* optional custom data 10 for smart banner */
});
Smart banner custom data variables may contain only JSON compatible data types:
booleans, strings, numbers and (nested) arrays or objects.
-->
Tento tag po vložení na stránku neposiela žiadne dáta do INRESu, akurát načíta všetky potrebné JS skripty a vytvorí globálnu JS funckiu g_ntscRmkQueueStore(), pomocou ktorej môže JS kód na stránke odoslať remarketingové dáta do INRESu (aj opakovane).
Inak pre všetky parametre platí presne to isté, čo pre server side kód a samotný tag obsahuje aj ukážku volania tejto funckie.
Príklad: Webstránka s jednoduchým formulárom na výber obľúbenej farby odošle túto informáciu ako remarketingové smart dáta do INRESu po kliknutí na tlačidlo.
Kompletný HTML kód stránky:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Obľúbená farba:
<select id="myColor">
<option value="red">Červená</option>
<option value="green">Zelená</option>
<option value="blue">Modrá</option>
</select>
<button id="myButton"> Click! </button>
<!-- INRES REMARKETING START v2smjs -->
<script>
if (typeof g_ntscRmkQueue == "undefined") var g_ntscRmkQueue = [];
if (typeof g_ntscRmkQueueStore == "undefined") {function g_ntscRmkQueueStore(obj) {if (typeof obj == "object")
{ if (typeof g_ntscAd == "object") g_ntscAd.remarketing2(obj); else g_ntscRmkQueue.push(obj);}}}
</script>
<script src="https://inres.uspech.sk/js/rsysc.js" async></script>
<!-- INRES REMARKETING END v2smjs -->
<!-- After inserting above code somewhere on a page (only once), remarketing data
can be sent to INRES using following JS call:
g_ntscRmkQueueStore({
t: X, /* tag id, do not change */
e: null, /* optional custom event(s), string or array of strings */
p: null, /* optional product id(s) for dynamic remarketing, string or array of strings */
s1: null, /* optional custom data 1 for smart banner */
s2: null, /* optional custom data 2 for smart banner */
s3: null, /* optional custom data 3 for smart banner */
s4: null, /* optional custom data 4 for smart banner */
s5: null, /* optional custom data 5 for smart banner */
s6: null, /* optional custom data 6 for smart banner */
s7: null, /* optional custom data 7 for smart banner */
s8: null, /* optional custom data 8 for smart banner */
s9: null, /* optional custom data 9 for smart banner */
s10: null /* optional custom data 10 for smart banner */
});
Smart banner custom data variables may contain only JSON compatible data types:
booleans, strings, numbers and (nested) arrays or objects.
-->
<script>
document.getElementById('myButton').addEventListener('click', function() {
g_ntscRmkQueueStore({
t: X, /* tag id, do not change */
s1: document.getElementById('myColor').value
});
});
</script>
</body>
</html>
Podrobnejšie informácie o smart banneri nájdete v Špecifikácii HTML5 bannerov.
V prípade akýchkoľvek otázok k tomuto dokumentu, nasadeniu kódov či exportu produktov sa môžete obrátiť na: Martin Gaži, 0904 133 643, martin.gazi@inres.sk.