Resources
The definitive guide on using AMP for email to drive revenues and boost ROI
Written by
Netcore Cloud
admin
0

Subscribe for updates

The definitive guide on using AMP for email to drive revenues and boost ROI

In 1996, Nokia launched the first mobile phone with Internet connectivity – the Nokia 9000 Communicator. Three years later, the first mobile-specific web browser was released, and the people had the World Wide Web at their fingertips. 

However, the speed of the phone internet was very slow, and the rendering of the pages was far from satisfactory. Companies started investing time and money to enhance the user experience; technologies like WML, WAP, cHTML, iHTML, M.dot, native apps, responsive design, hybrid apps, and PWA rolled out.

Google came up with Accelerated Mobile Pages (AMP) in February 2016; it created pages that combined speed and smoother loading. AMP pages loaded quickly without hampering creativity or design and gave people much better page experiences. Just 15 months after the launch of AMP, more than 2 billion AMP pages had found their way onto the web. 

In February 2018, Google decided to expand the AMP capabilities to email. Responding to a meeting invite, getting updated flight information, filling out forms/questionnaires, swiping images, searching for products, etc., became possible within the email. There was no need to click out to a third-party website anymore.

Now that you have got a fair idea of AMP, we can move on to explore AMP for email in detail. This definitive guide on AMP for email explains the experiential as well as technical aspects in simple terms for you.

Whether you are a marketer wanting to use AMP emails or a developer planning to code them, you will find everything you are looking for right here.

Let’s get started!

Table of Contents

  1. What is AMP for email?
  2. What are the things that an AMP email can do but an HTML email can’t?
  3. AMP Components
    1. Media components
      1. amp-anim
    2. Dynamic components
      1. amp-autocomplete
      2. amp-bind
      3. amp-form
      4. amp-img
      5. amp-layout
      6. amp-list
      7. amp-mustache
      8. amp-selector
    3. Layout components
      1. amp-accordion
      2. amp-carousel
      3. amp-image-lightbox
      4. amp-lightbox
      5. amp-sidebar
    4. Presentation components
      1. amp-fittext
      2. amp-timeago
  4. Things to consider before you jump onto the bandwagon
    1. Challenges with creating an AMP email
    2. Ensuring an HTML fallback option for AMP email
    3. Getting the permissions for AMP email
    4. Finding an EMAIL SERVICE PROVIDER (ESP) that can handle AMP email
  5. How do you go about creating an AMP email?
    1. Get access from Google
      1. Build an AMP email
      2. Test the AMP email
      3. Register with Google
  6. How can Netcore Cloud help you effectively increase ROI with AMP emails?
  7. AMP success stories
    1. How Netcore helped YourStory adopt AMP interactivity to turn around its email marketing and increase conversions by a whopping 5.5X.
    2. Axis Securities increases its open rate by 27% and click rate by 24% with Netcore Cloud’s AI-powered email delivery.
    3. CaratLane increases the CTOR by 300% for their new product launch, “Borla,” through interactive AMP emails from Netcore Cloud.

What is AMP for email?

AMP for email is a technology that allows people to interact within the email. Instead of exiting to an external web page after clicking a link in the email, people can now respond from within the email. You can also add dynamic content elements that automatically update the information whenever the users open the AMP emails. 

To make AMP emails display and function as intended, you have to ensure certain aspects of technological compatibility. Consider the Mailbox Service Providers (MSPs) first: AMP for email is only supported by Gmail, Yahoo Mail, Mail.ru, and FairEmail currently. 

MSPs that support AMP for email are still not many; however, there is a fallback option for others that don’t. You need to add a new MIME part to the emails so that they load like a normal HTML email wherever AMP emails are not supported by the MSP or the email client.

AMP for email is a powerful technology that lets you include components like carousels, accordions, surveys, forms, games, and much more within the emails. These transform your email marketing campaigns into compelling customer engagements that increase the ROI. 

With a variety of creative AMP components to choose from, every industry can leverage the power of AMP for email. Here are some top-of-the-mind examples:

Ecommerce brands can create a mini-website within the email to include everything from product browsing to product comparison to product checkouts to feedback submission, and everything in between. 

Banks or financial institutions can add tools like EMI calculators, Real time stock prices, countdown timers, interactive account opening forms, etc., to their emails. 

The hospitality industry can display live discounts, offers, upgrades, and the availability of their properties inside the emails. It is also possible to include a 360o view of rooms with image galleries to build trust with users. 

Event management companies can use AMP for email to facilitate quick and easy signup within the email, show the latest numbers of people registered, display updated information on event sessions, and add a countdown timer to create a sense of urgency.

Travel and tourism players can fit in a lot of information, such as places to see, things to do, where to shop and eat, etc., in limited space using accordions (expandable text). The accordion shows only the titles/subheads and allows users to choose what information they want to see more of.

