AMP for email entered the innovations game in 2018 and was officially introduced by Google in April 2019. Being relatively new technology, there is not a lot of documentation available yet. However, a lot of recommendations here are based on our personal experience that we gained during the development of AMP Email Magento 2 Extension.
In this post, we gathered all the required information that can be useful for those who want to start building dynamic emails and implement AMP mail into the business strategy. You can find out about AMP for email requirements and structure, explore the main steps of technology validation and learn how to test AMP for email in different ways. So, before jumping into the details of AMP email testing, check out the following example to see what dynamic email looks like.
AMP for Email Example
AMP for Email Free Template
The following code represents the markup used in our test email message:
AMP for Email Live Preview
Here is how our AMP email example will look in Gmail or other email clients:
Your browser does not support iframes.
AMP for Email Requirements
An efficient AMP email consists of the components that help you implement the technology on your website:
#1 Must-Have Email Markup
There is a list of critical components and tags to be included in the AMP email:
- begin with the doctype <!doctype html>.
- add a top-level <html ⚡4email> tag, however <html amp4email>is also accepted;
- include <head> and <body> tags which are optional tags in HTML;
- use <meta charset=”utf-8″> tag as the first child of their head tag.
- obtain <script async src=”https://cdn.ampproject.org/v0.js“></script> tag in the head tag;
#2 Required Email Structure
AMP for Email follows all Google specifications by adding a new Email MIME part with a content type of text/x-amp-html. In other words, the AMP email is structured as a MIME tree which includes the message body and any attachments to email. To learn more information about the email design, check out the article “Structure and rendering of AMP emails” for useful insights. Explore the following visual to get an idea on how AMP for email is structured:
#3 Supported AMP Email Components
The AMP HTML library offers a basic runtime which provides the key AMP features to your website page. Since AMP is based on the AMP components, you can include one or more to your AMP email. They are divided into different groups:
- Dynamic Content
- amp-bind and <amp-bind-macro>
- <template type=”amp-mustache”>
- layout attributes
#4 HTML and CSS Requirements
Apart from AMP components, there are a number of HTML tags and CSS features that can be added to AMP email structure. You can find more information here:
#5 AMP for Gmail: Specific Standards
While AMP for Email standards should be followed by all email providers, Gmail decided to add a couple of its own requirements. This includes Gmail’s proxy assertion tokens, and Gmail security requirements.
AMP Email Validation
So, after you have created an AMP email, it is important to check if the code meets AMP for email specifications. In order to avoid missing any details while building AMP email, Google offers several ways to perform an AMP verification.
Validate AMP Email Via Google Web-based Validator
The official AMP email website offers you use of a web-based validator that supports the AMP for email platform. Consider the following steps to complete the checks:
- Go to https://validator.ampproject.org/#htmlFormat=AMP4EMAIL
- Make sure that “AMP4EMAIL” format is selected in the top-right corner.
- Copy your AMP email content and paste it into the validator.
- Make sure that everything looks good. If your AMP email meets all requirements, the validation status will be “PASS.” Otherwise, if there are any issues, the validator will flag the errors directly inline and show the validation status “FAIL” on the bottom of the page.
Validate AMP Email Via Command-Line
In some cases you may want to use the command line tool to validate the AMP code. The following tool is universal, it can be used for both: AMP pages and AMP Emails. Keep in mind – if your AMP email code is not valid, Google will display a fallback HTML version or Plain Text version of the email instead. Therefore, it’s important to check if your emails are valid before they are sent. This command line tool is very useful during the automated testing process or when building interfaces that can validate your AMP Email code right before it’s sent.
Follow these steps to test your AMP Email code for errors using the command line:
- Make sure you have Node.js with its package manager ‘npm’ installed.
- Install the AMP HTML validator command line tool by running the following command:
npm install -g amphtml-validator
- Now, you are ready to test your AMP Email. Run the following command after replacing <amphtml-file> with your file containing the AMP Email content.
amphtml-validator --html_format AMP4EMAIL <amphtml-file>
If the email is valid the command-line tool will result in a “PASS”:
If invalid, it will return with the errors it found:
AMP Email Delivery Requirements
In order to successfully deliver AMP email to any account, the next conditions should be taken into consideration:
- make sure your AMP email meets AMP for Email security requirements;
- check whether your email includes an AMP MIME part (text/x-amp-html) together with a fallback HTML version (text/html) or plain text version (text/plain). The fallback version is required in situations when the AMP MIME part can’t be displayed due to various reasons. To be more specific, the AMP version can be invalid, the mail client is offline or 30+ days have passed after the email was received by your email client (Gmail, Mail.ru, Outlook, etc.).
- ensure that the valid AMP document is added inside the AMP MIME part.
- check if AMP MIME is placed before the HTML MIME part. In other words, the order of the MIME parts in your AMP emails should be: TEXT MIME Part, followed by the AMP MIME part and lastly the HTML MIME part. See the required email structure above.
- ensure the AMP MIME part does not exceed 100KB.
Testing AMP Emails
Test AMP Emails in Gmail Development Mode
Now, when all the AMP email development aspects are behind you, the next task is to test whether the AMP email works properly and includes all required components. Please follow these two steps to try out the contents and behavior of AMP email in Gmail:
- Go to Gmail and follow the path Settings > General > Dynamic email. Then, press Developer settings. In the popup window, you can whitelist the email addresses that are used to send the AMP emails to your inbox during development. For the purpose of this example, we will whitelist Google’s testing email: “firstname.lastname@example.org”, but you can specify any custom email sender you want. This development mode in GMAIL enables you to test the AMP functionality of your interactive emails before applying for production mode (we will talk about this below).
- Now, navigate to Gmail’s AMP for Email Playground. The tool offers you to draft and preview your dynamic email messages. While on this page, select the “
” example in the top-right corner. After that, send yourself a test AMP email to your Gmail inbox by clicking the “Send” button on the bottom of the page.
Now go back to your GMail account to see the AMP Email delivered to your Inbox. If everything was done properly, your AMP Email will look as shown below:
Lastly, let’s look at the AMP email code delivered to your GMail Inbox. Click on the “3 dots” in the top right corner -> “Show Original”
Here is how the original message containing the AMP MIME type looks:
Test AMP Emails in Gmail Production Mode
After AMP for email testing is completed, there is one more step to complete before launching and sending your dynamic emails to clients. Without this step all your AMP Emails, sent to clients will be displayed in HTML or TEXT format instead. Therefore, please make sure to follow the instructions to register your AMP email with Google:
- Go through this registration guidelines and check all requirements.
- Send real, production-ready email to email@example.com. The email should be sent from your production servers. Also, take into account the next information while sending your AMP email:
- send emails directly. Do not forward the emails since AMP MIME parts will be removed by Gmail while forwarding.
- ensure your email meets all AMP requirements by testing it and fix the issues if there are any before sending the message
Note, Google will not accept your registration application due to the following circumstances:
- when your amp email was not sent for whitelist to the email mentioned above;
- if you send a test (blank) or “Hello World” email;
- if you send an email without an AMP MIME part.
3. Finally, fill out the registration form and wait for confirmation.
Note, if you are not a Google customer yet, dynamic emails that are whitelisted and have been sent to your account will be rendered anyway.
Supported Email Service Providers (ESP)
The following Email providers currently support AMP Email format:
- Mail.ru just launched support of AMP Emails. You can check Mail.ru requirements, test emails in their playground or go to their help center for more info.
- Outlook.com (coming soon)
- Yahoo.com (coming soon)
Where to get help?
In case you have any questions regarding the creation of AMP email, as well as its implementation and usage, you can check out the following information:
- The Google AMP Email team offers multiple channels where you can ask for help when building AMP Emails. If you need help with AMP Email – go to this page -https://developers.google.com/gmail/ampemail/support. Otherwise if you are looking for help with AMP technology in general, then go to the official AMP support page – https://amp.dev/support/.
- All Plumrocket customers who purchased AMP Email Magento 2 extension, can request tech support on our support page – https://store.plumrocket.com/contacts/.
Implementing AMP emails into your business strategy doesn’t just mean stay up-to-date, it also offers business owners the opportunity to improve customer experience and boost sales. However, if you build the dynamic emails incorrectly, you might not reach the desired results. In order to make sure you have created an efficient AMP email, it is important to know the structure requirements of AMP email, as well as the pivotal steps of testing the technology. So, take all the above-mentioned suggestions into consideration and learn how to test AMP email quickly and accurately.