GuidesAPI ReferenceRelease Notes
Guides
Email ComposerDashboardReportsHow-To TutorialsFAQsDeprecated Features

Interactive Email with AMP

Suggest Edits

🚧

This feature is still under Beta.

An Email with AMP can be designed without using Drag-and-drop Email Composer. You can copy and paste the code in What tab and proceed to deploy an Email deployment. Follow the below link to view some of the common reasons that dynamic emails fail to render and instead fall back to the basic text or HTML https://developers.google.com/gmail/ampemail/debugging-dynamic-email.

AMP Overview

AMP for Gmail allows you to create rich engaging emails, making Interactive elements available within an email. It is a set of HTML tags backed by JavaScript to create interactive elements for email.

The AMP for Email format provides a subset of AMP components that you can use in email messages. Recipients of AMP emails can view and interact with the AMP components directly in the email.

AMP Supported Email Clients

AMP Email format is currently supported by the following email clients:
• Gmail on Desktop Browser
• Gmail Mobile Apps (iOS and Android)
• Mail.ru

Other email clients like Yahoo are expected to support it in the near future.

Pre-requisite for sending AMP email from an email address:

You need to register your ‘From’ email address with Google before sending out AMP emails.

Please go through the steps and guidelines listed here: https://developers.google.com/gmail/ampemail/register

Follow these steps to create a template with AMP block:

  1. In Webex Campaign, from the Message Template list screen, click Drag & Drop Email Composer.
  2. From the Flexi Structures, add a 1 Column Flexi block.
  3. From the AMP Blocks (Beta), add the Carousel block in 1 Column Flexi structure.
  4. Select the Carousel block. The Style Palette will display the options to select an image.
  5. (Optional) Enter a link to navigate the user when the image is clicked.
  6. (Optional) Enter an Alternate text.
  7. Click + Add Slide to add more slides. You can add up to 5 slides.
  8. Click Save & Exit.

Previewing AMP Content

You can preview the AMP content using 'Desktop preview' and 'Mobile preview' features in Email Composer.

  • If you added any AMP Email Block on the design canvas, then you will see the ‘AMP Preview’ checkbox on the black menu bar at the top.
  • This checkbox will be selected by default and the preview of the AMP interactive content will be shown.
  • To see the fallback HTML preview you can unselect this checkbox.

Adding an AMP template in an Email Deployment

When creating an Email Deployment, to use a template that has AMP content, under the Email channel node, click Chose from Existing Template and select the template. You can also directly paste your own AMP-HTML code into AMP HTML tab.

To disable the link tracking, the keyword notrack is added in the anchor tag for HTML. This key is not supported in AMP HTML. That means by default all links will be tracked.

📘

It is mandatory to provide the fallback HTML code. This fallback HTML version is rendered by email clients which do not yet support the AMP Email format.

Adding a Fallback HTML

It is mandatory to provide the fallback HTML code. Click the HTML tab and add the corresponding fallback HTML. This fallback HTML version is rendered by email clients which do not yet support the AMP Email format.
Click the below link to view various reasons why AMP rendering fails and fall back to HTML.

https://developers.google.com/gmail/ampemail/debugging-dynamic-email#fallback_reasons

AMP Email Templates- Usage notes, constraints, and caveats

  1. When an AMP Block is used in an Email Template, the Email Composer will auto-generate two source code files: AMP HTML and HTML. Both these source code files are available by clicking the ‘Download’ button.

  2. An AMP block should be used in a new email template. Adding an AMP block to an already existing non-AMP email template is not supported.

  3. AMP email templates only support ‘secure links’ (i.e. those beginning with HTTPS). If you use any HTTP links within an AMP email template, then only the fallback HTML content will be rendered.

  4. The Heat map is not available for AMP HTML.

  5. The following Blocks are not supported within an AMP email template:

    • Partial
    • Conditional Content
    • HTML Source Code

  6. Although the ‘Partial’ block is not supported within an AMP template, you can still leverage already created HTML Partials by using the ‘Editable Partial’ block.

  7. Within the 1-Column and 2-Column structures, the property Full width background color property is not supported for AMP email blocks.

  8. Within the 1-Column, 2-Column, and 3-Column structures:

  • Background Image property is not supported for AMP email blocks
  • Horizontal alignment on mobile property is not supported for AMP email blocks
  1. For the ‘Text Block', the properties Different font size on mobile devices and ‘Apply Custom Font’ are not supported within an AMP email template.

Updated over 2 years ago