Skip to main content

Explore Advanced Ways to Use AMP

Learning Objectives

After completing this unit, you’ll be able to:

  • Use GTL and AMPscript in AMP emails.
  • Create an AMP form email using Code Resources.
  • Add CORS headers for security.

Get Coding

Now that you have the basic components and tools, this unit provides tips, code samples, and best practices to help you with your development of AMP emails. Finally, we cover a more advanced use case featuring an interactive form. Let’s start with a few more tips for coding with AMP.

Using HTML and CSS in AMP

It’s often helpful to start with your fallback HTML email in the AMP playground. In fact, AMP has very good support for modern CSS and HTML. Here are some tips and tricks for converting your HTML emails to AMP emails.

  • Include AMP attribute in HTML <html ⚡4email lang="en">
  • Include data-css-strict attribute to improve CSS validation <html ⚡4email data-css-strict lang="en">
  • Include AMP <script>elements
  • Only use a single style block <style amp-custom> and remove any !important statements from the CSS
  • Wrap your content in <article> element, don’t use <main>
  • Replace <img> with <amp-img>

Using AMP with AMPscript or GTL

More good news. You don’t have to strip your perfectly crafted emails of Marketing Cloud Engagement scripting languages: AMPscript and Guide Template Language (GTL). But if you are copying an HTML email that uses either AMPscript or GTL into the AMP playground, you need to be aware of a few caveats.

  • ContentBlockBy functions don’t work with AMP.
  • Validation errors:
    • Content Builder code snippets may produce AMP validation errors.
    • The AMP Playground validator won’t recognize AMPscript or GTL.

Also, to send an inbox test within Marketing Cloud Engagement, change GTL Delimiters{{={<>}=}}at message level to avoid conflict with AMP Mustache. Let’s discuss this a bit more.

Mustache Care 

Both Guide Template Language (GTL) and AMP Mustache templates use the same delimiters (double curly braces {{ and }}).

This means that when sending AMP emails containing Mustache templates via Marketing Cloud Engagement you need to add a snippet of code at the top to change the GTL delimiters.

<!-- {{={< >}=}} -->

This snippet changes the delimiters from {{variable}} to {<variable>}

Note

Learn how you can change these delimiters to any characters you want in the dev doc Set Delimiters.

Test It Out

You can test this in Marketing Cloud Engagement by using the following AMP for Email code. Test one email with the code below and another that removes <!-- {{={< >}=}} --> to see what happens when you do not account for the delimiter conflict.

<!-- {{={< >}=}} -->
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
Check out these latest deals from our store!
<amp-list src="https://amp.dev/static/samples/json/cart.json" layout="fixed-height" height="80">
<template type="amp-mustache">
<div id="cart">
<!-- These items (and their prices) can be updated dynamically. -->
{{#cart_items}}
<div class="cart-item">
<span>{{name}}</span>
<span>{{price}}</span>
</div>
{{/cart_items}}
{{^cart_items}}
There are no featured products available. Please check back again later.
{{/cart_items}}
</div>
</template>
</amp-list>
</body>
</html>

Storing Data

AMP for Email allows for complex emails that include web-like forms. But as mentioned in the previous unit, you need to plan in advance for data collection. Before you create an AMP email that includes form functionality, you need to be familiar with Code Resources, a feature within CloudPages. By creating a code resource in CloudPage, you can store and execute snippets of code in various types—including JSON, JavaScript, and XML. AMP for Email specifically uses the JSON code resource to create a custom data source that stores the data collected from AMP emails at the time of open. 

Create a Form Using AMP

To help you understand how Code Resources work with AMP, let’s review a more advanced use case for Northern Trail Outfitters (NTO). The NTO team would like customers to fill out a form directly in their email for delivery instructions. Here are the high-level steps to complete this task.

  1. Create a data extension to store your data.
  2. Create a JSON Code Resource in CloudPages.
  3. Create your email in both HTML and in AMP.
  4. Add the Code Resource URL to your form code.

Let’s follow along as Michele Hansley, NTO’s technical marketer, completes these steps.

Create the Data Extension

Within Contact Builder, Michele creates a new data extension with the following configuration.

  • Name: NTODeliveryForm
  • External Key: amp-NTODeliveryForm-de
  • Attributes: nothome, drivernote, phone (All strings, drivernote 500 character length, others 50 character length)
Note

The following steps and code samples are for the fictional company, Northern Trail Outfitters, and may not work as intended within your account.

Create a JSON Code Resource

Next Michele navigates to CloudPages under Web Studio.

  1. She begins by clicking Create Collection.
  2. She names her collection, Delivery Email CR.
  3. She opens the collection and then clicks Add Content to create a content type.
  4. She selects Code Resource.
  5. She names the resource Delivery Email, adds a description, and selects the NTO URL.
  6. She clicks Next.
  7. She selects JSON and clicks Save.Create a Code Resource Page with JSON selected
  8. Michele pastes the needed code into the editor.
  9. Next she updates the senderAddress to NTO’s AMP Approved address.
Var isAllowed = {senderAddress: ['amp@gmail.dev','retail@email.nto.com'

Schedule and Publish

  1. She clicks Save.
  2. Then she clicks Schedule/Publish.

It’s important to copy and save the published URL to use in your email.

Code Your Email

Next Michele works on the HTML fallback email version in Content Builder and saves the content block.

Delivery Email AMP Code

Like before, Michele opens the AMP for Email playground website to work on the AMP version of the delivery email. 


Note

Find the delivery email code resources, HTML, and AMP code versions in the Delivery Email Code Sample documentation.

Here is what the fallback version and the interactive form version look like—as a static image, of course. To see the real deal, you can paste the provided code into the AMP playground to see the interactivity.Static fallback email with a link to add note and interactive email featuring a form to provide delivery instructions for NTO shipment.

Pretty nifty, right? 

A Word on Security

AMP for Email uses the CORS (Cross-Origin Resource Sharing) method to secure requests made from the email to outside services. CORS is a mechanism that uses HTTP headers to tell browsers which origins are allowed access to a resource using XHR, but CORS can be implemented for email as well. AMP for Email extends this mechanism by adding HTTP headers that similarly tell email clients which senders are allowed access to these resources. This coding should be implemented inside of a Code Resource using JavaScript.

Note

Find an example of the code headers on the CORS in the AMP documentation.

Follow Best Practices

As you use AMP for Email, we encourage you to create a list of your code elements and save them as content blocks. Lastly, we’ve gathered a few tips and reminders so that you get the most out of your interactive content.

  • Be sure to create content for all three MIME types: plain text, HTML, and AMP.
  • All email types allow for only one subject line and one preheader.
  • Design your emails using familiar website functionality to create an easy, user-friendly experience.
  • Use the built-in state options provided by AMP.
  • Test your content with the playground validator and in multiple email clients.
Note

Love AMP emails but don’t have the time to code? Follow-up with your account executive to learn about partners that can help you build your emails.

Email wizard, you are on your way to developing interactive content with AMP for Email! 

Resources 

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities