Mailmodo: Bygg interaktive e-poster med AMP for å øke engasjementet
Innboksene våre er overfylte av forferdelige e-poster ... så hvis bedriften din har en omfattende abonnentbase og virkelig håper å få e-postens åpne og klikkfrekvens (CTR) opp et hakk, er interaktivitet avgjørende. En løsning som bygger momentum er bruken av Accelerated Mobile Page-teknologi i HTML e-post.
AMP for e-post
Muligheten til å bruke AMP-teknologi for å lage mer dynamisk og interaktivt e-postinnhold er et stort fremskritt innen e-postteknologi. AMP for e-post er ikke det samme som vanlig AMP for nettsteder, og det er noen begrensninger på hva som kan gjøres i e-post (f.eks. støttes ikke video og lyd for øyeblikket).
AMP-støtte i e-post er ikke allment tilgjengelig på tvers av alle e-postklienter, men den støttes av noen av de store e-postklientene som f.eks. Gmail, Outlook.comog Yahoo! Mail. Det er også viktig å merke seg at selv om en e-postklient støtter AMP, kan det hende at den ikke er aktivert som standard, eller at mottakeren må gjøre noe for å aktivere den.
AMP for e-post fungerer ved å tilby et sett med forhåndsbygde komponenter som kan brukes til å lage interaktivt og dynamisk e-postinnhold. Disse komponentene inkluderer ting som skjemaer, spørrekonkurranser, bildekaruseller og mer, og de kan brukes til å lage engasjerende og interaktive e-poster som gir en bedre brukeropplevelse for mottakerne.
Eksempel på AMP HTML-e-post
Her er et eksempel på en AMP-e-post som inneholder et abonnementsskjema. Vær oppmerksom på at skriptinnbyggingene IKKE er inkludert når du sender denne e-posten, det er kun for å bygge og teste løsningen utenfor din e-postmarkedsføringsplattform.
<!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>Skjemaet bruker amp-form tilpasset element for å håndtere skjemainnsending og validering. Når brukeren sender inn skjemaet, sendes skjemadataene til URL-en spesifisert i action-xhr attributt, som skal være et serverendepunkt som håndterer skjemainnsendingen. I form taggen har vi lagt til novalidate attributtet for å deaktivere skjemavalidering på klientsiden, og vi har brukt [] syntaks for å angi submit-success og submit-error maler dynamisk. De submit-success og submit-error seksjoner definerer maler som vises til brukeren når skjemainnsendingen lykkes eller mislykkes.
Reserve-HTML når det IKKE er AMP-støtte
Du kan tilby alternativt innhold for brukere som ikke har AMP aktivert eller som bruker en e-postklient som ikke støtter det. For å gjøre dette kan du bruke amp4email attributt for å spesifisere en reservenettadresse som peker til en ikke-AMP-versjon av e-posten. I eksemplet ovenfor kan du se både en stiltag som skjuler AMP HTML hvis den ikke støttes, samt en reservenettadresse der HTML-innhold kan hentes og vises.
Mailmodo: Kodefri AMP e-postmarkedsføring og automatisering
Mailmodo er designet for å hjelpe deg med å utnytte kraften til AMP-e-poster for å skape en bedre brukeropplevelse med et forenklet oppsett for e-postmarkedsføring, slik at du kan øke engasjementet og konverteringsfrekvensen … noen direkte ut av innboksen!
Mailmodo-funksjoner inkluderer:
- Enkel og koding av gratis AMP-e-poster – dra og slipp AMP-blokker i en WYSIWYG redaktør for å designe e-poster. Du kan tilpasse innholdet for hver bruker og til og med laste opp din egen HTML-fil eller andre kodebiter.
- E-postautomatisering – Automatiser dryppsekvenser basert på brukeratferd og markedsdata for å sende e-poster. Visuell reisebygger for å hjelpe deg med å designe brukerreisekart med dra og slipp. Analyser brukeratferd og optimaliser dryppsekvenser og reisekart.
- Høy leveringsevne – Send massee-poster med Mailmodo's SMTP eller legg til din egen leveringstjeneste. Integrasjoner med AWS SES, SendGrideller Pepipost. Du kan også få administrerte og dedikerte IP-er.
- Automatisk utløser transaksjonelle e-poster – Utløs e-post automatisk ved hjelp av brukerhandlinger som registrering, kjøp eller forlatelse av handlekurven. Du kan segmentere brukere basert på åpninger, klikk og innsendinger. Mailmodo lar deg administrere og oppdatere alle overgangs-e-postene dine direkte på deres plattform.
- Alle rapporter på ett enkelt dashbord – visualiser åpninger, klikk, avmeldinger, innsendinger og A/B-testing på emnelinjen, med muligheten til å eksportere alle dataene dine i CSV-format.
Produktiserte integrasjoner med ekstern e-handel, kundehåndtering (CRM), og andre plattformer er også tilgjengelige... inkludert Shopify, Salesforce, MoEngage, netto kjerne, CleverTap, Pipedrive, WebEngage, Og mer.
Registrer deg for Mailmodo gratis!
Avsløring: Martech Zone er tilknyttet Mailmodo og vi bruker tilknyttede lenker gjennom denne artikkelen.
