The Complete Guide to
AMPpowered
Dynamic Emails in Gmail

On 26th March 2019, Google officially launched AMP (Accelerated Mobile Pages) HTML email and since then there has been a lot of buzz around it. It is an open source technology by Google that has paved a way for interactivity and sending dynamic emails to the subscribers.

So, what exactly is AMP?

AMP is a framework created from HTML, CSS, and JavaScript that enables you to build a lightweight email with shorter loading time. If you want to design an email with a classy subscriber experience, AMP is the best option for you.

Benefits of AMP

Be it carousels, responsive form elements, or retrieving new content from remote endpoints, the AMPHTML Email format offers a subset of AMPHTML components to use in email messages. Subsequently, the email recipients can interact with the content directly, like fill a form, RSVP to an event, or respond to a survey from within the email.

Pre-Requisites of Sending an
AMP email

How to Register with Google to send Dynamic Emails?

Once you are all set to roll out the dynamic emails to the users, you will have to register with Google as described below.

  • Send a real-life email from the production servers or a server with similar
    DKIM/SPF/From:/Return-Path: headers to ampforemail.whitelisting@gmail.com. It should also include the dynamic email MIME part.
  • Before sending the email, check whether the AMP version of the email is correct with the help of AMP validator and playground.
  • Do not forward the email because Gmail removes AMP MIME parts from a forwarded email.
  • Once you send the email, fill the registration form and wait for Google’s response.
  • Note that if you do not send the email for review, send a blank or test email or an email without AMP MIME part, Google will not accept the registration application.
Guidelines to Register
  • Use DKIM and SPF to authenticate the email address.
  • All the outgoing XMLHttpRequests (XHRs) from the dynamic email (like <amp-list> or <amp-form>) should be targeted to the same Zone like your From: email address. Let’s say you are sending emails from no-reply@mail.emailmonks.com. In this case, XHRs from <amp-list> or <amp-form> should be sent to emailmonks.com or its subdomains.
  • You must review all the best practices for AMP email before sending the email to Google.
  • The domain of the DKIM signature and From: email address should be the same.
  • In other words, if you are using From: hello@emailmonks.com, the DKIM must be emailmonks.com.
  • Check the SPF or DKIM settings through Email Authentication.
  • The email should be sent from a static email address.
  • Abide by the Gmail Bulk Sender Guidelines.
  • You should have a uniform history of sending an order of hundred emails from the domain for a few weeks at least.
  • It should have a low spam complaint.

Once you send the email, fill this Google form with fingers crossed.

Google Form

How to Receive AMP Emails in
your Inbox?

  1. By default, you won’t be able to review dynamic email in Gmail. It is necessary to update the settings in your Gmail & G-suite account.
  2. Login to your Gmail account and go to Settings. By default, in your Gmail settings the option for Dynamic Email Development would be ticked(checked). Dynamic Email Development
  3. Click on “Developer Settings? and add the email address from where you would be receiving the Dynamic AMP email.(Please note that currently you would be able to add only one email address)
  4. If you want to review AMP emails in your Gmail Inbox, which Monks have created, you need to add kevin@bounces.emailmonks.biz in the “Developer Settings?. Developer Settings
  5. Once you have added the email address ( kevin@bounces.emailmonks.biz for Monks Sample ) from where you will receive the AMP Dynamic email, ask the email marketer to trigger the sample to your email address.
  6. Once the sample is triggered from brand’s account to your email address, you would be able to experience the AMP dynamic email in your Inbox.

How to Code an AMP Email?

The must-have code:

The doctype must be in HTML5 form:
<!doctype html>
Followed directly by the amp4email declaration after <html>
<html ⚡4email> OR <html amp4email>
Then declare the <head> where the first child has to be:
<meta charset=?utf-8?>
Next is the amp4email boilerplate tag (no spaces):
<style amp4email-boilerplate>body{visibility:hidden}</style>
Finally, we have the script tag containing the ampproject information. Throughout the Google AMP HTML email documentation, the AMP component-specific script tags are between:
<script async src=?https://cdn.ampproject.org/v0.js?></script>
Complete valid base structure of an AMP HTML email

HTML
Dynamic content elements of AMP
  • amp-form: This is AMP’s form element. It allows designers to create forms directly in email that can be completed by users.
  • amp-selector: This is multi-select widget for use within a form.
  • amp-bind and amp-state: Simple scripting language in AMP that allows the manipulation of a state machine for interactions between elements. Can also be used to add behavior on certain events. amp-state is used to remotely fetch the initial state machine values.
  • amp-list: Remotely fetches JSON data that will be rendered by an .
  • template type=?amp-mustache?: A Mustache template markup to render the results of an amp-list call.
Layout

The layout of traditional email is fairly rigid. AMP for email opens it up with elements like a carousel for media, lightboxes for images and text, and accordions for showing and hiding different sections. Here are the elements you can use to display your email in novel ways:

  • amp-accordion: A UI element that facilitates showing/hiding different sections.
  • amp-carousel: A carousel UI component.
  • amp-sidebar: A sidebar for navigational purposes.
  • amp-image-lightbox: A lightbox for containing images.
  • amp-lightbox: A lightbox for containing content.
  • amp-fit-text: A helper component for fitting text within a certain area.
  • amp-timeago: Provides a convenient way of rendering timestamps.
