3.2. Prvky v šabloně

• Jakýkoliv prvek je možné skrýt pro zobrazení na mobilu (např. pokud menu zabírá moc místa, tak se na telefonu nezobrazí, ale na desktopu ano).

Open

Skrýt na mobilu

• U všech prvků jsou v nabídce 4 tlačítka:

  • křížek = smazat, propiska = upravit, zásuvka = vytvořit widget, plus=duplikovat

Open

Prvky v šabloně

3.2.1 Box

• Prvek, do kterého se vkládají další prvky, které pak lze společně přesouvat.

• Po rozkliknutí úprav je možné vidět možnosti, se kterými lze pracovat - při kódování šablony jsou nastaveny defaultní nastavení podle přání klienta, tj. odsazení, barva pozadí boxu atd. > volby se dají měnit i dodatečně.

• Nastavovat lze vnitřní i vnější odsazení.

3.2.2 Text

• Lze si vybrat typ, barvu, velikost písma -> automaticky vyskakují typy fontů a barev, které byli klientem definovány při onboardingu vybral/nastavil.

  • Je možné nastavit až 7 typů písma.

• V tlačítku “Zdroj” (viz screenshot) lze vidět zdroj textu/písma - lze využívat pro kontrolu textu např. při použití prokliků. Pokud se při práci ve zdroji má něco ukládat, tak je třeba kliknout zpátky na normální text (tj. ne zobrazení zdroje) a pak kliknout na uložit. Ve zobrazení přes zdroj se změny neuloží.

Open

Uložení prokliku

3.2.3 Sloupce

• Doporučuje se zvolit max. 3-4 sloupce (v případě, že jsou do nich vkládány texty, produkty atd.), a to z důvodu správnosti formátování a čitelnosti.

  • Sloupců může být i více (např. pokud se do nich vkládají malé obrázky/ikony produktů) - v každém případě je nutné vzhled a rozložení sloupců kontrolovat skrze náhledy, či posláním testovacího e-mailu.

• Dá se pracovat s poměrem šířek sloupců - pokud šířka není specificky upravena, tak se rozdělují rovnoměrně (např. při použití dvou sloupců - 50:50), je ale možné si zvolit rozložení podle potřeby, procentuálně (tj. pokud jeden sloupec má být širší než druhý).

Open

Nastavení vlastního poměru šířek sloupců

• Do sloupce je možné vložit další sloupce, pokud je to žádoucí (např. pokud uživatel chce vložit menu).

• Pro jednodušší práci se sloupci je možné zvolit pohled mřížky, viz obrázek níže:

Open

Práce s mřížkou

• Práce se sloupci:

  • Zvolí se počet sloupců.

  • Zvolí se odsazení (příp. vnější/ vnitřní mezery mezi sloupci).

    • Odsazení je možné změnit v průběhu vytváření šablony (např. proto, aby se prvky vešly vedle sebe).

  • Zvolí se vertikální zarovnání.

  • Zvolí se rozložení na mobilu.

    • Pokud je zvoleno “ponechat vedle sebe” - prvky menu zůstanou vedle sebe.

    • Pokud je zvoleno “zalomit pod sebe” - prvky se seřadí tak, že budou pod sebou.

    • Při zalomení pod sebe je vhodné zvolit poloviční odsazení po stranách (viz níže).

Open

Odsazení

3.2.4 Produkty

• Prvek “produkty” je propojen s feedem produktů.

  • Po kliknutí na “vybrat produkt”, lze vyhledat např. ID produktu/ nebo název (část názvu) produktu a následně se propíší do šablony informace o vybraných produktech (název, popis, obrázek, cena).

• Informace o produktech se propisují automaticky (např. název, popisek, obrázek), ale je možné je upravovat.

• U jakéhokoliv staticky vloženého produktu je možné dopisovat/přepisovat parametry např. cenu, info o produktu atd.

• Ceny u produktů - u statických produktů se mohou upravovat přímo v šabloně, je možné je úplně skrýt, případně je možné si zvolit (zaškrtnout) možnost “Automatické ceny “ a v čase rozesílky se pak v šabloně zobrazí (se propíší) aktuální ceny z feedu.

Open

Umístění checkboxu pro automatické ceny v šabloně

• Při vkládání prvku “produkt” je důležité zvolit správný layout sloupců, do kterých jsou produkty vkládány.

  • Layout je možné zvolit kliknutím na produkt v šabloně, v poli “Layout”, kde je nutné zvolit produkt se správným počtem sloupců - tedy pokud jsou vkládány 2 produkty, tak je nutné zvolit layout s dvěma sloupci

Open

Layout produktů

3.2.5 Články

