Tento návod vás provede technickou integrací Track & Trace widgetu na váš web. Integrace je velmi jednoduchá a zabere pouze několik minut.
Předpoklad: Před integrací Track & Trace musíte mít aktivní Retino Tracking účet s alespoň jedním propojeným zdrojem objednávek.
Co je Track & Trace
Track & Trace je stránka, na které vaši zákazníci sledují své zásilky. Můžete ji mít integrovanou jako widget přímo na svém webu, nebo používat hostovanou verzi u Retina. V případě, že máte více e-shopů s Track & Trace, Retino pozná, ke kterému e-shopu objednávka patří, a sledovací odkazy vždy povedou na správný web. Více o fungování a možnostech nastavení najdete v článku Co je Track & Trace a jak funguje.
Krok 1: Získání integračního kódu
Přihlaste se do Retino Tracking
Přejděte do Nastavení > Track & Trace
V sekci "Integrace" najdete váš unikátní integrační kód
Klikněte na tlačítko "Kopírovat kód"
Integrační kód vypadá takto:
<div id="retino-track-n-trace"
data-page-id="VAŠE-ID"
data-language="cs"
data-base-url="https://app.retino.com">
</div>
<script type="text/javascript" id="retino-track-n-trace-script">
(function(r,e,t,i,n,o){n=e.createElement(t);n.src=i;n.async=true;o=e.getElementsByTagName(t)[0];o.parentNode.insertBefore(n,o)})(window,document,'script','https://cdn.retino.com/trackntraceInjector.js')
</script>
Krok 2: Vložení kódu na web
Zkopírovaný kód vložte na stránku, kde chcete zobrazit Track & Trace widget. Máte několik možností:
Varianta A: Vlastní stránka pro sledování zásilek
Vytvořte na svém webu novou stránku (např. /sledovani-zasilky) a vložte do ní integrační kód:
<!DOCTYPE html>
<html>
<head>
<title>Sledování zásilky</title>
</head>
<body>
<h1>Sledujte svou zásilku</h1>
<!-- Zde vložte integrační kód -->
<div id="retino-track-n-trace"
data-page-id="VAŠE-ID"
data-language="cs"
data-base-url="https://app.retino.com">
</div>
<script type="text/javascript" id="retino-track-n-trace-script">
(function(r,e,t,i,n,o){n=e.createElement(t);n.src=i;n.async=true;o=e.getElementsByTagName(t)[0];o.parentNode.insertBefore(n,o)})(window,document,'script','https://cdn.retino.com/trackntraceInjector.js')
</script>
</body>
</html>
Varianta B: Integrace do existující stránky
Widget můžete vložit do libovolné existující stránky, například do sekce "Můj účet" nebo "Zákaznická podpora".
Varianta C: Integrace do CMS systému
WordPress:
Použijte HTML blok v editoru Gutenberg
Nebo vložte kód přes widget "Vlastní HTML"
Případně použijte plugin pro vkládání vlastního kódu
Shoptet:
Administrace → Vzhled a obsah → Editor obsahu
Vytvořte novou stránku nebo upravte existující
Přepněte do HTML režimu a vložte kód
PrestaShop:
Vytvořte novou CMS stránku
V editoru přepněte na "Zdrojový kód"
Vložte integrační kód
Tip: Widget se automaticky přizpůsobí šířce svého kontejneru. Pro nejlepší výsledky ho umístěte do kontejneru s šířkou alespoň 400px.
Krok 3: Nastavení jazyka
Widget podporuje automatickou detekci jazyka, ale můžete ji přepsat parametrem data-language :
<div id="retino-track-n-trace"
data-page-id="VAŠE-UNIKÁTNÍ-ID"
data-language="en" <!-- Změňte na požadovaný jazyk -->
data-base-url="https://app.retino.com">
</div>
Podporované jazyky: cs , sk , en , de , pl , hu , ro , hr , sl a další.
Krok 4: Odkazy na sledování zásilky
V e-mailech odesílaných z Retina se odkazy na sledování zásilky generují automaticky a vedou na Track & Trace e-shopu dané objednávky. Odkazy můžete vytvářet i sami, například ve vlastních e-mailech nebo automatizacích.
Možnost 1: Odkaz na vaši stránku s widgetem
Pokud máte widget integrovaný na svém webu, odkazujte přímo na svou stránku a údaje zákazníka předvyplňte URL parametry.
S předvyplněným e-mailem a číslem objednávky:
https://vasestranka.cz/[email protected]&order-code=123456
S předvyplněným e-mailem a sledovacím číslem:
https://vasestranka.cz/[email protected]&tracking-number=CP123456789CZ
S ID zásilky z Retino (nejpřesnější):
https://vasestranka.cz/sledovani-zasilky?retino-tracked-shipping-id=3104447e-d019-453c-96ec-2805daf937b4
Možnost 2: Přímý odkaz přes Retino
Přímý odkaz najdete v nastavení Track & Trace v sekci "Přímý odkaz" a podporuje stejné URL parametry:
https://app.retino.com/trackntrace/VAŠE-PAGE-ID/
Po vyhledání objednávky Retino zákazníka automaticky přesměruje na stránku e-shopu, ke kterému objednávka patří (pokud tam máte widget integrovaný). Bez integrace se zákazníkovi zobrazí hostovaná stránka Retina.
Kterou možnost použít?
Máte jeden e-shop a widget integrovaný — odkazujte přímo na svou stránku s parametry (Možnost 1).
Máte pod jedním účtem více e-shopů — používejte přímý odkaz (Možnost 2). Retino podle objednávky pozná správný e-shop a zákazníka na něj přesměruje.
Widget integrovaný nemáte — používejte přímý odkaz (Možnost 2), zákazník uvidí hostovanou stránku Retina.
Testování integrace
Po vložení kódu:
Obnovte stránku s widgetem
Měl by se zobrazit formulář pro vyhledávání zásilek
Vyzkoušejte zadat testovací údaje:
E-mail a číslo objednávky některé z vašich zásilek
Nebo pouze sledovací číslo
Měly by se zobrazit informace o zásilce
První použití: Integrační URL se uloží ve chvíli, kdy zákazník ve widgetu poprvé vyhledá svou objednávku. Retino podle ní pozná, ke kterému e-shopu integrace patří, a sledovací odkazy pak vedou na správnou stránku. Uložené integrační URL najdete v Nastavení > Track & Trace.
Řešení problémů
Widget se nezobrazuje
Zkontrolujte, že je kód vložen správně včetně script tagu
Ověřte v konzoli prohlížeče, zda nejsou JavaScript chyby
Ujistěte se, že máte správné
data-page-id
Widget hlásí "Stránka nenalezena"
Ověřte, že máte aktivní Track & Trace v nastavení
Zkontrolujte správnost ID stránky v integračním kódu
Nezobrazují se data o zásilkách
Ověřte, že máte propojený zdroj objednávek
Zkontrolujte, že zásilky existují v systému Retino Tracking
Ujistěte se, že zadáváte správné údaje (e-mail musí odpovídat e-mailu z objednávky)
Pokročilá integrace
Vlastní styling
Widget respektuje základní CSS vašeho webu. Pro pokročilé úpravy vzhledu použijte nastavení v administraci Retino.
Události a callbacky
Widget v současné verzi nepodporuje JavaScript události. Pro programovou integraci použijte Tracking API.
Zabezpečení
Widget je zabezpečený a data se přenášejí přes HTTPS. Zákazníci vidí pouze zásilky přiřazené k jejich e-mailové adrese.
Potřebujete pomoc? Kontaktujte naši podporu na [email protected] nebo využijte chat v aplikaci.