There are scores of AMP components for email; as a stand-alone or in combination with others, these AMP components offer countless possibilities for supercharging every email marketing campaign in every industry.

In the sections below, we will be examining different AMP components, with visual examples and corresponding technical explanations. You will view real-life applications that inspire you to create successful AMP emails for your own campaigns.

*MIME- Multipurpose Internet Mail Extension

What are the things that an AMP email can do but an HTML email can’t?

There is a fundamental difference between AMP emails and HTML emails: 

With a conventional HTML mail, there is no interactivity other than clicking a link or a button that takes you out of the email and onto an external web page to perform an action. 

The majority of the users do not choose to exit the email; the drop-off rates can often be quite high, leaving the desired marketing action incomplete.

With AMP emails, it is not necessary to click a link or button, leave the e-mail client, and exit to a new browser tab to interact further. Everything happens within the email. 

HTML emails let you play with the color, font, size, and overall formatting of the content. You can also use customizable email templates. An upgrade over plain text emails, HTML emails are better in driving more traffic and conversions. 

AMP emails are several notches higher than HTML emails. An AMP email can include all the UI capabilities of an HTML email while adding a website-like or app-like functionality to the same. 

As evidenced by global studies, AMP emails can boost your ROI three times more than HTML emails. 

The table below highlights the major similarities and differences between HTML emails and AMP emails.

Feature

HTML Emails
AMP Emails
HTML coding
Embedded text, images, multimedia, URLs, CTA
Communication emails, transactional emails, marketing emails
In-email engagement without external page redirection
Dynamic in nature; update in real-time
Compulsory domain whitelisting
Mandatory implementation of SPF and DKIM authentication protocols
Restriction of ads and third-party data intrusion
Increased protection against phishing, spoofing, spamming, and fraudulent activities

AMP Components

AMP is an open-source specification that can be used by all email clients. The AMP HTML library has a big collection of components that bring core functionality to your AMP emails. You can incorporate interactive and dynamic features in your emails by adding one or more AMP components.

Let’s take up the 16 major AMP components that bring AMP emails alive. In this section, we will deconstruct each of them so that you can learn what they are, how they work, and what they can do to make your marketing and transactional emails compelling.

The AMP components are grouped into a few broad categories* such as media, dynamic, layout, and presentation. We will deep dive into these widely used categories that make AMP emails stand out from the rest. 

*Note: In Google terminology, the categories are referred to as ‘filters.’

Media components

Media components are a collection of attributes that let you add elements like images, typically GIFs, to your emails. We will have a quick look at the capabilities of the media AMP components.

(a) amp-anim

inline_img_12 inline_img_12

Purpose→ amp-anim allows you to add animated images like GIFs and WebP image formats to your emails. The GIFs add an element of movement and liveliness to your emails, making them more attractive to the users.

Example: GIFs are a great way to showcase products. A moving image of a product from all angles gives the users a better look and feel of the product.

Required Scripts→ <script> async custom-element=”amp-anim” src=”https://cdn.ampproject.org/v0/amp-anim-0.1.js”></script>

Description→ The amp-anim component displays a GIF animation with optimized CPU management.

The amp-anim component lets the AMP framework reduce the resources it spends on the animation when it’s off-screen. Otherwise, the behavior of amp-anim is identical to amp-img. You can implement a placeholder element to further optimize amp-anim. You will find detailed information here if you wish to learn more about the media components.

Dynamic components

Dynamic components help you integrate highly engaging elements in AMP emails. Using the attributes of dynamic components, you can include email forms, live content updates, games, interactive calendars, etc., in AMP emails. Below are the details of all such AMP components, specifically applicable for emails.

(a)  amp-autocomplete

Purpose→ With amp-autocomplete, you can add an autocomplete feature to your text fields. When the users type in a keyword or a few characters, predefined suggestions appear to help users complete their search.

Example: You can simplify the filling out of an event registration form with autocomplete fields for location, pin code, etc.

Required Scripts→ <script async custom-element=”amp-autocomplete” src=”https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js”></script>

Description→ The amp-anim component displays a GIF animation with optimized CPU management.

This can be used to power search experiences, in cases where the user may not know the full range of potential inputs, or in forms to help ensure inputs where there may be multiple ways to express the same intent (using a state abbreviation instead of its full name, for example) yield more predictable results.

When using the src attribute with amp-autocomplete, the response from the endpoint contains data to be rendered in the specified template.

You can specify a template in one of two ways:

  • A template attribute that references an ID of an existing templating element
  • A templating element nested directly inside the amp-autocomplete element

(b)  amp-bind

inline_img_12 inline_img_12

Purpose→ amp-bind allows custom interactivity based on user actions or data changes. This AMP component helps you create a rich user experience by altering elements like text, images, placeholders, etc., whenever a user takes action.

Example: You can create scratch cards, multi-step forms, slideshows, interactive games, and much more.

Required Scripts→ <script async custom-element=”amp-bind” src=”https://cdn.ampproject.org/v0/amp-bind-0.1.js”></script”>

Description→ The amp-bind component enables custom stateful interactivity on AMP pages.

For performance and to avoid the risk of unexpected content jumping, amp-bind does not evaluate expressions on page load. This means visual elements should be given a default state and not rely on amp-bind for the initial render.

amp-bind has three main concepts:

  • State: A document-scope, mutable JSON state. State variables update in response to user actions. amp-bind does not evaluate expressions on page load. Visual elements should have their default “state” defined and not rely on amp-bind for the initial render.
  • Expressions: JavaScript-like expressions that can reference the state.
  • Bindings: Special attributes that link an element’s property to a state via an expression. Property is bound by wrapping it inside brackets, in the form of [property].

Each AMP document that uses amp-bind has document-scope mutable JSON data or state. An <amp-state> element’s JSON data has a maximum size of 100KB.

Below outlines the types of errors that may arise when working with amp-bind.

Type

Message

Suggestion

Invalid binding Binding to [foo] on <P> is not allowed.

Use only allowlisted bindings.
Syntax errorExpression compilation error in…Verify the expression for typos.
Non-allowlisted functionsalert is not a supported function.Use only allow-listed functions.
Sanitized result“javascript:alert(1)” is not a valid result for [href].Avoid banned URL protocols or expressions that would fail the AMP Validator.
CSP violationRefused to create a worker from ‘blob:…’ because it violates the following Content Security Policy directive…Add default-src blob: to your origin’s Content Security Policy. amp-bind delegates expensive work to a dedicated Web Worker to ensure good performance.

(c) amp-form

inline_img_12

Purpose→ amp-form helps you add interactive forms to your AMP emails. You can significantly reduce the drop-offs that happen due to redirections to external pages for form submissions. This AMP component allows you to get form submissions from users within the email.

Example: Brands can facilitate the users to fill up application forms, feedback forms, signup forms, survey forms, ratings, etc., without being redirected to an external page.

Required Scripts→ <script async custom-element=”amp-bind” src=”https://cdn.ampproject.org/v0/amp-bind-0.1.js”></script”>

Description→ The amp-form extension allows you to create forms (<form>) to submit input fields in an AMP document. The amp-form extension also provides polyfills for some missing behaviors in browsers.

Before creating a <form>, you must include the required script for the <amp-form> extension; otherwise, your document will be invalid. If you’re using input tags for purposes other than submitting their values (e.g., inputs not inside a <form>), you do not need to load the amp-form extension.

You can render success or error responses in your form by using amp-mustache or success responses through data binding with amp-bind and the following response attributes:

  • submit-success
  • submit-error
  • submitting

In addition to following the details in the AMP CORS spec, please pay extra attention to the section on “Processing state-changing requests” to protect against XSRF attacks where an attacker can execute unauthorized commands using the current user session without the user’s knowledge.

In general, keep in mind the following points when accepting input from the user:

  • Only use POST for state-changing requests.
  • Use non-XHR GET for navigational purposes only (example: search).
  • Non-XHR GET requests will not receive accurate origin/headers, and backends won’t be able to protect against XSRF with the above mechanism.

In general, use XHR/non-XHR GET requests for navigational or information retrieval only.

Non-XHR POST requests are not allowed in AMP documents. This is due to inconsistencies in setting the Origin header on these requests across browsers and the complications supporting it would introduce in protecting against XSRF.

(d) amp-img

inline_img_12

Purpose→ amp-img is useful for adding images to AMP emails. This AMP component helps in prioritizing image loadings based on viewport position. You can include product images, product features, picture portfolios, and much more to make emails more compelling.

Example: An image gallery of pictures clicked from a camera, or mobile phone is a fine way to reveal the picture quality that users can expect from the product.

Required Scripts→ None specified.

Description→ AMP may choose to delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors. The amp-img components allow the runtime to effectively manage image resources this way.

amp-img components, like all externally fetched AMP resources, must be given an explicit size (as in width/height) in advance so that the aspect ratio can be known without fetching the image. Actual layout behavior is determined by the layout attribute.

Both the responsive and intrinsic layouts create an image that will scale automatically. The main difference is that the intrinsic layout uses an SVG image as its scaling element. This will make it behave in the same way as a standard HTML image while retaining the benefit of the browser knowing the image size on the initial layout. The intrinsic layout will have an intrinsic size and will inflate a floated div until it reaches either the image size defined by the width and height attributes passed to the amp-img (not by the natural size of the image) or a CSS constraint such as max-width. The responsive layout will render 0x0 in a floated div because it takes its size from the parent, which has no natural size when floated.

(e) amp-layout

Purpose→ amp-layout is a generic, multi-purpose container element that brings AMP’s powerful layouts to any element.

You can use this component to create layouts that adjust as per the screen size or device screen of the user. You can also choose to keep the layout fixed regardless of the screen size.

Example: You can set the layout such that the elements of the email adjust to the aspect ratio when a user opens an email on their mobile device.

Required Scripts→ None specified.

Description→ The amp-layout component allows you to apply aspect-ratio-based responsive layouts to any element. The amp-layout component works similarly to the layout attribute on existing AMP components but supports any HTML markup as children. Other supported layouts all work with amp-layout (e.g., fixed-height, fixed, etc.).

(f) amp-list

inline_img_12 inline_img_12

Purpose→ amp-list is responsible for dynamic content that updates with the help of backend data. This AMP component delivers dynamic lists that pull live data into emails, create personalized offers, include content sections, and a lot more in Real time.

You can use this component to create layouts that adjust as per the screen size or device screen of the user. You can also choose to keep the layout fixed regardless of the screen size.

Example: You can display updated carts, updated credit balance, additional product images, interactive calendars, etc.

Required Scripts→ <script async custom-element=”amp-list” src=”https://cdn.ampproject.org/v0/amp-list-0.1.js”></script>

Description→ The amp-list component fetches dynamic content from a CORS JSON endpoint. The response from the endpoint contains data, which is rendered in the specified template.

You can specify a template in one of two ways:

  • A template attribute that references an ID of an existing templating element
  • A templating element nested directly inside the amp-list element

In several cases, we may need the <amp-list> to resize on user interaction. For example, when the <amp-list> contains an amp-accordion that a user may tap on when the contents of the <amp-list> change size due to bound CSS classes. The changeToLayoutContainer action handles this by changing the amp list to layout= “CONTAINER” when triggering this action.

(g) amp-mustache

inline_img_12

Purpose→ amp-mustache is a component that allows the personalization of emails. From adding the first names of the email recipients to offering tailored rewards for each customer, many things are possible with this AMP component.

Example: This component can be used to define the reward under a scratch card for a specific customer. It can be a discount voucher for one, and a BUY ONE GET ONE (BOGO) offer for another.

Required Scripts→ <script async custom-template=”amp-mustache” src=”https://cdn.ampproject.org/v0/amp-mustache-0.2.js”></script>

Description→ The amp-mustache template has to be defined and used according to the AMP Template Spec.

The AMP templating system allows AMP elements to render dynamic content using templates defined within the AMP document. The data for templates is received from a CORS JSON endpoint.

The templates are defined using a templating language exported by an AMP templating extension. For example, “amp-mustache” templates are defined using Mustache.js syntax. However, any templating language has its syntax restricted and verified by the AMP validator to ensure that XSS and other issues cannot be dynamically injected into the AMP document.

Mustache is a logic-less template syntax. See Mustache specification for more details. Some of the core Mustache tags are:

{{variable}}: A variable tag. It outputs the HTML-escaped value of a variable.

{{#section}} {{/section}}: A section tag. It can test the existence of a variable and iterate over it if it’s an array.

{{^section}} {{/section}}: An inverted tag. It can test the non-existence of a variable.

{{{unescaped}}}: Unescaped HTML. It’s restricted in the markup it may output (see “Restrictions” below).

Mustache can be used for HTML, config files, source code – anything. It works by expanding tags in a template using values provided in a hash or object.

Google calls it “logic-less” because there are no if statements, else clauses, or for loops. Instead, there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

(h) amp-selector

inline_img_12 inline_img_12

Purpose→ amp-selector allows you to add a menu of options in the emails. The users can select more than one element from such a range of options as desired. Adding product variants or data filters is just one of many effective uses of this AMP component.

Example: Users can select the size and color of the shirt they left in their cart and complete the checkout from their email.

Required Scripts→ <script async custom-element=”amp-selector” src=”https://cdn.ampproject.org/v0/amp-selector-0.1.js”></script>

Description→ AMP selector is a control that presents a list of options and lets the user choose one or many options; the contents of the options aren’t just limited to text.

  • An amp-selector can contain any arbitrary HTML elements or AMP components (e.g., amp-carousel, amp-img, etc.).
  • An amp-selector cannot contain any nested amp-selector controls.
  • Selectable options can be set by adding the option attribute to the element and assigning a value to the attribute (e.g., <li option=’value’></li>).
  • Disabled options can be set by adding the disabled attribute to the element (e.g., <li option=’d’ disabled></li>).
  • Preselected options can be set by adding the selected attribute to the element (e.g., <li option=’b’ selected></li>).
  • To allow for multiple selections, add the multiple attributes to the amp-selector element. By default, the amp-selector allows for one selection at a time.
  • To disable the entire amp-selector, add the disabled attribute to the amp-selector element.
  • When an amp-selector contains a name attribute, and the amp-selector is inside a form tag, if a submit event occurs on the form, the amp-selector behaves like a radio-button/checkbox group and submits the selected values (the ones assigned to the option) against the name of the amp-selector.

You will find detailed information here if you wish to learn more about the dynamic components.

(3) Layout components

Layout components are meant to enhance the structure of your AMP emails. The attributes of layout components let you adjust the orientation, position, appearance, and features of the content. Here is what you can achieve with layout components.

(a) amp-accordion

inline_img_12

Purpose→ amp-accordion is a way to include large content in a limited space via a content outline with expandable and collapsible sections. Users can interact with ease and quickly jump to the sections they wish to see more of.

Example: FAQs are often added as expandable sections to accommodate them on a single page view.

Required Scripts→ <script async custom-element=”amp-accordion” src=”https://cdn.ampproject.org/v0/amp-accordion-0.1.js”></script>

Description→ The amp-accordion component allows you to display collapsible and expandable content sections. This component provides a way for viewers to glance at the content outline and jump to any section. Effective use reduces scrolling needs on mobile devices.

An amp-accordion accepts one or more <section> elements as its direct children.

  • Each <section> must contain exactly two direct children.
  • The first child in a <section> is the heading for that section of the amp-accordion. It must be a heading element such as <h1>-<h6> or <header>.
  • The second child in a <section> is the expandable/collapsible content. It can be any tag allowed in AMP HTML.
  • A click or tap on a <section> heading expands or collapses the section.
  • An amp-accordion with a defined id preserves the collapsed or expanded state of each section while the user remains on your domain.

Keep the following points in mind when you style an amp-accordion:

  • amp-accordion elements are always displayed: block.
  • float cannot style a <section>, heading, nor content elements.
  • An expanded section applies the expanded attribute to the <section> element.
  • The content element is clear-fixed with overflow: hidden and therefore cannot have scrollbars.
  • Margins of the <amp-accordion>, <section>, heading, and content elements are set to 0, but can be overridden in custom styles.
  • Both the header and content elements are position: relative.

(b) amp-carousel


inline_img_12

Purpose→ amp-carousel is an AMP component that allows you to display a carousel of multiple images. You can use it for a slideshow of images that move on the horizontal axis when users swipe or tap on the navigation controls.

Example: E-commerce companies frequently include product image carousels in emails that display multiple views of the product from different angles.

Required Scripts→ <script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>

Description→ Displays multiple similar pieces of content along a horizontal axis. Each of the amp-carousel component’s immediate children is considered an item in the carousel. Each of these nodes may also have arbitrary HTML children.

The carousel consists of an arbitrary number of items, as well as optional navigational arrows to go forward or backward. For type= “slides,” the arrows move one item at a time. For type= “carousel,” the arrows move one carousel’s width forwards or backward at a time.

The carousel advances between items if the user swipes or clicks an optional navigation arrow.

Autoplaying, and particularly infinitely looping, carousels can be very distracting and confusing for users – especially for users with cognitive impairments. In general, Google recommends avoiding auto-playing carousels. While auto-playing carousels stop once the user has interacted with the carousel, consider also adding an explicit “Play/Pause” control.

(c) amp-image-lightbox

inline_img_12

Purpose→ amp-image-lightbox is useful to enhance the focus on an image. This AMP component brings the image to the center of the page while making the background elements go under a diffused/darker layer.

Example: Images of rooms on a property can be zoomed in for a clearer view as the users click on them.

Required Scripts→ <script async custom-element=”amp-image-lightbox” src=”https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js”></script>

Description→ The amp-image-lightbox component provides a lightbox experience for a specified image. The image displays in the center of a full-viewport lightbox when a user clicks the image.

When the user clicks the image, the <amp-img> activates the <amp-image-lightbox> via the on action, which references the ID of the <amp-image-lightbox> element (i.e., lightbox1). The <amp-image-lightbox> then displays the image in the center of the full-viewport lightbox. Note that the amp-image-lightbox element itself must be empty and must be set to layout=nodisplay.

Among other things, the amp-image-lightbox allows the following user manipulations: zooming, panning, and showing/hiding the description. Pressing the escape key on a keyboard closes the lightbox.

You can use the same amp-image-lightbox for more than one image on the AMP page. Optionally, you can display captions at the bottom of the viewport for the image.

(d) amp-lightbox

Purpose→ amp-lightbox is used to show a zoomed image or text with a pop-up effect. When tapped on, the element comes to the center of the screen, giving a better and bigger view to the user.

Example: For form submissions, a ‘Are you sure you want to submit?’ message pops up on the screen when users hit ‘submit.’

Required Scripts→ <script async custom-element=”amp-lightbox” src=”https://cdn.ampproject.org/v0/amp-lightbox-0.1.js”></script>

Description→ The amp-lightbox component defines child elements that display in a full-viewport overlay/modal. When the user taps or clicks an element (e.g., a button), the amp-lightbox ID referenced in the clicked element’s attribute triggers the lightbox to take up the full viewport and displays the child elements of the amp-lightbox.

Pressing the escape key on the keyboard or setting focus on an element outside the lightbox closes the lightbox. Alternatively, setting the on attribute on one or more elements within the lightbox and setting its method to close closes the lightbox when the element is tapped or clicked. Once closed, the focus will be sent back to the trigger element.

For accessibility reasons, if the user does not provide a focus in the lightbox on open (using autofocus attribute or forcing focus on open), the focus will be set on the first element using on: tap. Otherwise, a close button only visible to screen readers, optionally using the data-close-button-aria-label attribute value, will be created and focused on.

(d) amp-sidebar

inline_img_12

Purpose→ amp-sidebar offers a smart way to display the outline of the main content that remains passively hidden until tapped. This AMP component helps display meta content like navigation, links, buttons, and menus.

Example: A sidebar can be used to create an app-like navigational experience with items like additional recipes, promotional offers, and other content.

Required Scripts→ <script async custom-element=”amp-sidebar” src=”https://cdn.ampproject.org/v0/amp-sidebar-0.1.js”></script>

Description→ <amp-sidebar> hides meta content intended for temporary access (navigation links, buttons, menus, etc.). <amp-sidebar> can be opened and closed by button taps and tapping outside of the amp-sidebar. However, optional attributes that accept media queries can be used to display meta content in other parts of the site. Child <nav toolbar=”(media query)” toolbar-target=”elementID”> elements allow for content within the sidebar to be displayed on other parts of the main content.

  • The sidebar can only appear on the left or right side of a page.
  • The <amp-sidebar> may contain any valid HTML elements (supported by AMP).
  • The <amp-sidebar> may contain any of the following AMP elements:
    • <amp-accordion>
    • <amp-img>
    • <amp-fit-text>
    • <amp-list>
    • <amp-live-list>
    • <amp-social-share>
  • The max height of the sidebar is 100vh. If the height exceeds 100vh, then a vertical scrollbar appears. The default height is set to 100vh in CSS and is overridable in CSS.
  • The width of the sidebar can be set and adjusted using CSS (minimum width is 45px).
  • Touch zoom is disabled on the amp-sidebar and its mask when the sidebar is open.
  • <amp-sidebar> is recommended to be a direct child of the <body> to preserve a logical DOM order (for accessibility) as well as to avoid altering its behavior by a container element. Note that having an ancestor of the amp-sidebar with a set z-index may cause the sidebar to appear below other elements (such as headers), breaking its functionality.

You can create a toolbar element that displays in the <body> by specifying the toolbar attribute with a media query and a toolbar-target attribute with an element id on an <nav> element that is a child of <amp-sidebar>. The toolbar duplicates the <nav> element and its children and appends the element into the toolbar-target element.

You will find detailed information here if you wish to learn more about the layout components.

(4) Presentation components

Presentation components map out the display of text within the email. Using these components, you can adjust the font, size, color, and alignment of text, among other things. Let’s look at the different ways that text can appear in emails with the presentation components.

(a) amp-fittext

Purpose→ amp-fittext expands or shrinks the font size to fit the content within the space given to it. This AMP component is extremely useful for building a responsive design for varying screen sizes and devices.

Example: You can use this component to fix the width, height, minimum size, and maximum size of the text so that it scales to fit everything within the specified limits.

Required Scripts→ <script async custom-element=”amp-fit-text” src=”https://cdn.ampproject.org/v0/amp-fit-text-0.1.js”></script>

Description→ The amp-fit-text component allows you to manage the size and fit of text within a specified area. For content contained in an amp-fit-text element, the amp-fit-text component finds the best font size to fit all of the content within the available space. The expected content for amp-fit-text is text or other inline content, but it can also contain non-inline content.

If the content of the amp-fit-text overflows the available space, even with a min-font-size specified, the overflowing content is cut off and hidden. While overflowing content is visually truncated to fit the container, note that it’s still present in the document. Do not rely on the overflow behavior to simply “stuff” large amounts of content in your pages – while visually it may look appropriate, it may lead to the page becoming overly verbose to users of assistive technologies (such as screen readers), as for these users all the truncated content will still be read/announced in full.

You can style the amp-fit-text with standard CSS. In particular, you can use text-align, font-weight, color, and many other CSS properties, with the main exception of the font size.

(b) Amp-timeago

inline_img_12 inline_img_12

Purpose→ amp-timeago component allows you to count up to, or away from, a specified date and time. The component replaces the text node with a fuzzy timestamp, such as ‘in 30 years’ or ‘3 hours ago.

Example: You can use it to insert elements like timestamps or dynamic timers for updated ETA of order, time left for an event, etc.

Required Scripts→ <script async custom-element=”amp-timeago” src=”https://cdn.ampproject.org/v0/amp-timeago-0.1.js”></script>

Description→ The amp-timeago component requires a placeholder in the text node. The calculated timestamp replaces the placeholder once ready. Use the placeholder as a fallback to display to users if amp-timeago is unable to process the fuzzy timestamp.

The required DateTime attribute sets the date and time. The value must be an ISO DateTime.

The locale attribute allows you to get an output in a different language. By default, the locale is set to en(English). You can add the locale attribute and specify one of the 44 values (like el{Greek}, hi-IN{Hindi}, nl{Dutch}, etc.) to change the locale. 

You will find detailed information here if you wish to learn more about the presentation components.

AMP components are the building blocks of AMP emails. Each component lets you add different appearances and functionalities to the email, making it more interactive and engaging. 
We have covered all the technical aspects of components needed to create interactive and dynamic AMP email campaigns. If you would like to read more on each of the above AMP components, visit amp.dev.

Things to consider before you jump onto the bandwagon

AMP can transform the way your email campaigns interact with your customers and drive up the ROI; however, there are a few challenges to executing AMP emails effectively. Before you get started with AMP for email, here are some points to consider.

Challenges with creating an AMP email

AMP email is quite advanced compared to regular HTML email and therefore requires specific skill sets. To create AMP emails, you need to use AMP-specific codes, markup languages, HTML, CSS, and Javascript. 

Every AMP component has several attributes and rules that you will have to understand and apply correctly for them to work. You might need to go a few experimental rounds before you perfect the coding for an AMP email.

Ensuring an HTML fallback option for AMP email

When building AMP emails, you need to add a third MIME part (Text / x-amp-HTML) in addition to HTML and plain text. This serves as an HTML or plain text fallback option wherever AMP email is not supported. 

It is compulsory to build an HTML fallback as many MSPs do not support AMP emails. In such cases, the AMP part is removed at the time of forwarding the email, and the recipient gets to see a regular HTML/plain text email.

Getting the permissions for AMP email

At present, only a few MSPs support AMP for email; first, you need to register and authenticate your sending domains with them. This is a one-time process that gets your domain whitelisted. 

The registration process needs you to comply with a list of guidelines and requirements that may vary for each MSP. Visit the AMP guidelines page of each MSP to understand and comply with the prerequisites. You will find more details in the next segment, ‘How do you go about creating an AMP email?’.

Finding an EMAIL SERVICE PROVIDER (ESP) that can handle AMP email

Not many ESPs can efficiently handle AMP for email: to support AMP emails, the ESP needs to be fully equipped for the job. Several coding components like tags, doctype declaration, etc., must be included to design the AMP email accurately. Besides creating a qualified AMP email, the ESP should be able to support the MIME part to send and receive AMP emails. 

AMP emails also demand strict compliance with security requirements; therefore, finding the correct ESP that can support you with setup and integration formalities is crucial. Consider the legacy and expertise of the ESP in rolling out AMP email campaigns. Questions to ask would be, are they doing it on scale and at global levels?

How do you go about creating an AMP email?

When it comes to getting creative, an AMP email offers greater possibilities than an HTML email. You can include a range of functions like drop-down menus, sidebars, in-email form submissions, image galleries, and more within the email. AMP emails can be highly engaging if done correctly. Here is all you need to know about creating an AMP email.

Get access from Google

The journey to send AMP emails requires you to cover some ground with Google first. Google has laid down guidelines and requirements that you must meet to send AMP emails successfully. Here are the steps you need to follow to use AMP for email within Gmail.

(1) Build an AMP email

The journey begins with choosing and combining the AMP components. Pay extra attention while handling the authentication requests for AMP email creation. 

Authenticating the user is often required when emails contain dynamic, personalized content. To authenticate requests made from AMP emails, you may use access tokens.

Access tokens are supplied and checked by the email sender. The sender uses the tokens to ensure that only those with access to the AMP email can make the requests contained within that email. Access tokens must be cryptographically secure and time- and scope-limited. They are included within the URL of the request.

For example, when using <amp-form>, place your access token in the action-xhr URL.

<form action-xhr=”https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN” method=”post”>

<input type=”text” name=”data”>

<input type=”submit” value=”Send”>

</form>

(2) Test the AMP email

Before sending the AMP email, you must test it in Gmail. Testing ensures that the dynamic email that you’ve created is working as desired. You can test it to verify its contents and behavior.

There are two options for testing your dynamic emails in Gmail:

  • Use Gmail’s AMP for Email Playground to draft AMP emails, see a live preview, and have your emails sent to your own Gmail account for testing. 
  • Navigate to Gmail Settings > General > Dynamic email and click Developer settings. This opens a dialog where you can whitelist an email address that can send you dynamic emails for testing purposes. The AMP version of emails sent from the listed address to your account is rendered, even if the email address is not registered with Google. This lets you test your dynamic emails on your own accounts before registering to ensure they are working as expected.

For your AMP email to be delivered to any account, the email must meet the following conditions:

  • The AMP for Email security requirements must be met. These include:
    • Sender authentication
    • DKIM alignment
    • TLS encryption
    • HTTP proxy
    • CORS headers
    • Restrictions
  • The email must contain a fallback HTML version (text/HTML) or plain text version (text/plain) in addition to the AMP MIME part (text/x-amp-HTML). This fallback version is displayed in situations where the AMP MIME part cannot be displayed, such as when the mail client is offline or 30+ days after the email was received by Gmail.
  • The AMP MIME part must contain a valid AMP document.
  • The email should include the AMP MIME part before the HTML MIME part.
  • The From and To header fields of the email must contain different email addresses.

(3) Register with Google

When you are ready to launch your dynamic emails to your users, you must register with Google by following these steps:

-Make sure that you meet all the guidelines and requirements listed below.

  • 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 Prevent mail to Gmail users from being blocked or sent to spam guidelines.
  • A low rate of spam complaints from users.

– Send a real, production-ready email coming from your production servers (or a server with similar SPF/DKIM/DMARC/From:/Return-Path: headers), including the dynamic email MIME part, to [email protected] Google needs this to check that you comply with all the guidelines and requirements. As you send this email, do the following:

  • Make sure that the AMP version of the email is correct before sending the email by testing it in Gmail
  • Send the email directly instead of forwarding it. Gmail removes AMP MIME parts when forwarding an email. 

-Fill out the registration form and await Google’s response. Google aims to respond to most requests within five working days.

Your participation as a sender of a dynamic email is subject to compliance with the Prevent mail to Gmail users from being blocked or sent to spam guidelines, which are subject to change without notice. You are responsible for ensuring compliance with the current guidelines. Your participation may be revoked at any time if abuse or policy violations are discovered or at Google’s discretion. We may request additional information during the registration process or after registration is complete to verify your compliance.

Gmail’s AMP rendering relies on modern browser features which are not supported by all web browsers. On incompatible browsers, emails fall back to HTML. The tables below display the compatibility details with different browsers and mobile OS.

Desktop Browser Compatibility Table

Browser
Minimum version
Chrome
69
Edge
Not supported
Firefox
58
Internet Explorer
Not supported
Opera
48
Safari
10

How can Netcore Cloud help you effectively increase ROI with AMP emails?

Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month for businesses across 12 countries. The expertise and experience in email deliverability and inboxing are unmatched. 

Netcore Cloud offers an enterprise-ready AMP editor, which makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to quickly build engaging AMP emails. To customize the creation further, you can also connect with the in-house team of AMP experts that helps you design AMP emails for specific use cases.

At Netcore, we also help you with the setup and integration of AMP for email. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize ROI from your email marketing campaigns. 

Netcore Cloud has helped 50+ global brands roll out interactive emails powered by AMP and achieve their goals. We work as an extension of your team to provide quick solutions. To know more, keep reading as the next segment details the achievements of brands that collaborated with Netcore to build interactive AMP email campaigns.

AMP success stories

Netcore’s team works together with your marketing team to help you leverage the power of AMP emails and drive business revenues. 

Have a look at a few success stories of brands that have used Netcore Cloud’s services to improve their ROI through AMP emails. You will get actionable insights into the results you can achieve by reconstructing your marketing plan with AMP for email.

How Netcore helped YourStory adopt AMP interactivity to turn around its email marketing and increase conversions by a whopping 5.5X

YourStory’s marketing team leveraged the power of AMP emails with Netcore Cloud to skyrocket YourStory’s event registration numbers with AMP emails; here’s the link to the full story.

Axis Securities increases its open rate by 27% and click rate by 24% with Netcore Cloud’s AI-powered email delivery

Axis utilized the unique capabilities of AMP to engage with the email recipients dynamically based on suggestions from Netcore Cloud’s team. Learn how the customer engagement rates shot up; here is the link to the complete story.

CaratLane increases the CTOR by 300% for their new product launch, “Borla,” through interactive AMP emails from Netcore Cloud

CaratLane partnered with Netcore Cloud to incorporate interactive AMP emails for their new product launch. Learn how this approach boosted conversions and ROI; here is the link to the full story.

Several top-notch brands across industries and geographies partner with Netcore Cloud’s AI-powered email platform to uplift their email revenues and boost ROI through AMP emails.

Our AMP email wizards consult and guide you to achieve your KPIs and email marketing goals. Connect with us to understand how you can benefit from our expertise and experience – we send over 18 billion emails a month for businesses across 18 countries.

NOTE: AMP is an open-source library, and all scripts and descriptions, as well as further readings, have been referenced to amp.dev and linked accordingly.

Unlock unmatched customer experiences, get started now

Let us show you what's possible with Netcore.
Get Started Now