How to send AMP Emails from Pepipost – Part 1

 In About Email, Email Deliverability

In Part I for the 2 part series , we shall cover what is AMP and how to register with Google to send AMP Emails. And then we shall be delving deeper into the HTML format to create AMP Emails . We shall also include basic structure for an AMP Email with AMP components and CSS requirements.

The gist of the post is to get you started with sending your AMP Emails and how to get them ready to be able to test them using Pepipost. We shall be providing best practices for sending AMP Emails via Pepipost. For a useful resource please check the Pepipost API Documentation.

Let’s dig into it then….

What is AMP Email?

AMP standing for Accelerated Mobile Pages is a new technology rolled out by Google for loading webpages on mobile devices in a faster way.

AMP for Emails will enable updated , dynamic content to be included inside the Email so that the user can have rich , interactive experience. This shall entail browsing the carousel for products, add to cart the selected product, fill in a form or provide feedback all inside the Email itself!

Thus AMP for Email is going to be a game changer for the Email Marketing industry. The old way of creating static campaigns will be overhauled by new HTML format required to create such rich, engaging content inside a campaign which will extend a modern app-like functionality to Email. Therefore, the Email design part will also be changing and this presents an opportunity for brands to come up with innovative ways to play around with AMP technology and design awe inducing campaigns which will build brand affinity and trust with the users and forge a business relationship with them over the course of time.

              AMP Emails will offer engaging, interactive content like a modern app functionality

Step 1: Registering with Google:

It is required to register your sending domain with Google first before sending your production ready AMP Emails. It can also be called the whitelisting phase for your sending domain.

You can do that here. https://developers.google.com/gmail/ampemail/register

You should send your production ready AMP Email to ampforemail.whitelisting@gmail.com . Fill out the registration form mentioned on the link and then wait for their response.

There are a bunch of registration guidelines and requirements for you to meet before you send that mail to Google. Below is the link :

https://developers.google.com/gmail/ampemail/register#registration_guidelines

Here is a checklist of guidelines one needs to follow  in order to successfully register with Google:

  • You must send a real, production-quality example email, not a demo or "Hello World" example.
  • Emails must have a similar HTML or text MIME part. There are many instances where this is shown instead, such as when the user has disabled dynamic email.
  • The email must have no bugs.
  • You must authenticate the emails using SPF, DKIM and DMARC as detailed in the Security requirements.
  • Ensure that you have reviewed the AMP for Email best practices, and that your email conforms to the suggestions there.
  • Registration works on a per-email basis. If you'd like to register more than one sender email, each sender needs to be registered separately, with a separate production-quality email sent.
  • You mustn't allow third parties, such as users or the general public, to directly author and send emails. The emails you send can contain user-generated content, such as posts or comments. Testing tools and "email playgrounds" can't be whitelisted and should instead rely on the steps outlined in Test your AMP emails in Gmail.
  • Emails must follow the Gmail Bulk Sender Guidelines.
  • Consistent history of sending a high volume of mail from your domain (order of hundred emails a day minimum to Gmail) for a few weeks at least.
  • A low rate of spam complaints from users

Step 2: AMP HTML Email Design

Let's now have a detailed look at how to do Email design if you have to send AMP Emails from Pepipost.

A) Basic structure of an AMP Email design:

The following is a starting HTML code of an AMP Email :

<!doctype html>

<html ⚡4email>

<head>

<meta charset="utf-8">

<script async src="https://cdn.ampproject.org/v0.js"></script>

<style amp4email-boilerplate>body{visibility:hidden}</style>

</head>

<body>

Hello, AMP4EMAIL world.

</body>

</html>

Some points to note here is the use of <html amp4email> tag . It tells Gmail that it is an AMP email.

And “https://cdn.ampproject.org/v0.js” is for AMP runtime script.

There are some AMP components that can be used for displaying carousel UI and images , gifs inside the email.

You can learn all about developing AMP Emails in Google developer page:

https://amp.dev/documentation/guides-and-tutorials/start/create_email/?format=email

B) Embedding CSS into AMP Email :

All CSS should be embedded in HTML with <style amp-custom> within the header or inline style atrribute. There should be only one <style amp-custom> block in the entire code.

The entire style tag cannot be more than 50,000 characters.

<head>

...

<style amp-custom>

h1 {

font-family: arial;

margin: 10px;

}

.center {

text-align: center;

}

.carousel-preview {

margin-top: 10px;

}

</style>

</head>

C) Inserting Images and Links:

In the Email body if we have to place an image then we have to use AMPHTML tag <amp-img>

Gifs will be supported by the tag <amp-anim>

The Urls will be using the paths of the website itself as they are loaded dynamically from the web pages.

Eg:

<body>

<amp-img src="https://placekitten.com/800/400"

alt="Welcome"

width="800"

height="400">

</amp-img>

</body>

You can always test your code through their Email validator to check if your AMPHTML code passes all the code tests.

https://validator.ampproject.org/#htmlFormat=AMP4EMAIL

Below is an email showing the features of AMP and the benefits of AMP through an AMP email sent by our customer Tokopedia .

Parting Thoughts:

Here we covered the basics of what is AMP in Email and how it will affect the way users will perceive Email . Then we delved further into the new format that the Email will have to be designed for it to be AMP ready.  This will include a new way of inserting images and links in the AMP4EMAIL code, thus making it dynamic and ability to fetch them from remote servers real-time.

The below points second part of this series will focus on answering:

- MIME Formats

- Injection of Emails using Pepipost

- Testing via Pepipost UI

- How will the engagement be tracked for opens and clicks?

- How will the add to cart sessions be tracked?

Found This Blog Interesting Please Rate This Blog 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Recent Posts

Leave a Comment

We are always looking for fresh talent to contribute to our blog. If you have a knack for writing and a passion for email marketing, we would love to have your post on our Guest Blog .

Submit a Guest Post
Pepi thinking

Start typing and press Enter to search

Thank you for your details!

Fill out your information below, and we will send you a PepiAlert, that will describe your domain’s email deliverability situation. Please note that your email address must match the domain, or the domain must be owned by the company matching the email address. We have the right to refuse the request, if we can’t verify the information.

*All fields are required



%d bloggers like this: