Post Syndicated from Pavlos Ioannou Katidis original https://aws.amazon.com/blogs/messaging-and-targeting/increase-your-email-engagement-using-amp/

This blog introduces the use of Accelerated Mobile Pages (AMP) with Amazon Simple Email Service (SES). It provides you a guide on how to configure AMP, a ready AMP email template and a working code example that uses Amazon SES API to send the AMP email. AMP emails support components that recipients can interact without leaving their email client, thus improving customer experience.

Despite the increased use and popularity of mobile messengers and chat apps, email is an integral part of daily online life. In 2020, the number of global email users amounted to four billion and is set to grow to 4.6 billion users in 2025 (source Statistica). Furthermore, in 2020, approximately 306 billion emails were sent and received every day worldwide. This figure is projected to increase to over 376 billion daily e-mails in 2025 (source Statistica).

Businesses use e-mail to communicate with their employees and customers. The email content provides information in the form of text and HTML and recipients can use hyperlinks to take actions such as visit the mobile or web application to perform a purchase, fill a form or browse products.

What is an AMP email?

In 2015, Google launched AMP, which is an open-source technology designed to enhance website performance and user experience on every device regardless of the screen size. AMP is a framework of HTML, CSS, and JS with speed and performance optimization. Using AMP for e-mail allows senders to include interactive components giving the ability to recipients to RSVP to an event, browse image carousels and accordions, and take user input on forms and questionnaires from the email.

Use cases:

• Travel: A hotel can send an AMP email allowing customers to check live the rooms’ availability, instead of redirecting them their mobile or web application. Furthermore, customers can view available rooms, see prices, and even select their preferred room type, all within the email itself. This can significantly enhance the user experience and increase conversion rates.
• Retail: Customers can browse through a carousel of products, select a product of their choice, customize it if needed, and add it to their cart. The entire shopping experience, except for the payment process, can be completed without leaving the email, making it more convenient for the customer and increasing the likelihood of a purchase.
• Delivery of goods: AMP emails can also be used to provide live tracking of deliveries. Once a customer places an order, the delivery company can send an AMP email with a live map showing the current location of the delivery vehicle and the estimated time of arrival. This can enhance customer satisfaction by keeping them informed in real-time about their delivery status.
• Finance: Financial institutions can use AMP emails to provide interactive tools to their customers. For example, a bank can include an interactive loan calculator in their email. Customers can input their loan amount, interest rate, and loan term, and the calculator will display their estimated monthly payment. This can help customers make informed financial decisions without having to visit the bank’s mobile or web application.

In this blog you will learn how to send your first AMP email using Amazon SES.

Considerations

AMP emails is relatively new and before getting started, it’s important to be aware of the following points:

• AMP emails are only supported by the following email clients: FairEmail, Gmail, Mail.ru and Yahoo Mail. Get the most up to date list of email clients supporting AMP emails by visiting this link.
• Creating an AMP email can be time consuming as it has its own tags, components, properties and ways of structuring an email. On the other hand, there are third party email template tools such as Stripo, which support AMP components using their “what you see is what you get” (WYSIWG) editors.
• Tracking performance of AMP emails goes beyond the common email engagement metrics like delivered, open and click. Interactive components like a form submission requires the implementation of additional tracking methods and metrics.
• Unlike plain HTML emails, AMP emails require you to first register with Google for each sender email that you use. Find Google’s registration guide here.

Prerequisites

Before you can start sending AMP emails using Amazon SES you need to:

• Register with Google for each sender email that you use. Find Google’s registration guide here.
  • Note: The registration with Google can take 5 days or more. If you would like to test sending an AMP email to your Gmail client, you can follow the Gmail documentation Test your AMP emails in Gmail. Additionally, Gmail users can use the Gmail AMP for Email Playground to send an email to themselves for testing.