Media

In the battle against bounce rate, media is your greatest enemy, contributing more to load times than any other element. With the two elements below, you’ll ensure efficiency and speed without compromising design.

  • amp-img: An AMP component that replaces “image?.
  • amp-anim: Embeds GIF files.

Rendering issue might crop up if the component is in the head but not the body or vice versa, and in case the AMP HTML is not supported.

Uses of AMP email

AVarious applications across industries

AMP is a great idea for businesses who are looking forward to generating a greater ROI and driving business growth.

Here’s how you can incorporate AMP in your email marketing strategy.

  1. Ecommerce

    Ecommerce email marketers can use AMP to offer a complete checkout option within the email itself. Subscribers or users can directly make the purchase from this email with an option to select the variation like color/size/quantity and completing the checkout process (except the payment processing) without landing on a webpage. Integrating AMP in cart abandonment emails will work in a similar fashion.

  2. Finance

    For Finance industry, AMP email can be beneficial if we provide them a form within an email to calculate the loan details by just filling up the loan amount and loan duration. It can also enable several other financial calculations in the email itself.

  3. Travel and Food Industry

    AMP email can be beneficial for travel industry email marketers by letting the subscriber check the availability of the tickets and book the same from the email itself. This idea can also be implemented for booking a movie ticket or booking a table at a restaurant.

  4. Goods and freight

    Marketers in goods and freight industry can send AMP emails so that their subscribers can easily track their courier. It takes the customer experience to a whole new level.

  5. Event Invitations

    Marketers can send event invites with AMP so that the recipients can RSVP directly through the email. This will generate better engagement with the emails and get you more attendees. You can use the same strategy to yield more registrations for your webinar.

  6. Survey Emails

    AMP would make survey emails more effective by allowing the readers to respond right in the email. With AMP, the user would not have to go to the landing page to give their feedback. The smooth experience will enhance the response rate for any survey.

BDeveloping Mini App in the Email

Businesses will be able to send an email that simulates a mini app with the help of AMP. For example, dating apps (like Tinder) can perhaps let the users swipe left or right from the email itself. It would make things so much easier for the user.

CFill a form/ take a survey

Brands can send out an email that allows the user to fill a form or take a survey from the email. This will considerably increase the response rate of the emails.

DIncorporating Interactivity in emails

With the help of AMP, marketers can create dynamic and interactive emails that allow the users to browse through image carousels or catalogs, RSVP to an event, reply to Google Docs comments, and fill out a form right in their inbox. It enhances the subscriber engagement by increasing the time spent on your emails.

EBetter Subscriber Engagement

EmailMonks has observed a significant increase in the time spent on the emails whenever we included any interactive element. With the help of AMP, it would be possible for Gmail subscribers to experience interactivity in emails that was not possible earlier.

Limitations of AMP Email

1It is a new language to learn.

Despite the fact that it is an open-source technology that anyone can use, people will hesitate to use it – primarily because it is a technique-sensitive technology and it has exclusive pre-requisites that need to be fulfilled.

2ESPs and other tools do not support AMP.

Email marketers have to use two different MIME types for creating emails for the HTML part (text/html) and plain-text version. Therefore, every email should have an HTML version and a plain-text version in the ESP. When it comes to AMP email, a third MIME-type will be needed. This adds to the complexities of executing AMO. If ESPs do not add support to this third MIME-type, it is not possible to create or deploy AMP-powered emails.

As far as Gmail is concerned, it has several rendering issues like discrepancy in email display for accounts working on Gmail addresses and non-Gmail addresses that use POP/IMAP.

3Email performance tracking is a challenge.

It is important to measure the performance of your email campaigns. With AMP-powered emails, it is a challenge to track the email metrics. The interactivity in these emails, like hover-based event or clicking through a range of different deals cannot be measured with conventional email metrics.

4Emails can be updated post-deployment.

As the content of AMP emails can be updated even after hitting Send button, it could leave the subscriber confused. It is tough to imagine an email that changes each time you open it. It might lead to trust issues if the subscriber is not aware of this new technology.

5It is time-consuming.

As it is far away from the standard coding practices, it needs proper expertise and can get time-consuming. Email developers will have to learn a specific skill set just to create an email – that is quite daunting. As far as Gmail is concerned, it has several rendering issues like discrepancy in email display for accounts working on Gmail addresses and non-Gmail addresses that use POP/IMAP.

Compatibility of AMP

  • ESPs like SparkPost, Twilio Sendgrid, Amazon SES and Amazon Pinpoint will support AMP.
  • As of now, Gmail is the only email client that supports it.

Samples

Booking.com

Booking.com makes it a breeze to avail the deals and book the accommodation from the email itself. It saves the subscriber’s time and brings more conversions for the business.

Booking
Pinterest

By using AMP, Pinterest lets the user save the pin and view the enlarged image in the email. In this way, the user will no longer have to open the app or use the browser to access Pinterest

Pinterest

How EmailMonks Can Help?

Thrilled with the possibilities that you can reinvent with AMP in email?

Reach out to the Monks and we would love to help you.

P.S. Keep looking at this space for more exciting updates in AMP (as and when they are launched)

Download E-Book

Download E-Book

navigate-up-arrow