Blog

AMP in Emails

Amplify your Email Campaigns ⚡

Suggest Edits

What is AMP Email all about?

AMP for Email lets email senders use interactive AMP elements in their email messages to support a whole host of new features. Emails written with AMP can contain interactive elements, like image carousels or accordions, content stays up-to-date in the message, and the ability for recipients to take action like responding to a form all without leaving their inbox. AMP allows email senders to make API calls from within the mail and hence increase the possible use cases possible within the email.

Some Examples(For illustration purpose)

1000 600

Why AMP Email?

  1. Increase in Conversions
  2. Reduce in Drop off rate
  3. Widens the opportunities for email usage
  4. Revitalizes email technology
  5. Offers a new level of personalisation
  6. Low competition

Support across following Email Clients

  1. Gmail
  2. Yahoo
  3. Mail.ru

Sample AMP Email Html

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <h1>Hello AMPHTML World!</h1>
</body>
</html>

Steps involved to get started with using AMP Email

  1. Think of a use case where interactivity can increase the Conversion metric.
  2. Prepare the AMP HTML and validate the same. Fallback (static) HTML also needs to be created for customers who will not be able to see AMP mail.
  3. Use the Production ready AMP and corresponding Fallback content to get a verified. the AMP sender id. It is a one time process for each sender id. Once a sender id is verified, we can use it for other use cases as well.
  4. Get started with sending the AMP emails across and track performance.

Use CEE's Email Broadcast to send AMP Emails

  1. Head over to Create -> Engage with Users -> Email -> AMP.
  2. Setup and Audience pages remain the same.
  3. Select an AMP whitelisted sender id from the dropdown. If you are doing it for the first time, click on the tool tip next to Sender id to add a new AMP sender id. (Email sender had to ensure that the added AMO sender id is a whitelisted one as Netcore Cloud has no way to verify the same)
  4. Under Content - either create a new AMP template or use an already existing AMP template.
  5. If there is no existing AMP template, one can click on "Create new or select from system gallery" option and create a new template in the following ways -
    • Create a template from scratch using the Drag and Drop AMP Editor.
    • Create a template from scratch by pasting the AMP and Fallback code in the Code Editor option.
    • Create a template by editing our ready-made templates and customising them to our needs.
  6. Preview the AMP and Fallback creatives and send it out.
1352 1358 1323

📘

  1. Steps mentioned above are specific to AMP. Rest of the steps to be followed are similar to standard email broadcast.
  2. Verification of AMP sender domain takes 1-2 weeks of time depending on the use case.
  3. Headers and footers will not work with the AMP email except the by default unsubscribe option.
  4. AMP Email's SPAM score doesn't get calculated.
  5. GA tracking, Conversion tracking & attachments work with AMP HTML.
  6. Follow the doc for detailed understanding about AMP email.

Ready to use templates in AMP

To help you better, we have added 10 ready-to-use templates to our AMP editor that you can access through: Content > AMP Templates > Create a new AMP template OR Select from Gallery
You can customize these templates by clicking Edit while hovering over any ready-to-use template.

Ready-to-use template types:

  • Enquiry form: Use this template to fetch a range of information in no time.
  • Referral form: Nudge your customers to send referral invites for your product and earn rewards
  • Feedback form: Let your customers share their feedback and evaluate your business strategies.
  • Lead generation: Fuel your prospect and generate higher converting leads for your business using this template.
  • NPS survey: There is always an area of opportunity. Know your business ratings through NPS surveys to improve or maintain your influence.
  • Customer Registration Form: Use this template to skyrocket customer registrations.
  • Call Back Form: Nudge your customers to register for a follow-up meeting
  • Investment Form: Let your customers know about the popular investment choices you offer. Generate leads by collecting customer information.
  • Demo Registration: Generate highly converting leads for your business demos using this template.
  • Webinar Registration: Multiply registrations on your webinars using this template
1357

👍

AMP editor customizations

