Mailmodo: bouw interactieve e-mails met AMP om de betrokkenheid te vergroten
Onze inboxen lopen over van vreselijke e-mails... dus als uw bedrijf een uitgebreid abonneebestand heeft en echt hoopt uw e-mail te openen en doorklikpercentages (CTR) een tandje bijsteken, is interactiviteit van cruciaal belang. Een oplossing die momentum opbouwt, is het gebruik van Accelerated Mobile Page-technologie in HTML e-mail.
AMP voor e-mail
De mogelijkheid om AMP-technologie te gebruiken om meer dynamische en interactieve e-mailinhoud te creëren, is een enorme vooruitgang in e-mailtechnologie. AMP voor e-mail is niet hetzelfde als gewone AMP voor websites en er zijn enkele beperkingen voor wat er in e-mail kan worden gedaan (zo worden video en audio momenteel niet ondersteund).
AMP-ondersteuning in e-mail is niet algemeen beschikbaar voor alle e-mailclients, maar wordt ondersteund door enkele van de grote e-mailclients zoals Gmail, Outlook.com en Yahoo! Mail Plus,. Het is ook belangrijk op te merken dat zelfs als een e-mailclient AMP ondersteunt, deze mogelijk niet standaard is ingeschakeld of dat de ontvanger enige actie moet ondernemen om deze in te schakelen.
AMP voor e-mail werkt door een set vooraf gebouwde componenten te bieden die kunnen worden gebruikt om interactieve en dynamische e-mailinhoud te maken. Deze componenten omvatten zaken als formulieren, quizzen, afbeeldingscarrousels en meer, en ze kunnen worden gebruikt om boeiende en interactieve e-mails te maken die een betere gebruikerservaring bieden voor ontvangers.
Voorbeeld AMP HTML-e-mail
Hier is een voorbeeld van een AMP-e-mail met een abonnementsformulier. Houd er rekening mee dat de script-embeds NIET zijn inbegrepen bij het verzenden van deze e-mail, het is alleen voor het bouwen en testen van de oplossing buiten uw e-mailmarketingplatform.
<!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>Het formulier maakt gebruik van de amp-form aangepast element om het indienen en valideren van formulieren af te handelen. Wanneer de gebruiker het formulier indient, worden de formuliergegevens verzonden naar de URL die is opgegeven in het action-xhr attribuut, wat een servereindpunt zou moeten zijn dat de formulierverzending afhandelt. In de form tag, we hebben de toegevoegd novalidate attribuut om formuliervalidatie aan de clientzijde uit te schakelen, en we hebben de [] syntaxis om de submit-success en submit-error sjablonen dynamisch. De submit-success en submit-error secties definiëren sjablonen die aan de gebruiker worden getoond wanneer het indienen van het formulier respectievelijk slaagt of mislukt.
Fallback HTML wanneer er GEEN AMP-ondersteuning is
U kunt alternatieve inhoud aanbieden aan gebruikers die AMP niet hebben ingeschakeld of die een e-mailclient gebruiken die dit niet ondersteunt. Hiervoor kunt u de amp4email attribuut om een reserve-URL op te geven die verwijst naar een niet-AMP-versie van de e-mail. In het bovenstaande voorbeeld ziet u zowel een stijltag die de AMP HTML verbergt als deze niet wordt ondersteund, als een terugval-URL waar HTML-inhoud kan worden opgehaald en weergegeven.
Mailmodo: codevrije AMP e-mailmarketing en automatisering
Mailmodo is ontworpen om u te helpen de kracht van AMP-e-mails te benutten voor het creëren van een betere gebruikerservaring met een vereenvoudigde e-mailmarketingconfiguratie, zodat u de betrokkenheid en conversieratio's kunt verhogen... sommige rechtstreeks uit de inbox!
Mailmodo-functies omvatten:
- Eenvoudig en coderen Gratis AMP-e-mails – sleep AMP-blokken naar een WYSIWYG editor om e-mails te ontwerpen. U kunt de inhoud voor elke gebruiker personaliseren en zelfs uw eigen HTML-bestand of andere codefragmenten uploaden.
- Email Automation – Automatiseer druppelsequenties op basis van gebruikersgedrag en marktgegevens om e-mails te verzenden. Visuele reisbouwer om u te helpen gebruikersreiskaarten te ontwerpen met slepen en neerzetten. Analyseer gebruikersgedrag en optimaliseer infuussequenties en reiskaarten.
- Hoge afleverbaarheid - Verzend bulk-e-mails met Mailmodo's SMTP of voeg je eigen bezorgservice toe. Integraties met AWS SES, SendGridof Pepipost. U kunt ook beheerde en speciale IP's krijgen.
- Automatische activering van transactionele e-mails - Activeer e-mails automatisch door gebruikersactie zoals aanmelding, aankoop of verlaten winkelwagen. U kunt gebruikers segmenteren op basis van openen, klikken en inzendingen. Met Mailmodo kunt u al uw tijdelijke e-mails rechtstreeks op hun platform beheren en bijwerken.
- Alle rapportages op één dashboard - visualiseer openingen, klikken, afmeldingen, inzendingen en A/B-testen op de onderwerpregel, met de mogelijkheid om al uw gegevens in CSV-indeling te exporteren.
Geproductiseerde integraties met externe e-commerce, klantrelatiebeheer (CRM), en andere platforms zijn ook beschikbaar ... inclusief Shopify, Salesforce, MoEngage, netto kern, CleverTap, Pipedrive, WebEngageEn nog veel meer.
Meld u gratis aan voor Mailmodo!
Disclosure: Martech Zone is een filiaal van Mailmode en we gebruiken in dit artikel gelieerde links.
