Mailmodo: Twórz interaktywne e-maile za pomocą AMP, aby zwiększyć zaangażowanie
Nasze skrzynki odbiorcze są przepełnione okropnymi e-mailami… więc jeśli Twoja firma ma rozległą bazę subskrybentów i naprawdę ma nadzieję, że zwiększy współczynnik otwarć i kliknięć Twoich e-maili (CTR) w górę, interaktywność jest krytyczna. Jednym z rozwiązań, które buduje rozmach, jest wykorzystanie technologii Accelerated Mobile Page w HTML e-mail.
AMP na e-mail
Możliwość wykorzystania technologii AMP do tworzenia bardziej dynamicznych i interaktywnych treści wiadomości e-mail to ogromny postęp w technologii poczty e-mail. AMP dla poczty e-mail to nie to samo, co zwykłe AMP dla stron internetowych, i istnieją pewne ograniczenia dotyczące tego, co można zrobić w e-mailu (np. wideo i audio nie są obecnie obsługiwane).
Obsługa AMP w poczcie e-mail nie jest powszechnie dostępna we wszystkich klientach poczty e-mail, ale jest obsługiwana przez niektórych głównych klientów poczty, takich jak gmail, Outlook.com, Poczta Yahoo!. Należy również pamiętać, że nawet jeśli klient poczty obsługuje AMP, może nie być domyślnie włączony lub może wymagać od odbiorcy podjęcia pewnych działań w celu włączenia go.
AMP dla poczty e-mail działa, udostępniając zestaw gotowych komponentów, których można użyć do tworzenia interaktywnych i dynamicznych treści wiadomości e-mail. Te komponenty obejmują takie elementy, jak formularze, quizy, karuzele obrazów i inne, i można ich używać do tworzenia angażujących i interaktywnych wiadomości e-mail, które zapewniają odbiorcom lepszą obsługę.
Przykładowy e-mail w formacie AMP HTML
Oto przykład e-maila AMP, który zawiera formularz subskrypcji. Pamiętaj, że osadzone skrypty NIE są uwzględniane podczas wysyłania tego e-maila, służą jedynie do tworzenia i testowania rozwiązania poza platformą e-mail marketingu.
<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp4email>
.subscribe-form {
display: none;
}
</style>
</head>
<body>
<amp-img src="https://example.com/amp-header.jpg" alt="Header image"></amp-img>
<div amp4email>
<p>Please enable AMP for Email to view this content.</p>
</div>
<form method="post"
action-xhr="https://example.com/subscribe"
target="_top"
class="subscribe-form"
id="subscribe-form"
novalidate
[submit-error]="errorMessage.show"
[submit-success]="successMessage.hide">
<h2>Subscribe to our newsletter</h2>
<label>
Email:
<input type="email"
name="email"
required>
</label>
<div submit-success>
<template type="amp-mustache">
Success! Thank you for subscribing.
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error: {{message}}
</template>
</div>
<input type="submit" value="Subscribe">
</form>
<amp4email fallback="https://example.com/non-amp-email.html">
<p>View the non-AMP version of this email.</p>
</amp4email>
</body>
</html>
Formularz wykorzystuje amp-form
element niestandardowy do obsługi przesyłania i sprawdzania poprawności formularza. Gdy użytkownik przesyła formularz, dane formularza są wysyłane na adres URL określony w pliku action-xhr
atrybut, który powinien być punktem końcowym serwera obsługującym przesyłanie formularza. w form
tag, dodaliśmy novalidate
atrybut, aby wyłączyć sprawdzanie poprawności formularza po stronie klienta, a my użyliśmy []
składnia, aby ustawić submit-success
i submit-error
szablony dynamicznie. The submit-success
i submit-error
sekcje definiują szablony, które są wyświetlane użytkownikowi odpowiednio, gdy wysłanie formularza zakończy się powodzeniem lub niepowodzeniem.
Zastępczy kod HTML, gdy nie ma obsługi AMP
Użytkownikom, którzy nie mają włączonego AMP lub używają klienta poczty e-mail, który go nie obsługuje, można udostępnić alternatywną treść. Aby to zrobić, możesz użyć tzw amp4email
atrybut, aby określić zastępczy adres URL wskazujący wersję e-maila inną niż AMP. W powyższym przykładzie widać zarówno tag stylu, który ukryje kod AMP HTML, jeśli nie jest obsługiwany, jak i zastępczy adres URL, pod którym można pobrać i wyświetlić zawartość HTML.
Mailmodo: marketing i automatyzacja e-maili AMP bez kodu
Mailmodo został zaprojektowany, aby pomóc Ci wykorzystać moc e-maili AMP do tworzenia lepszych doświadczeń użytkownika dzięki uproszczonej konfiguracji e-mail marketingu, dzięki czemu możesz zwiększyć zaangażowanie i współczynniki konwersji… niektóre bezpośrednio po wyjęciu ze skrzynki odbiorczej!
Funkcje Mailmodo obejmują:
- Łatwe i kodowanie bezpłatnych e-maili AMP – przeciągnij i upuść bloki AMP w WYSIWYG edytor do projektowania e-maili. Możesz spersonalizować treść dla każdego użytkownika, a nawet przesłać własny plik HTML lub inne fragmenty kodu.
- Automatyzacja poczty e-mail – Zautomatyzuj sekwencje kropelkowe w oparciu o zachowania użytkowników i dane rynkowe, aby wysyłać e-maile. Wizualny kreator podróży, który pomoże Ci zaprojektować mapy podróży użytkownika za pomocą przeciągania i upuszczania. Analizuj zachowania użytkowników i optymalizuj sekwencje kroplówek oraz mapy podróży.
- Wysoka dostarczalność – Wysyłaj masowe wiadomości e-mail za pomocą Mailmodo SMTP lub dodaj własną usługę dostawy. Integracje z AWS SES, SendGridlub Pepipost. Możesz także uzyskać zarządzane i dedykowane adresy IP.
- Automatycznie wyzwalaj e-maile transakcyjne – Automatycznie uruchamiaj wiadomości e-mail po działaniach użytkownika, takich jak rejestracja, zakup lub porzucenie koszyka. Możesz segmentować użytkowników na podstawie otwarć, kliknięć i zgłoszeń. Mailmodo umożliwia zarządzanie i aktualizowanie wszystkich przejściowych wiadomości e-mail bezpośrednio na ich platformie.
- Wszystkie raporty na jednym pulpicie nawigacyjnym – wizualizuj otwarcia, kliknięcia, rezygnacje z subskrypcji, przesłania i testy A/B wiersza tematu, z możliwością eksportu wszystkich danych w formacie CSV.
Produktywne integracje z zewnętrznym e-commerce, zarządzanie relacjami z klientami (CRM), dostępne są również inne platformy… w tym Shopify, Salesforce, Zaangażuj, rdzeń netto, SprytnyDotknij, Pipedrive, WebZaangażowanieI więcej.
Zarejestruj się w Mailmodo za darmo!
Ujawnienie: Martech Zone jest podmiotem stowarzyszonym Mailmodo i używamy linków partnerskich w całym tym artykule.