• Do šablony je také možné propisovat články - funguje to stejně jako u produktů, tj. ze strany klienta je se do platformy Targito sdílejí feedy s články.

  • Pokud nejsou články sdíleny pomocí feedu, pak je možné si článek v šabloně připravit ručně - tj. příprava nadpisu, obrázku, popisku a přidáním tlačítka s odkazem na blog (např. “Přečíst více”).

• Layout článků funguje stejně jako layout produktu a nastavuje se stejným způsobem (viz odstavec výše).

3.2.6 Kategorie

• Při použití této funkce se do šablony propíše obrázek a popisek z feedu produktů (pokud informace o kategoriích klient do platformy Targito sdílí). Pokud je v rámci informací dodáván i obrázek k jednotlivým kategoriím, pak je možné jednotlivé obrázky automaticky propisovat do šablony. Příjemce e-mailu se pak může (stejně jako u produktu) prokliknout rovnou do určité kategorie na webu skrze obrázek.

3.2.7 Tlačítko

• Je většinou přednastavené v rámci master šablony; používáno pro různé url adresy směřující příjemce e-mailu na web.

• Je možné si nastavovat výšku, šířku, zarovnání, barvy a měnit jeho text a kam má směřovat.

Nastavení defaultního tlačítka:

1. Otevření nastavení Designu.

2. Zvolení šířky, výšky, barvy, polohy, typu ohraničení, zaoblení.

3. Zvolení textu tlačítka a URL odkazu na proklik.

4. Zvolení velikosti, barvy fontu a pozadí, stylu písma.

5. Pole “Hover background color” = nastavení barvy tlačítka, která se zobrazí při najetí kurzorem na tlačítko; toto je možné měnit jen v nastavení designu (ne přímo v šabloně).

6. Zvolení vnitřního a vnějšího odsazení, poloměru, typu a barvy ohraničení.

3.2.8 Logo

• Při použití této funkce se rovnou načte logo společnosti s proklikem na homepage, což šetří práci (není potřeba pokaždé nahrávat obrázek loga, stačí pouze zvolit tento prvek a logo se načte do šablony).

• Je možné nastavit odsazení, zarovnání.

3.2.9 Obrázek

• Je možné vložit obrázek ze souborů.

  • Povolené formáty jsou: png, gif (limit pro gif je 5 MB), jpg, jpeg.

• Je možné zvolit jiný obrázek pro desktop i pro mobil (tj. při zobrazení na mobilu se bude ukazovat jiný obrázek, než při zobrazení na desktopu).

• Možné nastavit url k prokliku skrze obrázek.

• Stejně jako u ostatních prvků je možné nastavit výšku, šířku, zarovnání.

3.2.10 Dynamické produkty

• Umožňuje personalizaci produktové nabídky.

• Je možné si zvolit, kolik produktů se má v newsletteru zobrazovat.

• Existují různé zdroje dynamických produktů; v pole “Zdroj dynamických produktů” se vybere zdroj produktů, které se mají v šabloně zobrazit (např. naposledy navštívené produkty, či produkty v košíku - viz obrázek níže).

• Je možné vytvořit i vlastní seznam produktů, které se mají dynamicky zobrazovat, podle předem definovaných podmínek.

  • Pokud žádné dynamické produkty daný seznam neobsahuje, tak se tato část v newsletteru vůbec nezobrazí

• Na layoutu se volí, jak budou produkty uspořádány.

• Text, který patří k dynamickým produktům je důležité vkládat přes prvek dynamických produktů (do pole “Text”) a ne jako samostatný prvek textu (viz obrázek níže). Je to proto, že text vložený přes prvek “Text” se bude v šabloně ukazovat všem příjemcům, tedy i těm, kterým se dynamické produkty neukazují. Naproti tomu text přidaný přes dynamické produkty, se bude zobrazovat jen u dynamických produktů, a tedy jen těm příjemcům, kterým se zobrazují i dynamické produkty.

Open

Přidání textu k dynamickým produktům

3.2.11 Hodnocení

• Je možné přidat hodnocení zákazníků do šablony na základě sdílení feedu hodnocení (z Heuréky).

• NEDĚLÁ se dynamicky (aby se zajistilo, že se nenahraje špatné hodnocení).

• Je vždy potřeba si vydefinovat, co vše se bude u hodnocení zobrazovat - automaticky se dodá jen slovní hodnocení, ale je možné propisovat i hvězdičky, název/jméno zákazníka atd.

Postup nastavení hodnocení:

1. V prostředí platformy Targito (tj. je nutné opustit prostředí editace šablony) je nutné kliknout na záložku “Data” a poté na volbu “Hodnocení”.

2. Zkopírovat ID hodnocení (případně pokud zde není hodnocení, je nutné jej importovat).

3. Následně je potřeba se vrátit zpět do šablony a vybrané ID vložit do políčka “vybrat hodnocení” a hodnocení se automaticky propíše.

3.2.12 QR kód

