Skip and go to main content

From our Depsters August 01, 2019

How to build interactive emails on Gmail powered by AMP

Image

Launched by Google in 2015, AMP (or Accelerated Mobile Pages Project), is an open-source technology designed to improve the performance of web content, focused on mobile devices. It aims to make the web faster while reducing the developer overhead. Gmail will be the first email client to support this new technology and, therefore, also support the implementation of dynamic and interactive elements in email.

What does AMP support mean for marketers?

Gmail will require a separate MIME-type for the AMP version of the email: text-x-amphtml. Using MIME (Multipurpose Internet Mail Extensions) in email is nothing new; it’s been used in the email world to bundle together a plain-text version of your email along with the HTML version decades.

For AMP-powered emails to work in Gmail, you’ll have to add a third MIME-type to your email called “<html ⚡4email>”.

Yes, that’s right; email marketers looking to benefit from the use of AMP will need to create an entirely separate email just for Gmail. If you’re thinking this extra work will be a waste of time, remember that, 26% of emails are opened in Gmail which makes it the second most popular email client worldwide.

But even so, will an improved subscriber experience for this subset of consumers be worth the additional work for brands? This will heavily depend on each brands’ subscriber base, level of personalisation, and whether or not AMP support will be picked up by other inbox providers going forward. Right now, AMP is only supported on Gmail, but other platforms have already announced that they will follow suit, including Microsoft Outlook, mail.ru and Verizon Media’s Yahoo! Mail.

How to get started with AMP for Email

The Playground for AMP Email, is available to anyone who wishes to try it out, so you can create and edit your code and see real-time changes to your email campaign. The developer documentation for AMP for Email provides useful insights on how to get started building your first AMP email. 

To be able to send AMP emails not only to yourself but to a list of subscribers, you’ll have to make sure that you’re registered with Google as a sender of dynamic email. Plus, you’ll need access to an email service provider that offers support for sending AMP emails.

What are some use cases that could be useful for you?

Brands such as Doodle, Booking.com and Pinterest have started using AMP for Email already, in this example from Booking.com, people are able to refresh the destinations suggested on the email itself without having to leave and visit the website. This reduces the amount of steps that a customer has to make in order to make a reservation.

Image

Looking at the list of components from AMP for Email, you can see we have the following elements:

  • amp-list: With this component you can fetch live content from a data feed and it will render using your template, here you can find an example on how amp-list works.
  • amp-bind: You can add interactive elements that are customised, for example selecting different colours of the same shirt on an abandoned basket emails so the customer can click through and make a purchase with the preferred colour.
  • amp-sidebar: Provides a way to access content through a sidebar such as navigation links, menus or buttons, here you can find an example on how to use amp-sidebar.
  • amp-form: This component allows you to create forms and input tags on your email that the customer can fill out, this is very useful in the case of NPS Survey Emails or even for example during the booking of an apartment.
  • amp-selector: Gives the customer a menu of options to select from, you can test here how amp-selector works.

I can tell you more about how to make best use of this in your case. Please get in touch if you have any challenges that you would like to talk to us about.

Questions? We're here to help!

Whoops!

If you’re reading this, you unfortunately can’t see the form that’s supposed to be here. You probably have an ad blocker installed. Switch the ad blocker off in order to see the form. Still encounter problems? Open this page in a different browser or get in contact with us: [email protected]