PodporaZnalostní báze

Smart elementy

Co jsou smart-elementy a jak je používat, abyste ušetřili čas při tvorbě vašich newsletterů.

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 obvykle 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” elemetu - 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 . Pro usnadnění použití se po kliknutí na ikonu pro přidání zobrazí seznam nejoblíbenějších proměnných pro produktové bloky či blogy. Jakmile aktivujeme smart element pro jakýkoli objekt, ve výchozím nastavení se vytvoří proměnná URL, kterou nelze odstranit.

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. Existují také ovládací prvky, které umožňují převádět hodnotu získanou pomocí regulárních výrazů nebo použitím různých typů formátování.

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 ulož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é (jednozanč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ě může opět být 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čí opět 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 nastavit 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.