You are here:
AMP for Email Best Practices
Use these tips and best practices when building AMP emails in Marketing Cloud Engagement Content Builder.
General
- Ensure that your AMP email has an HTML fallback for email clients that can’t display AMP content.
- Ensure that you create content for all three MIME types.
- There’s one subject line and one preheader for all three MIME types.
- Design using familiar UI conventions.
- Use the built-in state options provided by AMP.
- AMP-list: placeholder, fallback. In this case, fallback is the name of the attribute used by AMP.
- AMP-form: submitting, submit-success, and submit-error
- Test with the validator AND in email clients.
- For AMP to work correctly, Multipart MIME must be enabled.
Use HTML and CSS in AMP
- AMP supports most CSS and HTML. Follow modern web standards when coding.
- You can also copy the code over from your HTML version. As a shortcut to get started, copy over your HTML version, then make edits to pass AMP validation.
- Include AMP attribute in HTML <html ⚡4email lang="en">
- Include AMP <script> elements.
- Only use a single style block and no important statements.
- Wrap your content in <article> elements and don’t use <main>
- Use <amp-img> instead of <img>.
- Images require SSL for AMP support.
AMP for Email and Marketing Cloud Engagement Scripting Languages
- AMP for Email can be used with AMPscript or GTL.
- Content Builder code snippets can produce AMP validation errors.
- ContentBlockBy functions don’t work with AMP.
- Though AMP validator doesn’t recognize AMPscript or GTL, you can preview and test an email in Subscriber preview in Content Builder to ensure your email renders correctly.
- To avoid conflict with AMP Mustache, change GTL Delimiters {{={<>}=}} at the message level.
Code Resources
A code resource is a CloudPages feature that allows you to store and load JavaScript, CSS, and other files from a message or page. Code resources work with all Marketing Cloud Engagement scripting languages. The JSON code resource allows you to create a custom data source for AMP emails to use at the time of open. See Code Resource.
These custom data sources can be used with certain amp components, such as:
- <amp-list> dynamically downloads data and creates list items using a template. See amp-list documentation.
- <amp-form> allows you to create forms to submit input fields in an AMP document. See amp-form documentation.
- <amp-autocomplete> suggests completed results that correspond to the user's field input. This feature can help the user complete their task quicker.
Security Concerns
AMP for Email handles request security by using the Cross Origin Resource Sharing (CORS) method to secure requests made from the email to outside services. If you use CORS, ensure that you use it inside a code resource. It’s the users discretion responsibility to use this level of security. See CORS security in AMP.

