Typy šablon

Samba Drag & Drop editor využívá 5 typů šablon, a to konkrétně:

• 1. Segmentace
  2. Personalizace
  3. Opakované objednávky
  4. Opuštěný košík
  5. Nákupní zájem

Pro připomenutí: Picasso editor není kompatibilní se šablonami typu Drag & Drop. Picasso šablony (a Picasso editor) využívají odlišnou logiku pro přidávání produktů a pro správu šablon obecně.

Změna typu šablony

Typ šablony lze změnit i poté, co je šablona vytvořena. Předtím, než typ šablony změníte, si zkontrolujte, že šablona obsahuje relevantní Merge Tagy pro typ šablony, který se chystáte zvolit – v opačném případě můžete narazit na chyby.

Konverze mezi HTML a Drag & Drop šablonou

Pamatujte, že HTML šablony nelze editovat v Drag & Drop editoru, protože byly vytvořeny v jiných editorech, které nejsou s tímto editorem kompatibilní. Převedení Drag & Drop šablony na HTML je nevratné a nebude možné jí převést zpět.

 

Vkládání personalizovaných produktů

Pro využití produktové personalizace musíte použít tzv. dynamické merge tagy.

Merge Tagy v šabloně pro vkládání produktů

Které Merge Tagy máte v šabloně použít? Vše záleží na typu šablony. Samba využívá 5 typů Merge Tagů, konkrétně:

1/ Segmentační šablona žádné Merge Tagy pro vkládání produktů nepoužívá

2/ Merge Tagy personalizované šablony

3/ Každý Trigger má mírně odlišné Merge Tagy:

     3a/ Opuštěný košík

     3b/ Nákupní zájem

     3c/ Opakované objednávky

Přidávání Produktů obecně

Algoritmus Samby v rámci personalizace automaticky vloží produkty do odesílaného e-mailu zákazníkovi. Jak se Samba dozví, kam přesně má v šabloně produkty vložit?

Samba používá pro reprezentaci jednotlivých produktů unikátní proměnné, které slouží pro zobrazení produktových míst v šabloně. Těsně před odesláním konkrétnímu zákazníkovi jsou tyto proměnné automaticky nahrazeny (odkazem k obrázku, odkazem na produkt, jeho názvem a popisem). Tyto proměnné nazýváme Merge Tagy a musí být použity ve správném formátu – vypadají například takto: {{merge_tag_priklad}}. Proměnné využívají dvojitou závorku, aby bylo viditelné, kde definice proměnné začíná – {{ a kde končí – }}.

Přidání Merge Tagů pro Produkty

Existuje několik možností, jak Merge Tagy přidat do šablony. 

1/ Vložíte, resp. vepíšete je ručně. Na to je potřeba detailnější znalost těchto tagů, resp. jaké mohou být použity a do jakého typu šablony patří. V sekci pod tímto článkem naleznete téma věnované rozdílům mezi tagy jednotlivých typů šablon a kdy se které používají.

2/ Vyberete je z menu Merge tagů.

 

3/ Pokud má specifický Merge Tag obsahovat odkaz, můžete jej vybrat z tzv. Special links (speciální odkazy).

Níže naleznete seznam atributů, kterými můžete nahradit běžné prvky vzhledu šablony. Merge Tagy jsou pak po uložení automaticky nahrazeny daty z datových feedů.

• Title – Název produktu či jeho varianty.
• Price – Aktuální cena či cena po slevě.
• Price Before – Cena produktu před slevou.
• URL – Odkaz (cesta) k produktu na Vašem e-shopu.
• Image – Alternativní text, který se použije, pokud se z nějakého důvodu nepodaří načíst obrázek, či se v odeslaném e-mailu nezobrazí.
• Description – Popis produktu.
• Brand – Název značky produktu.

Tyto prvky označují potřebné minimum pro zajištění správného chování. Další využitelné prvky jsou popsány ve specifikacích konkrétní šablony níže.

Obrázky produktů a jejich zástupná místa

Zástupná místa (resp. „Placeholders“, viz níže) označují místo a velikost obrázku, kde se bude nacházet výsledný vnořený produkt.

Velikost obrázku a ID produktu lze upřesnit skrze panel nastavení (v editoru po pravé straně).

URL odkazy zástupných míst musí být zkopírovány a upraveny v závislosti na vkládaném produktu (a velikosti jeho obrázku).

Viditelnost produktových atributů

Některé produktové atributy nemusí být specifikovány ve Vašem datovém feedu. Například ne každý produkt je ve slevě, či jej takto můžete mít jen dočasně. Pokud se produkt nakonec zlevní, doporučujeme spíše zobrazit původní cenu před slevou. 

Na toto lze použít další Merge Tag, který hodnotu zobrazí pouze v případě, že v datovém feedu existuje. V příkladu výše vidíte situaci, ve které je produkt v současnosti zlevněný.

V rámci úpravy těchto tagů je také potřeba použít otevírací (#) a uzavírací (/) prvky. Níže naleznete praktický příklad těchto prvků.

{{#main_product_price_before}}

Zde bude informace o produktu, která splňuje tyto podmínky, tj. například 3,456czk

{{/main_product_price_before}}

Co se příkladu týče: Cokoliv, co se nachází mezi Merge Tagy {{#main_product_price_before}} a {{/main_product_price_before}} bude viditelné jen v případě, že existuje hodnota pro main_product_price_before.

Toto lze aplikovat na jakékoliv Merge Tagy v jakémkoliv typu šablony.

---

Před odesláním

Je dobré zkontrolovat, zda je šablona validní. Může nastat několik problémů.

Duplikáty a chybějící hodnoty

Ujistěte se, že proměnné u Merge Tagů nejsou totožné. Merge Tagy se stejnými názvy budou obsahovat ve výsledném e-mailu stejné hodnoty. Zároveň myslete na to, že přidání {{product2_title}} k názvu Produktu 1 může být při kontrole matoucí.

Toto varování můžete samozřejmě ignorovat, pokud víte, co děláte (pokud se například jedná o Váš záměr). Občas se stejný název opravdu používá (například v úvodním odstavci) – pak je vše v pořádku.

Náhled před odesláním

Odešlete si testovací e-mail na Vaši vlastní e-mailovou adresu, abyste si zkontrolovali, že je šablona validní. Berte, prosím, na vědomí, že produkty, které se Vám do mailu dosadily, byly dosazeny na základě našeho A.I. algoritmu.

V režimu náhledu se na šablonu můžete také podívat v zobrazení mobilního telefonu (mimo počítačového zobrazení).

 

Správa statických produktů

Pomocí této funkcionality můžete snadno generovat produktové dlaždice s použitím informací z vaší produktové databáze. Výsledné dlaždice jsou renderovaný obrázek.

Vlastnosti

• Použití je možné v jakémkoli typu šablony (segmentační, personalizovaná, triggery).
• Je zaručeno jednotné zobrazení ve všech emailových klientech.
• Použitím narůstá celková velikost HTML jen minimálně oproti použití běžného stylování.

Návod na použití renderovaných produktových dlaždic

HTML snippet

Abyste mohli využít této funkcionality, je nejprve třeba pro každou takovou produktovou pozici vložit do šablony krátký kus HTML kódu pomocí CONTENT>HTML

v následujícím tvaru:

<a id="productX" class="Y" href="https://samba.ai"><img src="https://via.placeholder.com/160x200/cccccc/000000?text=productX" style="max-width:100%; " alt="Samba.ai" /></a>

• X
  • Číslo 1, 2, … určující číslo/pořadí produktu v šabloně, slouží pro orientaci při správě produktů.
  • Každý snippet musí obsahovat unikátní číslo.
• Y
  • Číslo 1, 2, …, 6 určující počet sloupců, do kolika je daný řádek v šabloně rozdělen. Dle tohoto se automaticky určí velikost produktové dlaždice, kterou lze dále měnit.

Pokud např. vkládáte první produkt na řádek o 2 sloupcích (viz obrázek výše), vypadá výsledný snippet takto:

<a id="product1" class="2" href="https://samba.ai"><img src="https://via.placeholder.com/160x200/cccccc/000000?text=product1" style="max-width:100%; " alt="Samba.ai" /></a>

 

Vyhledání produktu

Klikem na tlačítko Správa statických produktů

se vám zobrazí nové okno, kde můžete vyhledat produkt podle jména nebo ID. Hledání lze také omezit jen na aktuálně naskladněné produkty.

Pomocí tlačítka Obnovit lze znovu načíst aktuální údaje ke zvolenému produktu z produktové databáze, tlačítkem Odstranit naopak výběr produktu zrušíte a můžete vybrat jiný.

 

Design dlaždice

U načteného produktu lze modifikovat následující obsahové prvky. Každý prvek je možné také zcela skrýt pomocí přepínače.

• Kontejner – určuje základní vlastnosti celé produktové dlaždice
• Obrázek – produktový obrázek
• Název – jméno produktu
• Značka – výrobce produktu
• Popis – popisek produktu
• Tlačítko (CTA) – tlačítko vyzývající k akci, např. „Koupit“
• URL – odkaz na detail produktu
• Cena – aktuální cena produktu
• Původní cena – původní cena produktu před slevou
• Sleva – sleva na daném produktu v %
• Vlastní textové prvky – libovolné další obsahové prvky

Při volbě Pozice: Absolutní lze pomocí myši přetáhnout daný prvek na zvolenou pozici v dlaždici.

 

Produktové šablony

Pomocí tlačítka Uložit jako produktovou šablonu jednoduše celý design dlaždice uložíte pro pozdější použití. 

Všechny takto uložené designy naleznete v záložce Produktové šablony, kde později můžete pomocí volby Aplikovat šablonu použít dříve uložený design pro nastylování produktu v aktuálním výběru.

Po dalších úpravách designu produktové dlaždice lze Uložit změny do stávající šablony nebo Uložit jako novou produktovou šablonu.

 

Uložení a renderování

Pro finální uložení změn do emailové šablony, tj. renderování produktové dlaždice s vybraným produktem na danou pozici, klikněte na Uložit & renderovat.

Takto je třeba potvrdit nagenerování dlaždice pro každý produkt, kde jste provedli nějakou změnu, což je zvýrazněno označením „Návrh“.  

Vzhled výsledné dlaždice je poté ihned vidět v šabloně.

 

Znovunačtení produktů

Poté, co rozhraní pro správu statických produktů zavřete a zkontrolujete výsledný design v samotné šabloně, se můžete do správy produktů opět přepnout tlačítkem Správa statických produktů jako na začátku.

Pozice, na které už byly nagenerovány produkty, si pamatují použitou produktovou šablonu. Tlačítko Obnovit načte znovu aktuální informace k produktu z produktové databáze. Pakliže součástí vašich úprav designu bylo také přepsání textových prvků, je proto třeba tuto změnu znovu provést.

 

Zobrazení na mobilních zařízeních

• Pro zobrazení na celou šířku při responzivním zobrazení použijte v nastavení Kontejneru volbu „Plná velikost na mobilních zařízeních“.
  
• Je vhodné vzít v potaz velikost zobrazení na mobilních zařízeních a nagenerovat pro ně speciální design, jenž lze skrýt/zobrazit dle volby zařízení.
  

This post is also available in: English (Angličtina)