• Have a Gmail email address and access to your inbox via Gmail’s web client.
• Have an AWS account – How to create an AWS account.
• Have a verified domain in Amazon SES – Creating and verifying identities in Amazon SES.
• Move your Amazon SES account out of the sandbox – Moving out of the Amazon SES sandbox.
• Have Python and PIP installed on your computer.
• Install AWS CLI on your computer – Installing or updating the latest version of the AWS CLI.
• Install Boto3 on your computer – Install Boto3.

Sending an AMP email with Amazon SES

AMP emails rely on the MIME type of text/x-amp-html under the parent content type of multipart/alternative. In addition, the AMP content is structured similar to HTML, but it also offers a number of unique tags with a different structure. To start, the coded email body must start with <html ⚡4email> or <html amp4email>. You can find a comprehensive list of email AMP components here. For detailed information on the coding requirements, visit Create your first Amp Email.

To send an AMP email with Amazon SES, this blog uses the Amazon SES send_raw_email API operation. This API operation is more flexible than the send_email API operation, allowing you to send a multipart MIME email.

It’s recommended structuring your MIME part with text/plain first, text/x-amp-html second, and text/html last. This is because some email clients only render last MIME part. Furthermore, when a recipient replies or forwards an AMP email the text/x-amp-html MIME part is being removed, thus providing an alternative content in the HTML part is important.

In this example, the AMP email template makes use of the following two components:

• amp-carousel: Displays multiple similar pieces of content along a horizontal axis.
• amp-bind: Allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions.

Important: Before executing the code below, make sure you have updated the sender and recipient email addresses.

import boto3
from botocore.exceptions import ClientError
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
from email.mime.application import MIMEApplication
client = boto3.client('ses')

# Specify the sender email address recipient and subject of the email
sender = '<replace with email address from a verified Amazon SES sending identity>'
recipient = '<replace with an email address of an email client that supports AMP>'
subject = 'My first AMP email from Amazon SES'

# Plaintext email body for non-HTML email clients.
BODY_TEXT = "This is a TEXT email body!"

# The HTML email body for non-AMP email clients.
BODY_HTML = """\
<html>
<body>
  <h1>This is a HTML email body!</h1>
</body>
</html>    
"""

# The AMPHTML email body. This will render only for recipients with email clients that support AMP.
BODY_AMPHTML = """\
<!doctype html>
<html amp4email data-css-strict>
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp4email-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
    h1 { font-family: arial; margin: 10px;}
    body { background-color: #ffffff; font-size: 16px; color: #333333; font-family: Arial }
    .main-body { max-width: 600px; margin: 0 auto; text-align: center }
    .carousel { background: #f1f2f4; padding: 30px 0px }
    .btn { color: #fff; background: #009fc1; padding: 10px 35px; text-decoration: none; font-size: 22px }
    </style>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
    <amp-state id="myState">
    <script type="application/json">
    {
        "CommunicationDeveloperServices": [
            {
            "name": "Amazon SES",
            "description": "Amazon Simple Email Service (Amazon SES) lets you reach customers confidently without an on-premises Simple Mail Transfer Protocol (SMTP) system."
        },
        {
            "name": "Amazon Pinpoint",
            "description": "Amazon Pinpoint is a flexible, scalable marketing communications service that connects you with customers over email, SMS, push notifications, or voice."
        },
        {
            "name": "Amazon Chime SDK",
            "description": "The Amazon Chime SDK allows builders to add real-time voice, video, and messaging powered by machine learning into their applications."
        }
        ]
    }
    </script>
    </amp-state>
    <div class="main-body">
    <h1>This is an AMP email body!</h1>
    <h3> <span [text]="myState.CommunicationDeveloperServices[currentService].name">Amazon SES</span> </h3>
    <p> <span [text]="myState.CommunicationDeveloperServices[currentService].description">Amazon Simple Email Service (Amazon SES) lets you reach customers confidently without an on-premises Simple Mail Transfer Protocol (SMTP) system.</span> </p>
    <amp-carousel class="carousel" width="400" height="200" type="slides" on="slideChange:AMP.setState({ currentService: event.index} )">
    <amp-img layout="fill" src="https://d2908q01vomqb2.cloudfront.net/632667547e7cd3e0466547863e1207a8c0c0c549/2023/06/01/Amazon-SES.png"  alt="Amazon SES"></amp-img>
    <amp-img layout="fill" src="https://d2908q01vomqb2.cloudfront.net/632667547e7cd3e0466547863e1207a8c0c0c549/2023/06/01/Amazon-Pinpoint.png"  alt="Amazon Pinpoint"></amp-img>
    <amp-img layout="fill" src="https://d2908q01vomqb2.cloudfront.net/632667547e7cd3e0466547863e1207a8c0c0c549/2023/06/01/Amazon-Chime-SDK.png"  alt="Amazon Chime SDK"></amp-img>
    </amp-carousel>
    <div class="btn"><a href="https://aws.amazon.com/business-applications/cds/" class="btn"> <span [text]="myState.CommunicationDeveloperServices[currentService].name"> Amazon SES </span> </a></div>
    </div>
</body>
</html>
"""

