TechBlog - wszystkie artykuły

AMP Email, czyli strony internetowe w skrzynce pocztowej

W jednym z wcześniejszych naszych artykułów pisaliśmy już o AMP (Accelerated Mobile Pages).  Przypomnijmy, że jest to projekt Open Source Google, skoncentrowany na poprawieniu szybkości ładowania stron na urządzeniach mobilnych. I chociaż jesteśmy świadkami coraz większej dynamiki rozwoju technologii front-end, to niestety e-mail marketing dalej opiera się na przestarzałych znacznikach HTML i okrojonych stylach. Twórcy AMP postanowili jednak to zmienić i na początku 2018 roku ogłosili nowy projekt AMP Email.




Jak działa AMP Email ?

Wysyłając wiadomości e-mail przez ESP (Email Sending Provider)  używane są 2 typy MIME (Multipurpose Internet Mail Extensions) . Zazwyczaj pierwszy buduje się za pomocą wbudowanego konstruktora wiadomości e-mail lub niestandardowego kodu, a drugi jest tworzony automatycznie. Wysyłając za pomocą Gmaila lub innych klientów, możesz łatwo przełączać się między trybem HTML a zwykłym tekstem i wykorzystywać to, co uznasz za odpowiednie. W przypadku wiadomości e-mail opartych na technologii AMP musisz dodać trzeci typ MIME do wiadomości e-mail. Jest to możliwe tylko wtedy, gdy Twój dostawca usług e-mail (ESP) oferuje wsparcie. 


Co wprowadza AMP Email? 

1. Interaktywność

Newslettery, które otrzymujemy z przeróżnych źródeł łączy wspólna cecha, są to treści statyczne. Użytkownik może co najwyżej kliknąć w przycisk, który przekieruje go na stronę kontaktową z formularzem. Dzięki AMP to się zmienia. Subskrybent po otrzymaniu wiadomości może np.:

  • niezwłocznie wypełnić formularz w swojej skrzynce pocztowej i złożyć zamówienie
  • wypełnić i przesłać ankietę
  • ocenić produkt i wystawić opinie 

2 Dynamika

Stara technologia, e-mail, zaczęła już wyglądać na nieco przestarzałą. AMP wnosi odświeżenie i  dostarcza subskrybentom wiadomości e-mail, łudząco przypominające strony internetowe.  Zawierają one takie elementy, jak: karuzele, formularze,  animacje, akordeony, zaproszenia na wydarzenia. Subskrybent otwierający swoją skrzynkę pocztową może być zaskoczony nową formą maila i chętniej się z nim zapozna.

Tworzenie wiadomość e-mail z AMP

AMP znacznie rozszerza możliwości kreowania mailingów. Wprowadzając nowe komponenty, takie jak: 

  • amp-akordeon  - element interfejsu użytkownika, który ułatwia wyświetlanie / ukrywanie różnych sekcji. Wykorzystywany m.in. do tworzenia FAQ.
  • amp-carousel - składnik interfejsu użytkownika karuzeli.
  • amp-sidebar - nawigacja położona w bocznym pasku.
  • amp-image-lightbox - lightbox do przechowywania obrazów.
  • amp-fit-text - komponent pomocniczy do dopasowania tekstu w określonym obszarze.
  • amp-timeago zapewnia wygodny sposób renderowania znaczników czasu.
  • amp-img - składnik AMP, który zastępuje „image”.
  • amp-anim osadza pliki GIF.



Przykład kodu źródłowego e-maila w technologii AMP Email



Zainteresował Cie ten artykuł?

Oferujemy profesjonalne wsparcie programistów w technologii WEB - napisz do nas!


Programiści i twórcy wiadomości HTML nie muszą jednak się obawiać nowej technologii. Mimo iż AMP wprowadza mnóstwo nowych znaczników i reguł, z którymi trzeba się zapoznać, to dostarcza również narzędzia, które są w tym bardzo pomocne:

Strona internetowa, która pokazuje praktyczne rozwiązania popularnych problemów, które występują podczas tworzenia wiadomości HTML i przykłady zastosowania danych komponentów AMP.

2. Validator AMP

Rozszerzenie do Chrome, które ułatwi debugowanie szablonu.

3. Dokumentacja AMP EMAIL

4. AMP Playground

Środowisko do tworzenia i testowania własnych szablonów wiadomości.