• Do platformy Targito je možné sdílet feed QR kódů, který lze vložit do šablony (každý zákazník má díky dynamickému zobrazení jiný QR kód).

• Lze ho vložit i staticky (jako obrázek).

3.2.13 Odpočet času

• Nastaví se datum a čas, do kterého se má odpočítávat (např. platnost akce) a následně se v šabloně odpočítává např. pro Black Friday.

3.2.14 Net Promoter Score (NPS)

• Widget sloužící k hodnocení; příjemci e-mailu hodnotí pomocí smajlíků, nebo číselné řady (viz obrázek níže).

Open

Net Promoter Score - zobrazení smajlíků

• Na každý hodnotící prvek (tedy smajlík, či číslo z číselné řady) je nutné napojit url, aby bylo možné zaznamenat akci prokliku a bylo tak následně možné sledovat prokliky v heatmapě.

  • Url může být buď stejná pro všechny hodnotící prvky, nebo je možné na každý hodnotící prvek napojit jinou url např. podle toho, jak zákazník hodnotí (např. špatný smajlík - landing page “Je nám líto, že se vám naše nabídka nelíbí.”).

• Výsledky hodnocení je možné vidět v reportech -> v reportech nahoře je ikona “NPS” .

• Je třeba definovat, co jednotlivými typy score hodnotíme.

3.2.15 Custom widget

• Widget je složen z více prvků, díky tomu ulehčí práci, protože není nutné ho pořád skládat znovu, a je tak možné ho používat pro více šablon.

  • Při duplikaci šablony do jiné jazykové mutace se vytvořený widget rovnou automaticky přehodí do jazykové verze dané mutace (podmínkou je, že widget je pro danou jazykovou mutaci předem vytvořený).

• V master šabloně tvořené společností Targito je vždy vytvořený widget hlavičky a patičky.

• Tvoření dalších widgetů je možné kliknutím na ikonku ,,zásuvky“ , čímž je možné vložit zvolený prvek do widgetu (viz obrázek níže).

• Lze ho vložit i do jiných šablon a pak už widget nelze upravovat tj. nelze přesouvat prvky, ale je možné upravovat textové informace (např. změny adresy ve widgetu v patičce).

• K upravení informace je třeba kliknout na “Upravit rozvržení” (přes ikonu tužtičky u widgetu) a zobrazí se html kód, který je možné upravovat (pro rozlišení jsou zde textové věci napsány bílou barvou) -> změna se automaticky projeví všude, kde je widget vložený (případně je možné widget měnit it skrze “Nastavení” > “Vlastní rozvržení.”).

Open

Úprava widgetu

3.2.16 Personalizace

• Jakýkoli obsah šablon lze personalizovat, tedy např. oslovit příjemce kampaně jeho jménem či příjmením.

• Kromě obsahu šablony je možné personalizovat také předmět e-mailu, preheader, ale také jméno či adresu odesílatele, dále pak odkaz u prvku Obrázek nebo hodnotu u prvku QR kód.

• Obecně lze personalizaci vložit kamkoli do šablony, kde uživatelské rozhraní umožňuje vkládat prvek Text.

• Personalizovat lze pomocí jednoduché syntaxe tzv. “personalizačního jazyka”.

Výpis hodnoty ze sloupce u kontaktu

• Každý kontakt má ve sloupcích (atributech) uložené hodnoty, které se do Targita dostávají buď pravidelnou synchronizací dat nebo jde o hodnoty, které dopočítává Targito dle dostupných dat.

• Všechny tyto hodnoty jsou k dispozici pro personalizaci, ať už pro výpis nebo pro použití v podmínkách, kdy se má která část obsahu zobrazit či nezobrazit.

• Vypsat lze jakoukoli hodnotu z libovolného sloupce u kontaktu, a to pomocí zápisu se složenými závorkami: {{contacts.[název sloupce]}}

• Pro vypsání hodnoty uvedené u kontaktu ve sloupci “jmeno” bude tedy zápis: {{contacts.jmeno}}

Open

Využití personalizace v šabloně (oslovení)

• Někdy může být v nějakém sloupci u kontaktu uvedena URL adresa, kterou lze rovněž propsat pomocí personalizace do šablony kampaně.

Open

Využití personalizace v šabloně (URL adresa)

Podmíněná personalizace

• V praxi je často vyžadováno oslovení dle pohlaví, tedy např. Milá [jméno zákaznice],… pro ženy, případně Milý [jméno zákazníka],… pro muže.

• Pro tyto účely je možné v rámci personalizace využít podmínek, pokud klient zároveň eviduje informaci o pohlaví pro jednotlivé kontakty.

• Případně je rovněž dobré mít připravenou univerzální variantu, pokud u kontaktu není pohlaví uvedeno.

• Syntaxe dané podmínky využívá klíčových slov “if”, “elseif”, “else” a “end” (tedy “pokud” …. “nebo pokud” … “jinak” …).

