How to Create and Test AMP for Email?

How to Create and Test AMP for Email?

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

AMP for Email Free Template

The following code represents the markup used in our test email message:

<!doctype html>
<html ⚡4email>
<head>
 <meta charset="utf-8">
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
 <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
 <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
 <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 <style amp4email-boilerplate>
 body{visibility:hidden}
 </style>
 <style amp-custom>
 body {
 font-family: Arial, sans-serif;
 }
 .container {
 max-width: 600px;
 margin: 0 auto;
 box-sizing: border-box;
 padding: 10px;
 }
 .introduction__welcome {
 font-size: 20px;
 }
 .title {
 text-align: center;
 text-transform: uppercase;
 }
 .products {
 display: flex;
 align-items: center;
 height: 100px;
 box-shadow: 0 1px 0 rgba(0,0,0,0.10);
 background: #fff;
 border-radius: 2px;
 margin-bottom: 15px;
 padding-bottom: 5px;
 position: relative;
 }
 .products amp-img {
 float: left;
 margin-right: 16px;
 }
 .benefits,
 .best-sellers,
 .review {
 margin-top: 45px;
 }
 .benefits__title {
 position: relative;
 padding: 8px 3px;
 background-color: #fff;
 font-size: 18px;
 border-width:1px 0 1px 0;
 color:#7d7d7d;
 font-weight: 400;
 }
 .benefits__title::after {
 content: "";
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 border-top: 7px solid;
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 }
 .best-sellers__list {
 padding: 0 50px;
 }
 .rating {
 --star-size: 3; /* use CSS variables to calculate dependent dimensions later */
 padding: 0; /* to prevent flicker when mousing over padding */
 border: none; /* to prevent flicker when mousing over border */
 unicode-bidi: bidi-override; direction: rtl; /* for CSS-only style change on hover */
 text-align: left; /* revert the RTL direction */
 user-select: none; /* disable mouse/touch selection */
 font-size: 3em; /* fallback - IE doesn't support CSS variables */
 font-size: calc(var(--star-size) * 1em); /* because `var(--star-size)em` would be too good to be true */
 cursor: pointer;
 /* disable touch feedback on cursor: pointer - http://stackoverflow.com/q/25704650/1269037 */
 -webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 margin-bottom: 1em;
 }
 /* the stars */
 .rating > label {
 display: inline-block;
 position: relative;
 width: 1.1em; /* magic number to overlap the radio buttons on top of the stars */
 width: calc(var(--star-size) / 3 * 1.1em);
 }
 .rating > *:hover,
 .rating > *:hover ~ label,
 .rating:not(:hover) > input:checked ~ label {
 color: transparent; /* reveal the contour/white star from the HTML markup */
 cursor: inherit; /* avoid a cursor transition from arrow/pointer to text selection */
 }
 .rating > *:hover:before,
 .rating > *:hover ~ label:before,
 .rating:not(:hover) > input:checked ~ label:before {
 content: "★";
 position: absolute;
 color: gold;
 }
 .rating > input {
 position: relative;
 transform: scale(3); /* make the radio buttons big; they don't inherit font-size */
 transform: scale(var(--star-size));
 /* the magic numbers below correlate with the font-size */
 top: -0.5em; /* margin-top doesn't work */
 top: calc(var(--star-size) / 6 * -1em);
 margin-left: -2.5em; /* overlap the radio buttons exactly under the stars */
 margin-left: calc(var(--star-size) / 6 * -5em);
 z-index: 2; /* bring the button above the stars so it captures touches/clicks */
 opacity: 0; /* comment to see where the radio buttons are */
 font-size: initial; /* reset to default */
 }
 form.amp-form-submit-error [submit-error] {
 color: red;
 }
 .review {
 padding: 0 70px;
 padding-bottom: 20px;
 border: 1px solid #00000030;
 border-radius: 15px;
 }
 .review__form {
 display: flex;
 flex-direction: column;
 align-items: center;
 }
 .review__rating {
 text-align: center;
 }
 .products__button {
 min-width: 117px;
 }
 .products__button--checkout {
 display: none;
 }
 .amp-form-submit-success .review__initial-content,
 .amp-form-submit-success .products__button,
 .amp-form-submit-error .products__button,
 .amp-form-submitting .review__initial-content,
 .amp-form-submit-error .review__initial-content {
 display: none;
 }
 .amp-form-submit-success .products__button--checkout {
 display: block;
 }
 .review__text {
 width: 100%;
 max-width: 438px;
 box-sizing: border-box;
 padding: 5px;
 }
 .btn {
 box-sizing: border-box;
 margin-top: 15px;
 padding: 10px 20px;
 text-align: center;
 font-size: 16px;
 color: #fff;
 background-color: #3776de;
 border: none;
 transition: 0.2s;
 border-radius: 5px;
 text-decoration: none;
 }
 .btn--checkout {
 background-color: orange;
 }
 .btn_center {text-align:center;}
 .btn:hover {
 opacity: 0.9;
 }
 .btn:active {
 opacity: 0.8;
 }
 .review__submit {
 width: 100%;
 }
 .star {
 color: gold;
 }
 .price {
 font-weight: 700;
 }
 .benefits__content {
 margin-bottom: 10px;
 padding: 5px 3px;
 border: 1px solid #dfdfdf;
 border-top: none;
 }
 .benefits__content p {
 margin: 0;
 }
 .products__form {
 margin-left: auto;
 }
 .submit-success__star {
 text-align: center;
 }
 .submit-success {
 text-align: center;
 }
 .submit-success__text {
 margin-top: 10px;
 }
 </style>
</head>
<body>
 <div class="container">
 <header>
 <a class="logo" href="https://store.plumrocket.com/">
 <amp-img width="200" height="66" src="https://www.plumrocket.com/blog/wp-content/uploads/2019/09/logo_luma.png" alt="Luma">
 </amp-img>
 </a>
 </header>
 <main>
 <div class="introduction">
 <p class="introduction__welcome">Hello <span>John Doe</span></p>
 <p class="introduction__text">
 As a Team Lume member you'll get loads of new and inspiration every week, and best of all: VIP access to our online sales and special subscriber-only offers! Enjoy!
 </p>
 </div>
 <div class="carousel">
 <amp-carousel width="580" height="250" layout="responsive" type="slides">
 <a href="https://demo2.plumrocket.net/amp-email/women/tops-women/hoodies-and-sweatshirts-women.html">
 <amp-img src="https://www.plumrocket.com/blog/wp-content/uploads/2019/09/1.jpg" width="580" height="250" alt="a sample image"></amp-img>
 </a>
 <a href="https://demo2.plumrocket.net/amp-email/women/tops-women/hoodies-and-sweatshirts-women.html">
 <amp-img src="https://www.plumrocket.com/blog/wp-content/uploads/2019/09/2.jpg" width="580" height="250" alt="a sample image"></amp-img>
 </a>
 <a href="https://demo2.plumrocket.net/amp-email/women/tops-women/hoodies-and-sweatshirts-women.html">
 <amp-img src="https://www.plumrocket.com/blog/wp-content/uploads/2019/09/3.jpg" width="580" height="250" alt="another sample image"></amp-img>
 </a>
 <a href="https://demo2.plumrocket.net/amp-email/women/tops-women/hoodies-and-sweatshirts-women.html">
 <amp-img src="https://www.plumrocket.com/blog/wp-content/uploads/2019/09/4.jpg" width="580" height="250" alt="another sample image"></amp-img>
 </a>
 <a href="https://demo2.plumrocket.net/amp-email/women/tops-women/hoodies-and-sweatshirts-women.html">
 <amp-img src="https://www.plumrocket.com/blog/wp-content/uploads/2019/09/5.jpg" width="580" height="250" alt="another sample image"></amp-img>
 </a>
 </amp-carousel>
 </div>
 <section class="benefits">
 <h2 class="title">Benefits of Registering an Account</h2>
 <amp-accordion>
 <section>
 <h4 class="benefits__title">Private Sale - Only-members!</h4>
 <div class="benefits__content">
 <p>As a Team Lume member you'll get loads of new and inspiration every week, and best of all: VIP access to our online sales and special subscriber-only offers! Enjoy!</p>
 </div>
 </section>
 <section>
 <h4 class="benefits__title">Free Delivery and Retuns!</h4>
 <div class="benefits__content">
 <div>Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer placerat dapibus sem. Duis rutrum tristique quam, et pulvinar urna. Praesent eget quam dui. Vivamus egestas posuere lorem, ut tempus magna aliquam et. Nulla eu sagittis mauris. Aliquam tincidunt id turpis sit amet consectetur. Phasellus sit amet dignissim felis. Quisque lobortis, eros scelerisque aliquet tincidunt, quam tellus pulvinar lorem, vitae porta nulla velit at turpis. Aliquam erat volutpat.</div>
 </div>
 </section>
 <section>
 <h4 class="benefits__title">Shop Now. Pay Later.</h4>
 <figure>
 <amp-img src="https://www.google.com/images/background/p1.jpg" width="600" height="339" layout="responsive" alt="an image"></amp-img>
 </figure>
 </section>
 </amp-accordion>
 </section>
 <section class="best-sellers">
 <h2 class="title">Our best sellers</h2>
 <div class="best-sellers__list">
 <amp-list id="amp-list-placeholder" noloading width="auto" height="500" layout="fixed-height" src="https://demo2.plumrocket.net/live/store/media/amp-email/amp_email_sample_api.php?action=get_products&page=1">
 <div placeholder>
 <ul class="results">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <template type="amp-mustache">
 <div class="products">
 <amp-img width="80" height="100" alt="{{name}}" src="{{img}}"></amp-img>
 <div>
 <p class="name">{{name}}</p>
 <p class="star">{{{stars}}}</p>
 <p class="price">${{price}}</p>
 </div>
 <form class="products__form" method="post" action-xhr="https://demo2.plumrocket.net/live/store/media/amp-email/amp_email_sample_api.php?action=add_to_cart">
 <input type="hidden" name="product_id" value="{{id}}">
 <button type="submit" class="btn products__button">Add to cart</button>
 <a href="https://store.plumrocket.com/amp-email-magento2-extension.html" class="btn btn--checkout products__button products__button--checkout">Checkout</a>
 <div submit-error>
 Something went wrong. Please try again.
 </div>
 </form>
 </div>
 </template>
 </amp-list>
 <div class="btn_center">
 <button class="btn btn--center" on="tap:amp-list-placeholder.refresh">Show more</button>
 </div>
 </div>
 </section>
 <section class="review">
 <h2 class="title">Please share your experience<br>with our store</h2>
 <form class="review__form" id="rating" method="post" action-xhr="https://demo2.plumrocket.net/live/store/media/amp-email/amp_email_sample_api.php?action=post_review">
 <div class="review__initial-content">
 <fieldset class="review__rating rating">
 <input name="rating" type="radio" id="rating5" value="5">
 <label for="rating5" title="5 stars">&#x2606;</label>
 <input name="rating" type="radio" id="rating4" value="4">
 <label for="rating4" title="4 stars">&#x2606;</label>
 <input name="rating" type="radio" id="rating3" value="3">
 <label for="rating3" title="3 stars">&#x2606;</label>
 <input name="rating" type="radio" id="rating2" value="2" checked="checked">
 <label for="rating2" title="2 stars">&#x2606;</label>
 <input name="rating" type="radio" id="rating1" value="1">
 <label for="rating1" title="1 stars">&#x2606;</label>
 </fieldset>
 <textarea name="message" class="review__text" cols="60" rows="10" placeholder="Write your review"></textarea>
 <button type="submit" class="btn review__submit">Submit</button>
 </div>
 <div class="submit-success" submit-success>
 <template type="amp-mustache">
 <div>{{message}}</div>
 <div class="star">{{{stars}}}</div>
 <div class="submit-success__text">{{review_message}}</div>
 </template>
 </div>
 </form>
 </section>
 </main>
 </div>
