AMP, however fascinating, is no piece of cake, at least as far as email marketing is concerned. While there are a number of ESPs that support AMP, you need strong development expertise at your disposal. But if done correctly, it can double your sales, and, equally importantly, turbo-charge customer experience (CX).
We have implemented AMP emails for brands, but requirements have traditionally been sparse.
Nonetheless, the potential for AMP is colossal, to say the least. In this guide, you’ll get a peek into AMP implementation and a few use cases where email campaigns can benefit from this.
So, let’s get started with how to implement the technology.
Implementing AMP in Email
Implementation can be tricky. You must go through the following steps:
- Choose an ESP that supports AMP
- Get your domain whitelisted
- Create the AMP email and its HTML fallback
Let’s consider each of these steps in detail.
1. Choose the Right ESP
Currently, support for AMP is limited. It’s still a new technology, and marketers as well as customers aren’t keen.
“Among those ESPs who don’t support the standard, 71% said the biggest reason is a lack of interest in AMP for email by their customers. The ESPC members whose platforms support AMP for email said that less than 5% of their customers routinely send messages that use AMP for email, which certainly supports the claims by the non-supporters that interest from marketers is low,” reveals Chad S. White, noted email marketing expert.
Still, quite a number of platforms do support AMP. These include:
- Adobe Campaign Classic
- Amazon Pinpoint
- Amazon Simple Email Service (SES)
- AWeber
- Blueshift
- Braze
- Cheetah Digital
- Clang
- Copernica
- Customer.io
- dotdigital
- Elastic Email
- eSputnik
- ExpertSender
- ExpressPigeon
- Iterable
- Klaviyo
- MagNews
- Mailmodo
- Mailrelay
- Mapp Cloud
- Maileon
- Mailgun
- Mailkit
- MessageGears
- MindBox
- MoonMail
- Netcore Cloud
- Salesforce Marketing Cloud
- SendPulse
- SocketLabs
- SparkPost
- Stripo
- Tripolis
- Twilio Send
However, when it comes to email clients, only these support AMP technology:
- AOL Mail
- FairEmail
- Gmail
- Mail.ru
- Yahoo Mail
The absence of Apple Mail is conspicuous. As Chad also points out, “Support for AMP for email by inbox providers in the US is low. Microsoft piloted AMP for email after its launch, but shortly thereafter halted it. But the more important holdout is Apple, whose Mail app is used to open the majority of emails in the US.”
Related post: 9 Platforms for the Best Responsive Email Marketing Templates
2. Get Your Domain Whitelisted
You need to make sure that your domain name and email address comply with the criteria set by your ESP. Additionally, your domain name should be SPF, DMARC, and DKIM-configured.
Below are a couple of reasons why whitelisting is crucial:
- Security and trust: Whitelisting verifies sender authenticity, and ensures the recipient that the email is safe.
- Deliverability: In the absence of whitelisting, email clients may treat your emails suspiciously, routing them to spam.
AMP emails are especially high-risk. From phishing attacks to URL obfuscation to Google Analytics abuse, the concerns are varied.
“Often embedded in phishing emails that impersonate well-known brands, threat actors aim to undermine the ‘hover’ technique taught in most security awareness training programs. By displaying a legitimate AMP link from trusted organizations like TikTok, Google, or Instagram, they reduce recipients’ suspicion about the true destination of the link,” reports James Dyer at Egress.
In fact, check out the following AMP email attack trend in 2024.
3. Create Two Email Versions
Since support is limited, you’ll need to create two versions of your AMP email: the AMP version and the HTML fallback.
This is where things get fairly complicated. Coding AMP emails is tricky, requiring advanced-level development expertise. You’ll have to use specific AMP components and libraries. AMP has its own syntax and coding rules, which are markedly different from your traditional HTML script. Not to mention the persistent challenge of ensuring client compatibility, and passing validation checks.
Our recommendation would be to hire a strong developer, or get in touch with a development team. A solid understanding of HTML, CSS, and JavaScript is non-negotiable.
AMP in Email: 5 Examples
Let’s take a look at 1o common examples of AMP in email.
1. Interactive Carousels
One of the most popular uses of AMP in email is carousels. You can use it for any piece of content, though it’s typically used for interactive product cards, such as this email from KFC.
There are different ways of implementing it. Here are three:
- You can display a list of product images as a continuous strip by using type=“carousel”
- Show the products in the form of slides by using type=“slides”
- Set the carousel to autoplay, needing no user interaction. The images will change every 5 seconds.
2. Interactive Polls
You can create interactive polls to gather feedback from subscribers without requiring them to quit the inbox.
Consider the following dynamic module in a Huggies email.
Related post: 7 Creative Ideas for Interactive Email Templates
3. Interactive Lightbox
The lightbox component is used to expand an element or section across the viewport of an email in response to user action.
The expanded state will not end unless the user wants it to. Take a look at the following code snippet.
<amp-lightbox id="my-lightbox" layout="nodisplay">
<div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0">
<h1>Hello World!</h1>
</div>
</amp-lightbox>
<button on="tap:my-lightbox">
Open lightbox
</button>The lightbox is displayed when the user clicks on an element in the email that has an “on” attribute. This targets the id of the lightbox element, resulting in the expanded view.
4. Mustache Component
Mustache is a component within AMP that is chiefly used to insert personalized content dynamically. For example, order confirmation or transactional emails update as per user behavior.
Consider the following piece of code for one such email.
<p>Hi {{ user.name }},</p>
<p>Your recent order of {{ order.items }} is ready for pickup!</p>Those placeholders will dynamically populate with the customer’s name and their order details. Keep in mind that amp-mustache works in tandem with other amp components which furnish the data.
5. Event Reminders, Countdowns
You can create event-reminder emails by using amp-timeago. This is an AMP component for displaying timestamps. Jeffrey Jose, Product Manager at Google, has identified the below use cases for amp-timeago:
- Future dates
- Cutoff times
- Localized modules
- Past dates
For example, take cutoff times.
An e-commerce brand sends a flash sale email for a limited number of days, after which the timer stops or displays zeroes. In the following code snippet, if the time at which email is opened is more than 24 hours (the cut off is set to 86400 seconds), the phrase “Sale Ended” will be shown. Else, the remaining time is displayed.
<!DOCTYPE html>
<html amp4email>
<head>
<meta charset="utf-8">
<style amp4email-boilerplate>body{visibility:hidden}</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-timeago" src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"></script>
</head>
<body>
<p>Flash Sale Ending Soon!</p>
<p>Time Remaining:
<amp-timeago
width="160"
height="20"
datetime="2024-10-27T18:00:00Z" locale="en"
cutoff="86400" >
Sale Ended
</amp-timeago>
</p>
<p>Don't miss out on these amazing deals!</p>
</body>
</html>
The use of seconds is important because second-level granularity ensures precision and accurate calculation.
Wrapping Up!
Clearly, AMP for email is tricky. If you can leverage it from time to time in one-off campaigns, though, it does boost engagement.
Adoption is tardy, marketers are indifferent, and customers are still ignorant of this technology in the context of email. Still, you can experiment with AMP emails and enrich subscriber experience. The good news is that we can help you with AMP emails. At Email Mavlers, our flawless interactive email templates have helped clients capture attention, boost engagement, and deliver the punch your messaging needs. So feel free to get in touch with our design and dev team!
Susmit Panda - Content writer