• Pokud se v podmínkách používá více atributů, které musí platit současně, uvádí se mezi nimi and (tedy “a zároveň”).

• V případě, že se atribut porovnává s nějakou hodnotou, používá se logický operátor == (dvě rovnítka za sebou).

• Daný zápis s podmínkami lze uvést nejen přímo v šabloně, ale také v předmětu či v preheaderu e-mailu.

Open

Využití podmíněné personalizace v šabloně (oslovení)

Open

Nežádoucí HTML entity v podmíněné personalizaci

Podmíněné zobrazení části obsahu

• Podmíněnou personalizaci lze kromě oslovení využít i pro zobrazení odlišného obsahu šablony v rámci jedné kampaně dle určitých kritérií.

• Takto je možné např. zobrazit dámské či pánské oblečení dle pohlaví, které je u kontaktu uvedeno, čili ženám se zobrazí dámské oblečení a mužům naopak pánské.

• Případně je i zde dobré mít připravenou část šablony, která se zobrazí kontaktům v případě, kdy u nich atribut pohlaví není vyplněn.

Open

Podmíněné zobrazení části obsahu (dle pohlaví kontaktu)

Open

Ošetření prázdné hodnoty atributu v dynamickém poli

Zobrazení nejbližší prodejny

• Pokud klient využívá modul GPS a eviduje u kontaktů nejbližší pobočku (např. atribut “_nearest_branches”), lze personalizační jazyk využít i pro zobrazení nejbližší pobočky přímo v kampani.

• Každému kontaktu se poté může zobrazit v e-mailu jeho nejbližší pobočka včetně dodatečných informací, které jsou vyplněny u jednotlivých poboček v sekci “Data - Pobočky”.

Open

Zobrazení nejbližší prodejny v šabloně

• Pokud je nějaký atribut datového typu “pole” a obsahuje více hodnot, lze všechny tyto hodnoty daného pole vypsat pomocí cyklu.

• Obecný zápis je poté ve tvaru: {{each contacts.[název pole]}}{{loop_var}}{{end}}

Open

Výpis zanořených hodnot pomocí cyklu

Personalizace ve jméně odesílatele

• Jméno odesílatele e-mailu lze dynamicky přizpůsobit např. dle konkrétní osoby (obchodníka).

• V přehledu kontaktů je nezbytné mít specifický sloupec (např pm_id), v kterém je uvedené jméno obchodníka pro daný kontakt.

Open

Sloupec pm_id v přehledu kontaktů

• V nastavení rozesílky je potřeba uvést do pole Jméno odesílatele tento zápis, který obsahuje vybrané obchodníky, kteří jsou uvedeni v sloupci pm_id.

• {{if (contacts.pm_id == 'novak')}}Petr Novak|Targito{{elseif (contacts.pm_id == 'koubek')}}Michal Koubek|Targito{{elseif (contacts.pm_id == 'pospisilova')}}Radka Pospíšilová|Targito{{else}}Targito{{end}}

Open

Zápis s podmínkami v jméně odesílatele

• Konkrétní jméno obchodníka se poté zobrazí kontaktům jako odesílatel. V případě, že jméno není u kontaktu vyplněno, zobrazí se název firmy.

   

3.2.17 Režim “dark mode”

• E-mailoví klienti (Gmail, Outlook, Apple mail apod.) mohou vykreslovat newsletter v režimu “dark mode” odlišně, proto nelze aplikovat obecný postup pro zajištění požadovaného vzhledu newsletteru v tomto režimu.

• Barvu písma pro režim “dark mode” nelze nijak změnit, toto záleží pouze na daném e-mailovém klientovi (potažmo operačním systému zařízení).

• Tmavý text bude tedy v režimu “dark mode” světlý, zatímco světlý text bude naopak tmavý. Specifikovat konkrétní barvu ale není možné.

• V rámci editace šablony nelze nijak změnit barvy ikonek či obrázků, nicméně ikonky a obrázky je možné podbarvit, případně kolem nich vytvořit bílý obrys.

• Tento bílý obrys poté nebude viditelný v klasickém zobrazení “light mode”, zatímco v režimu “dark mode” způsobí, že ikonka či obrázek nezanikne na černém pozadí.

Open

Vytvoření obrysu či podbarvení obrázků a ikonek pro zobrazení v režimu “dark mode”

• Případně je vhodné používat ikonky či obrázky s transparentním pozadím, zde je ale nutné brát v úvahu zobrazení takového obrázku na černém pozadí.

3.2.18 Exportování šablony z Targito

• Šablona se exportuje pomocí překliknutí ze záložky Design na záložku HTML (v pravém horním rohu) a zkopíruju si zobrazený HTML kód šablony. Viz obrázek.

Open

Záložka pro přepnutí do HTML

Open

Náhled šablony po přepnutí do HTML