AMP editor - aplikace pro podporu dynamických emailů

Aplikace, kterou jsem vytvářel v rámci své diplomové práce. Umožňuje uživatelům tvorbu a rozeslání interaktivních e-mailů, které pro příjemce atraktivní budou. Pro dosažení interakcí mezi příjemcem a e-mailem je využita technologie AMP od společnosti Google. Pomocí této technologie lze neatraktivní newslettery oživit dynamickými prvky, jako jsou galerie obrázků, formuláře, skládané seznamy nebo třeba časovače.

Rozhraní AMP editoru

Co jsem na projektu řešil?

  1. Analýza požadavků a návrh platformy
  2. Návrh databáze (MySql)
  3. Implementace frontendu (Vue.js)
  4. Implementace backendu (PHP)
  5. Integrace ESP služby
  6. Deployment
  7. Uživatelské testování

Jak to funguje?

AMP je technologie od Googlu postavená na předpřipravených komponentách, která původně měla sloužit pro zrychlení webových stránek. Když se ukázalo, že to není správná cesta, rozhodl se ji Google zkusit využít v aplikaci Gmail, kde by běžným marketingovým newsletterům zajišťovala interaktivitu s uživatelem, což by vedlo ke zvýšení konverzí.

V rámci multipart/alternative je tedy kromě plain text a HTML verze možné Gmailu poslat i AMP verzi, kterou ve webovém klientovi vykreslí jako dynamický e-mail. AMP kód může vypadat například takto:

<amp-carousel
  width="450"
  height="300"
  layout="responsive"
  type="slides"
  role="region"
  aria-label="Basic carousel"
>
  <amp-img
    src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"
  ></amp-img>
</amp-carousel>

Samotný editor funguje tak, že si uživatel kliká požadované bloky e-mailu a jejich atributy, které mu aplikace vykresluje v klasickém webovém kódu. Veškeré nastavené hodnoty se následně předávají na backend, kde se z nich skládají tři výše zmíněné verze e-mailu a ty se pomocí integrovaného ESP dají rozeslat na seznam importovaných kontaktů.

Zdrojový kód aplikace k dispozici na mém Githubu.
Kompletní text diplomové práce je dostupný zde.