In addition to the existing block-level customizations (bold, italic, underline, alignments, strikethrough, etc.), users can now apply character/word-level customizations as well. The 8 new customizations allow users to:

  • Select line height for paragraph
  • Apply link/unlink
  • Undo/Redo customizations
  • Add subscript characters
  • Add superscript characters
  • Remove applied format
  • Add bullets
  • Add numbers

Note:

  • Customizations done under Styles>Typography section (right panel) apply to entire block
  • Customizations done from the Line editor apply to the selected character/word

❗️

Important note for Form setup

  • Once authenticated with a google account, and then setting up a form from template with a google sheet from the account, template will send responses only as long as the account is linked on CE panel
  • Once google account is changed, template will not direct responses to the new account. i.e. template will not be of use. We recommend users to avoid switching of google accounts in AMP editor.

Form configuration in AMP editor

Multi-step form in the DIY AMP editor allows users to create an App-like pagination experience in emails.
Form configuration is a powerful feature that allows users to add conditions to decide the flow of the Multi-step form.

e.g. Brand has sent an NPS Survey AMP email. Now if the end-user picks 5 or less on the NPS scale, it means that the end user is not happy with the Brand. Brands may want the next questions to be about suggesting points of improvement or about specifying what went wrong. Similarly, if a user picks 6 or above, it means that he is satisfied with the service and the brand can then ask for points which user loved about their product.

This will indeed benefit the marketeer as using this feature will cease the need to send AMP emails multiple times to get scenario-based user feedback.

Navigation

Go to Content > AMP Templates > Create new > Form
Click on the settings option after clicking the Form block.

852

The format of each condition will be Question > Operator > Value - dropdowns for each will contain details based on the form's data

1335

After adding the conditions, users can verify the changes by testing them in the AMP preview.

👍

Note

  • Conditions added for the form configuration feature are autosaved
  • Conditions applicable only for options/dropdown/rating questions
  • Max 5 conditions for each step
  • The default flow for each step will be to the next subsequent step (e.g. Step 1> Step 2)
  • The same feature can be used to send AMP emails via Journey as well

e.g. for Illustration

  • If the user does not receive a question (as per the conditions added) - the answer in the response sheet will be a blank cell
  • If there is a conflict in conditions for a step - the first condition will be assigned priority

Accordions in AMP editor

Accordions & Carousels are among the most used components in AMP.
Accordions are used for displaying/collapsing content within a topic. e.g. FAQs in email, Multiple features/products with their descriptions, etc. Usually for feature adoption, hiding/displaying detailed product descriptions.

Navigation

Go to Content > AMP Templates > Create new > Basic elements > Accordion Block

1352

Each Accordion block can have a set of max 8 accordions.
You can add details/customize font, and color & have character-level customizations using the AMP editor
Maximum 5 accordion blocks can be added in 1 template.

709 1320

Carousels in AMP editor

Accordions & Carousels are among the most used components in AMP.
Carousels are used to showcase a gallery of images/gifs in a template
e.g.

  • Displaying top-seller apparel in a carousel in a welcome email
  • Displaying services offered by a bank in the email (feature adoption)

Navigation

Go to Content > AMP Templates > Create new > Basic elements > Image Carousel

1352

A customer can add a minimum of 2 and a maximum of 10 images to one carousel.

Max 5 carousels can be used within the same creative.

1321

👍

Resizing your carousel size

  • You can now resize both portrait and landscape carousels to match your desired dimensions.
  • Additionally, the editor will provide recommended height or width for a perfect fit
  • Display a carousel thumbnail below each carousel for a better user experience.
1331

❗️

Important note for Accordion & Carousel

  • The first time you add AMP (accordion/carousel) elements to the template, the corresponding Fallback will be rendered. Once you make changes in fallback, AMP & fallback will be independent of each other. e.g. You add a carousel of 3 images in AMP. If you want to add a .gif of 3 images in the fallback instead, you will be able to do so.
  • If all the elements from carousels/accordions in fallback are blank, preview and the HTML mail will not consider the empty spaces.
  • Recommended aspect ratio for carousel images is 2:1

Updated about 2 months ago