Tvorba šablony pro opuštěný košík

Jak personalizovat šablonu opuštěného košíku, tedy jak propsat produkty z košíku? Na co si dát pozor?

Jakub Filounek avatar
Autor: Jakub Filounek
Aktualizováno před více než týdnem

Přejete-li si na kontakty odesílat e-mail s opuštěným košíkem, je nezbytné v Ecomailu vytvořit šablonu pro opuštěný košík a následně samotnou automatizaci, díky které bude odesílání e-mailu probíhat. Pro správné fungování automatizace je zapotřebí nastavit také integraci s vaším e-shopem a trackování uživatelů na webu.

Pojďme se společně podívat, jak na automatizaci a šablonu pro opuštěný košík.


1. Integrace

Pro integraci Vašeho e-shopu s Ecomailem můžete použít některý z našich dostupných pluginů, API nebo využijte vlastní řešení pro integraci dat. Důležité je především přenášet událost opuštěného košíku.

2. Příprava šablony

Pokud již máte integraci hotovou, je potřeba připravit šablonu s obsahem košíku.
Je to velmi snadné a poslouží vám k tomu několik speciálních merge tagů, např.:

  • *|#ECM_BASKET|* - počet produktů v košíku

  • *|IF:#ECM_BASKET=2|* - podmínka, pokud je počet produktů v košíku roven 2

  • *|ECM_BASKET[1].name|* - název prvního produktu v košíku

  • *|ECM_BASKET[2].price|* - cena druhého produktu v košíku

Vlastnosti produktu, které je možné z feedu propsat jsou následující (demonstrováno na prvním produktu v košíku):

  • *|ECM_BASKET[1].productId|* - ID produktu

  • *|ECM_BASKET[1].img_url|* - umístění obrázku (url adresa)

  • *|ECM_BASKET[1].url|* - odkaz na produkt

  • *|ECM_BASKET[1].name|* - název produktu

  • *|ECM_BASKET[1].price|* - cena

  • *|ECM_BASKET[1].description|* - popis

Následující položky musí mít pozměněné číslo u každého parametru. Pro vypsání druhého produktu z košíku tak bude zápis *|ECM_BASKET[2].description|*.

Základním prvkem při vypsání produktů v košíku je podmínka. Šablona vždy vykreslí právě takové produkty, které se v události opuštěného košíku nacházejí. Pokud by se v košíku nacházely právě tři produkty a v šabloně se nacházel merge tag pro vykreslení čtvrtého produktu, šablona se neodešle.

Následující podmínka vyobrazí produkty podle logiky:


- pokud je v košíku jeden produkt, zobrazí se v šabloně jeden produkt
- pokud jsou v košíku dva produkty, zobrazí se v šabloně dva produkty
- pokud je v košíku více produktů (3 a více), zobrazí se tři produkty

*|IF:#ECM_BASKET=1|*
Parametry[1]
*|ELSEIF:#ECM_BASKET=2|*
Parametry[1]
Parametry[2]
*|ELSE:|*
Parametry[1]
Parametry[2]
Parametry[3]
*|END:IF|*

Parametry pak dosaďte dle toho, které informace chcete propisovat, stejně tak zda chcete např. využít tlačítka či nikoliv.

Jako příklad šablona, která obsahuje podmínku dle počtu položek v košíku uživatele:

  • jedna položka

  • dvě položky

  • tři položky (tj. i pro případ, kdy jsou v košíku více než tři položky)

TIP: Pod všechna vložená tlačítka typicky vkládáte odkaz na košík na e-shopu -> tj. abyste kontakt po prokliku přesměrovali rovnou zpátky do košíku a tím pádem blíže k dokončení objednávky. Prokliky na daný produkt jsou automaticky pod obrázkem díky vloženým merge tagům.

Pokud chcete, aby obrázky které budou vedle sebe, byly zarovnány ve stejné výšce, doporučujeme merge tag pro obrázky vložit do vlastní struktury, a stejně tak tlačítko, na které můžete vložit odkaz na košík či dokončení objednávky. Znamená to však, že zejména v mobilním zobrazení bude obsah řazen tak, jak jdou struktury za sebou (zobrazí se obrázky pod sebou a teprve následně struktura s obsahem názvu, ceny).

Obrázek se vkládá přes zdrojový kód textového obsahu (Zdroj na toolbaru).

Doporučujeme také nastavit maximální velikost obrázků produktů, jelikož se jinak zobrazí v originální velikosti. Kód takového obrázku může vypadat následovně:

<a href="*|ECM_BASKET[1].url|*"><img alt="*|ECM_BASKET[1].name|*" src="*|ECM_BASKET[1].img_url|*" width="250" /></a>


<!-- Kde a href= je odkaz na produkt na e-shopu -->
<!-- img alt= je alternativní text obrázku v newsletteru -->
<!-- src= je zdroj obrázku produktu -->
<!-- 250 je maximální šířka obrázku -->

Newsletter má šířku 600px, je proto dobré nastavit velikost obrázků adekvátně, např.: tři obrázky (produkty) vedle sebe by měly mít každý max. 200px, dva obrázky (produkty) můžou mít max. 300px atp.


3. Nastavení automatizace pro opuštěný košík

Poté, co vytvoříte šablonu pro opuštěný košík, můžete se pustit do tvorby samotné automatizace.

Frekvenci spuštění nastavte na “několikrát” a trigger (spouštěč) automatizace je pokaždé “vlastní událost - Bastket”, viz PrntSc:


Následný scénář událostí je zcela ve vaší režii. Automatizace může poté vypadat například takto:

  • počkat 3 hodiny

  • podmínka, zda uživatel za posledních x hodin nakoupil (doporučujeme časovou rezervu, takže v tomto případě např. za posledních 6 hodin)

  • pokud ne, poslat e-mail s obsahem košíku

  • dál se dá poslat další e-mail například po dalších 48 hodinách

Funkčnost automatizace můžete před jejím spuštěním otestovat.
Jako první krok je otrackování vaší e-mailové adresy na webu (e-shopu). Provést tak můžete následovně:
1. Za odkaz vložte následující řetězec a nahraďte svým e-mailem, který máte v seznamu kontaktů: ?ecmid=email@domena.cz (např. www.ecomail.cz?ecmid=mujmail@domena.cz) nebo

2. Přes konzoli v prohlížeči (např. v Google Chrome přes Developers tools nebo F12 > console) spustit snippet a nahradit vaším e-mailem:

window.ecotrack('setUserId', 'mujmail@domena.cz');

window.ecotrack('trackPageView');

Jakmile dojde k otrackování, vložte zboží do košíku, poté Vaši adresu vložte do seznamu kontaktů, pro který je automatizace nastavena. Vyčkejte na propsání vlastních událostí v detailu kontaktů a poté vložte kontakt do testování v rámci automatizace.

Pokud si přejete pomoci s již vytvořenou šablonou nebo byste si ji rádi nechali zkontrolovat, stačí napsat na náš chat. Případně Vám šablonu i automatizaci pro opuštěný košík mohou vytvořit naši specialisté.

Dostali jste odpověď na svou otázku?