Sending AMP Emails on Netcore – All You Need To Know (Part 1)

  • Home
  • Blogs
  • Sending AMP Emails on Netcore – All You Need To Know (Part 1)

Sending AMP Emails on Netcore – All You Need To Know (Part 1)

Come across the term AMP for Emails yet? 

What if I tell you it’s the most interactive way to email market. 

That’s right! AMP for Emails helps you make emails more interactive inside of an inbox. It’s a new feature that’ll change the way we interact with emails; taking personalized, animated, dynamic and interactive emails to the next level. 

Imagine combining all top trend email design features in one modernized email. This is what AMP for Emails does.

Let’s dive into this two-part series where we explain and discuss the ways and processes involved to implement AMP for Emails in your email marketing campaigns. 

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 Netcore. We shall be providing best practices for sending AMP Emails via Netcore. For a useful resource please check the 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 a 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 a new HTML format required to create such rich, engaging content inside a campaign that 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 Netcore.

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 attribute. 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 the ability to fetch them from remote servers in real-time.

Leave a Reply

Your email address will not be published. Required fields are marked *