Při vytváření nového newsletteru musíte často provádět stejné kroky. Představte si, že máte eshop a potřebujete poslat e-mail, ve kterém chcete ukázat 5 produktů – tzn. pro přípravu potřebujete 5 obrázků, 5 názvů produktů, případně jejich popisky, dále jejich ceny a v neposlední řadě i linky (nejen) pro tlačítka.
Tyto prvky se často v newsletteru u jednoho produktu používají několikrát, například název produktu se obvykle používá třikrát – v poli „Název produktu“ a pro atributy “title” a “alt” u produktového obrázku. Totéž platí pro odkaz, který použijeme pro tlačítko, pro obrázek, pro název atd. Když máte v newsletteru 5 produktů, musíte všechny kroky 5× zopakovat. A v dalších newsletterech stále a stále dokola.
Stejně tak při přípravě obsahového newsletteru s články z vašeho blogu. Pro každý článek potřebujete nadpis, perex, případně obrázek a samozřejmě link pro zobrazení celého článku.
Abyste neztráceli čas na provádění těchto rutinních operací, začněte používat smart elementy, které vám umožní tento proces automatizovat.
Smart element
Smart element je struktura, kontejner nebo pruh (stripe), do kterého jsou vloženy základní bloky, jako je obrázek, text, tlačítko a další, u nichž je aktivována možnost získávání dat prostřednictvím proměnných z externích zdrojů.
Prvním krokem je tedy příprava obsahu, kdy si připravíte strukturu s jednotlivými prvky (obrázky, texty, tlačítka…) tak, jak mají finálně vypadat. Druhým krokem je zadání interních a externích proměnných a nastavení pravidel pro jejich příjem a použití.
Poté už stačí vždy vložit jen odkaz na stránku produktu/článku na vašem webu a systém si “vytáhne” potřebná data a použije je na určené prvky. Tak ušetříte spoustu času zadáním pouze jednoho odkazu pro váš smart element – systém automaticky aktualizuje zbytek!
Vytvoření smart elementu pro článek na blogu
Vytvoření elementu si ukážeme na jednom z článků na našem blogu. Do smart elementu použijeme textová pole pro nadpis a perex a tlačítko.
Nejprve si tedy vytvoříme “kostru” elementu – např. strukturu s 1 kontejnerem. Do kontejneru vložíme potřebné bloky – tj. 2 textové bloky a tlačítko – a upravíme je do výsledného designu.
V menu pro úpravu kontejneru vyberte kartu “Data” a klikněte na tlačítko “Begin” –> dojde k aktivaci smart elementu.
Po kliknutí na tlačítko “Begin” se vám rozbalí menu, ve kterém můžete:
- nakonfigurovat všechna potřebná pravidla pro získávání hodnot a aplikovat je prostřednictvím proměnných na požadované bloky. K tomu slouží karta „Configuration“.
- v záložce „Appearence“ můžete v případě potřeby ručně upravit přijaté hodnoty konfigurovaných proměnných z webu.
Proměnné přidáte kliknutí na tlačítko
Protože chceme blok s texty a tlačítkem, přidáme proměnné “Title” a “Description” z části Blog. Každá přidaná proměnná vytvoří svou vlastní položku v záložce Configuration. Celkem tedy máme 3 proměnné - url, b_title a b_description.
Dále je třeba nakonfigurovat pravidla pro získávání hodnot pro tyto proměnné a jejich použití v našem smart elementu –> to uděláte v části “Matching rules”, která se skládá ze 2 karet:
- Internal – zde nastavíte pravidla, kde přesně potřebujete použít získané hodnoty proměnných ve smart elementu
- External – zde nakonfiguruje pravidla, odkud potřebujete získat hodnoty proměnných z webu.
Pravidla se konfigurují pomocí standardního mechanismu prohledávání prvků HTML prostřednictvím selektorů CSS a atributů.
Proměnná URL
Tato proměnná má ovládací prvek pro „Dynamic site“, který je ve výchozím nastavení vypnutý. Pokud je web, ze kterého chcete získat hodnoty pro libovolnou z proměnných ve smart elementech, dynamický, zapněte toto nastavení.
Protože chceme, aby byl ve smart elementu link vložen na nadpisu a tlačítku, na kartě „Internal“ nastavíme pravidlo, že hodnota proměnné bude nastavena na všechny prvky 'a' (pole selektoru CSS) v atributu 'href' (pole atributů). Konkrétně:
Nadpis:
CSS selector: td.es-p15b a
- td – odkazuje na tag <td>, ve kterém je text nadpisu vložen
- es-p15b – je CSS styl použitý pro selekci, jasné (jednoznačné) definování místa v kódu. Můžete použít kterýkoli ze stylů, případně všechny. V tom případě je nutné je oddělit tečkou – tzn. zápis by vypadal takto: td.esd-block-text.es-p15b.es-m-txt-c a
- a – odkazuje na element, do kterého má být hodnota URL vložena
Attribute: href – říká, že odkaz má být vložen do atributu “href” v tagu <a> (viz výše)
Tlačítko:
CSS selector: td.es-p10l a (případně celý zápis: td.esd-block-button.es-p10t.es-p10b.es-p10r.es-p10l a)
Attribute: href
U této proměnné není karta „External“ k dispozici, protože ve skutečnosti je odkaz na samotný web zdrojem vyhledávání dat.
Proměnná b_title (Nadpis)
Začneme pravidlem získání textu nadpisu na kartě „External“ –> otevřete webovou stránku s článkem, najeďte kurzorem na text nadpisu a pravým tlačítkem vyvolejte menu pro “Inspect mód” (v Chromu můžete použít kombinaci kláves Ctrl+Shift+I) –> otevře se konzole, ze které můžete vyčíst selektory CSS s atributy.
V tomto případě je pravidlo pro získání nadpisu v kartě External následující:
CSS selector: h1
Attribute: necháme prázdný
Na kartě Internal nastavíme:
CSS selector: td.es-p15b h3 a
Attribute: necháme prázdný
Díky tomuto pravidlu bude výsledná hodnota textu nadpisu použita v tagu <a>, který je ohraničen tagem <h3>.
Proměnná b_description (text článku)
Princip je stejný jako u předchozí proměnné.
Karta External:
CSS selector: p.text-intro
Attribute: necháme prázdný
Na kartě Internal nastavíme:
CSS selector: p.p-desc
Attribute: necháme prázdný
Díky tomuto pravidlu bude výsledná hodnota textu článku použita v tagu <p>.
Nyní máme celý smart element připravený a můžeme do něj stáhnout data z webu. Stačí vložit link článku do pole “Link”:
Kromě smart elementu se texty propíší také do tabulky Data –> Appearence. Zde si případně můžete upravit jejich délku. Pokud budete chtít načíst původní data, stačí znovu načíst link.
Zkracování textu může probíhat také automaticky – např. pokud bychom chtěli, aby se perex článku vždy zkrátil na 200 znaků, stačí v nastavení karty External proměnné b_description přidat modifikátor (.{0,200})(.{0,}) a do pole “Replacement” doplnit $1 a případně znovu načíst link článku. Text se zkrátí na požadovanou délku.
Kromě externích zdrojů můžete využít i datové zdroje importované do Mailkitu, tedy konkrétně produktové zdroje.
Mezi produktovými a externími zdroji lze přepnout tlačítky Moje údaje/Web, kde Moje údaje znamená datový zdroj a Web znamená externí zdroj.
Pro výběr zdroje klikněte na tlačítko Procházet.
V následujícím dialogu vyberte konkrétní datový zdroj a zadejte slovo, podle kterého chcete vyhledávat. Aby začalo vyhledávání, je nutné zadat nejméně 3 znaky.
Systém vyhledává ve všech polích a s každým dalším znakem výběr zužuje. V našem příkladu hledáme podle ITEM_ID. Konkrétní produkt zvolíme tlačítkem Choose.
Nyní je možné nastavit konfiguraci tak, jak je popsáno výše, do pole Proměnná zadejte název sloupce z datového zdroje.
Interní CSS selektor a atribut (z HTML kódu šablony) nastavte stejně jako v případě externího (webového) zdroje.