# The character encoding for the email.
CHARSET = "utf-8"

# Create a multipart/mixed parent container.
msg = MIMEMultipart('mixed')

# Adding the Subject, From and To lines.
msg['From'] = sender
msg['To'] = recipient
msg['Subject'] = subject 

# Create a multipart/alternative child container.
msg_body = MIMEMultipart('alternative')

# Encode the text and HTML content and set the character encoding.
text_part = MIMEText(BODY_TEXT.encode(CHARSET), 'plain', CHARSET)
amphtml_part = MIMEText(BODY_AMPHTML.encode(CHARSET), 'x-amp-html', CHARSET)
html_part = MIMEText(BODY_HTML.encode(CHARSET), 'html', CHARSET)

# Attach text first, AMP HTML second and HTML last.
msg_body.attach(text_part)
msg_body.attach(amphtml_part)
msg_body.attach(html_part)
msg.attach(msg_body)

try:
    #Provide the contents of the email.
    response = client.send_raw_email(
        Source=sender,
        Destinations=[
            recipient
        ],
        RawMessage={
            'Data':msg.as_string(),
        }
    )
# Display an error if something goes wrong.    
except ClientError as e:
    print(e.response['Error']['Message'])
else:
    print('Email sent! Message ID: ' + response['MessageId'])
    print(response)

The successful execution of the above code should return a response similar to the one below.

{
   "MessageId":"010001887b628794-5be12c16-b77f-4a72-968a-a65058239742-000000",
   "ResponseMetadata":{
      "RequestId":"a4fd35ef-d3a3-44a1-8c53-1d2f85224fb4",
      "HTTPStatusCode":200,
      "HTTPHeaders":{
         "date":"Fri, 02 Jun 2023 09:13:55 GMT",
         "content-type":"text/xml",
         "content-length":"338",
         "connection":"keep-alive",
         "x-amzn-requestid":"a4fd35ef-d3a3-44a1-8c53-1d2f85224fb4"
      },
      "RetryAttempts":0
   }
}

Conclusion

In this blog you learned what is an AMP email, what you should take into consideration before incorporating it to your email strategy and how to send one using Amazon SES.

Using AMP components in your emails can increase interactivity and consequently improve customer experience. The enhanced functionality offered by AMP comes with additional effort building such emails. That said email template tools have started incorporating AMP into their WYSIWG editors, making it easier for non-technical users to design interactive email templates with AMP components.

Analyze your customer database to see if their email clients support AMP and follow the steps outlined in this blog to start sending interactive AMP emails for a better customer experience.

About the Authors

Pavlos Ioannou Katidis

Pavlos Ioannou Katidis is an Amazon Pinpoint and Amazon Simple Email Service Senior Specialist Solutions Architect at AWS. He enjoys diving deep into customers’ technical issues and help in designing communication solutions. In his spare time, he enjoys playing tennis, watching crime TV series, playing FPS PC games, and coding personal projects.