</body>
</html>

AMP for Email Live Preview

Here is how our AMP email example will look in Gmail or other email clients: 

 

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;
  • add amp4email boilerplate (<style amp4email-boilerplate>body{visibility:hidden}</style>) inside the head tag. This CSS style helps you hide the content until AMP JavaScript is loaded.  

Note, the size of AMPHTML markup should be up to 102,400 bytes. 

#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: 

amp-email-structure

 

#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-form>
    • <amp-selector>
    • amp-bind and <amp-bind-macro>
    • <amp-state>
    • <amp-list>
    • <template type=”amp-mustache”>
  • Layout
    • layout attributes
    • <amp-accordion>
    • <amp-carousel>
    • <amp-fit-text>
    • <amp-layout>
    • <amp-sidebar>
    • <amp-timeago>
  • Media
    • <amp-img>
    • <amp-anim>

#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.

validator-amp

 

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:

  1. Make sure you have Node.js with its package manager ‘npm’ installed.
  2. Install the AMP HTML validator command line tool by running the following command: 
    npm install -g amphtml-validator
    
  3. 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”:

valid-correct

If invalid, it will return with the errors it found:

valid-error

 

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:  

  1. 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: “amp@gmail.dev”, 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).

    gmail0
  2. 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.gmail1

 

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:

gmail2

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”

gmail3

Here is how the original message containing the AMP MIME type looks:

code2-final

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: 

  1. Go through this registration guidelines and check all requirements. 
  2. Send real, production-ready email to ampforemail.whitelisting@gmail.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.

amp-email-magento2

Supported Email Service Providers (ESP)

The following Email providers currently support AMP Email format:

  • Gmail.com
  • 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 AMP Email documentation can be found here.
  • 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: 

Summary

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.

Share: