AMP for Developers: How to Create and Edit AMP Blocks

Principles of Creating AMP Emails

AMP emails use AMP HTML and special AMP components to create interactive and dynamic content. They allow users to interact with the email directly within their email client.

Basics of Creating AMP Emails

AMP emails are created using AMP HTML, which includes a special subset of HTML with restrictions and additional attributes and elements. Unlike standard AMP pages, AMP emails require the use of <script type="text/plain" application/json"> for dynamic content and components such as <amp-form> , <amp-bind> , and <amp-list> .

Tools for Debugging AMP Emails

AMP Validator: This tool checks AMP code for compliance with standards. AMP Validator
Google Search Console: Provides information on how Google views your AMP pages. Google Search Console
AMP Playground: An online tool for creating and testing AMP pages in real time. AMP Playground
Gmail AMP for Email Playground: An online tool for creating and testing AMP pages in real time with stricter validation of AMP HTML. How this tool displays AMP HTML is how it will appear upon sending. Gmail AMP for Email Playground

AMP Block and Email Templates

There are various examples and templates of AMP blocks and emails available in the official AMP documentation and the AMP Project repository on GitHub. Some of them include:

AMP email By Examples: AMP email By Examples
AMP email Introduction: AMP email Start

General Documentation on AMP Emails

The official documentation on AMP is available at AMP.dev about email.

AMP in Emails

AMP emails differ from regular HTML emails as they support interactivity and dynamic content through AMP components. Key differences include:

AMP Components: Use of <amp-form> , <amp-list> , <amp-bind> , and other components to create interactive content.
Restrictions: Custom JavaScript is not allowed.
Security: Strict security requirements to prevent abuse.

Important Points When Creating or Editing AMP Emails

Performance Optimization: Consider the limitations on CSS sizes and other rules to ensure fast loading times.

Testing: Use validation and testing tools for AMP emails to ensure functionality.

Compatibility: Make sure your AMP email displays correctly on all supported email clients.

Security: Adhere to all security requirements to avoid vulnerabilities.

Support for Alternative Content: Include regular HTML and plain text versions of the email for clients that do not support AMP.

These principles and tools will help you effectively create and manage AMP emails, providing interactivity and dynamic content directly in the user's email client.

Using `data-amp-attrs` and `data-amp-tag` Attributes in Markeaze's HTML Editor

data-amp-attrs : This attribute allows you to add AMP logic to element attributes. It accepts a string in the format "key|value", where the value represents the AMP logic. Multiple attributes can be added using ";", for example: data-amp-attrs="[class]|wish !={{id}} ? 'hidden-img result' : 'visible-img result';[src]|{{imageUrl}}" .

data-amp-tag : This attribute is used to rename a tag to a specific AMP tag. For example, if you have an HTML <div> tag and want it to be converted to <amp-list> , you can use data-amp-tag="amp-list" . As a result, in the final HTML code, this tag will be transformed into a valid AMP tag that the user will see in the editor.

Example Usage

<div data-amp-attrs="[class]|wish !={{id}} ? 'hidden-img result' : 'visible-img result';[src]|{{imageUrl}}" data-amp-tag="amp-list">
  <!-- Content -->
</div>

This code converts the <div> tag into an <amp-list> and adds AMP logic to the class and src attributes.