Utilizing AMP to create engaging emails
You may have noticed some companies utilizing emails to their fullest potential, with some featuring a lightning bolt next to the timestamp (if you’re a Gmail user). But what exactly does this mean?
This ⚡ symbol represents a dynamic email, which is able to update itself with new information using the power of Accelerated Mobile Pages, or AMP for short.
Now the purpose of emails are different for every company, but the most common emails I receive persuade the user to enter the company’s website. Whether these emails ask to verify your account, or simply provide a notification, both of these emails require the user to click a link and leave their email client. This creates friction for the user, which is where AMP comes in.
Now, how can you as a marketer or developer use AMP effectively to increase interaction with your campaigns?
Although the possibilities are endless, here are a few of my favorite ways.
1. Accordion Text (Drop Down Text Boxes)
Users can experience information overload upon opening your email, especially if it is about a technical product with many features. Drop-down text boxes are one way of mitigating this problem, as it allows users to expand the information they truly care about.
My first experience with this feature was in the Google Pixel Superfan email campaign, in which they featured an interview with Rick Osterloh, the Senior Vice President of Google Devices and Services. In this instance, users can click each question in order to read Osterloh’s response to the aforementioned question all within the email.
Creating an effect like this is simpler than you think! After importing the ‘amp-accordion’ element into your project, simple HTML can be used to create accordion menus that contain both text and images.
In the Pixel Superfan example, you would create a section header that contains the question wrapped in the <h4> tag (depending on the CSS styling of your choice). Underneath the header, you can add the Osterloh’s response in <p> tags, which indicates paragraph styling.
Since AMP is a responsive framework, this section can automatically scale depending on the user’s current device.
<amp-accordion class="sample" animate>
<section>
<h4>Insert Question Here</h4>
<p>Insert Response</p>
</section>
<section>
<h4>Insert Section Two Here</h4>
<amp-img src="https://imagelink.com/image.jpg" layout="responsive" width="400" height="710"></amp-img>
</section>
</amp-accordion>
In this example, the animate attribute is added to apply smooth animations when expanding and collapsing the section.
2. Account Verification
To me, verification emails are one of the most annoying features that websites have implemented. After creating an account, users typically receive an email asking them to click a link for account verification. This, of course, opens a secondary tab that is logged into the website, sometimes disregarding the original page the user was accessing.
Instead of this ancient method, utilizing AMP can be a simple way to verify an account without opening unnecessary tabs. With the AMP framework, you can use a conditional state in order to send updates to the server.
To perform this, import the ‘amp-form’ element in your project, and utilize a form to submit this verification. Here, we create two radio buttons which allow the user to verify they created the account (this can be replaced with other input methods depending on the style of the email).
<form method="post" action-xhr="https://amp.dev/documentation/examples/api/submit-form-input-text-xhr">
<div class="m1">
<p>Did you request the creation of an account?</p>
<input type="radio" id="rating1" name="verified" value="1" on="change:step2.show" required>
<label for="rating1">Yes</label>
<input type="radio" id="rating2" name="verified" value="0" on="change:step2.show">
<label for="rating2">No</label>
</div>
<input type="submit" value="Create Account">
<div class="m1" submit-success>
Thank you for creating your account.
</div>
</form>Once the user presses the submit button, the response is sent to the server, verifying the account directly from the email without having to open an additional tab. This method does require a server endpoint to handle the XMLHttpRequest (XHR).
3. Modifying Reservations
There are more features available by utilizing the form element, and one idea I suggest would be modifying reservations. After confirming a dining reservation, users are sent an email redirecting them to the original website to either modify or cancel their reservations. Instead, what if the user could modify their reservation without ever having to leave their email?
With AMP, companies could instead turn the modify reservation button into a form showcasing a calendar, in which users could select a different time and number of people for the reservation. Utilizing the ‘amp-date-picker’ component, users can select a date or range of dates and times.
A Mexican restaurant might feature a taco on the calendar to represent Taco Tuesday when scheduling a reservation. When paired with a component such as forms, you could submit all information back to the reservation website to make changes all within the user’s email.
(Note: The solution I am about to mention is currently using AMPHTML as opposed to AMP for Email, however should be possible simply using ‘amp-form’ components. Depending on your email marketing software, this may or may not function properly.)
<amp-date-picker id="simple-date-picker-2" type="single" mode="overlay" layout="container" on="select:AMP.setState({date2: event.date, dateType2: event.id})" locale="en" format="YYYY-MM-DD" open-after-select input-selector="[name=date2]" class="example-picker space-between">
<input class="border-none p0" name="date2" placeholder="Pick a date">
<button on="tap: simple-date-picker-2.clear">Clear</button>
<template type="amp-mustache" date-template dates="FREQ=WEEKLY;DTSTART=20180101T000000Z;INTERVAL=2;WKST=SU;BYDAY=TU" id="tacos2">
<span>🌮</span>
<span class="taco-tuesday"></span>
</template>
<template type="amp-mustache" info-template>
<span [text]="date2 ? 'You picked ' + date2 + '.' +
(dateType2 == 'tacos2' ? ' Happy Taco Tuesday!' : '') : ''">You will see your chosen date here.</span>
</template>
</amp-date-picker>
4. Dynamic Data
One of the largest benefits of utilizing HTML emails is being able to access real time data. Whether you want to show customers stock of your e-commerce website, or show shareholders your company’s current stock price, AMP can easily handle both of these tasks.
By utilizing the ‘amp-list’ & ‘amp-mustache’ components, you are able to pull information directly from .json files featured on your servers.
This example featured on the amp.dev website shows off how you can import an itemized list showcasing product photos and information. It starts off by creating a placeholder template while the user pulls information from the server. Once the images and data loads properly, the product information is replaced with the proper data, including: image, name, star rating, and price.
<amp-list id="amp-list-placeholder" noloading layout="fixed-height" height="654" src="https://amp.dev/documentation/examples/api/slow-json-with-items/?delay=5000" binding="no">
<div placeholder>
<div class="product">
<div class="image-placeholder"></div>
<div>Loading...</div>
</div>
<div class="product">
<div class="image-placeholder"></div>
<div>Loading...</div>
</div>
<div class="product">
<div class="image-placeholder"></div>
<div>Loading...</div>
</div>
</div>
<template type="amp-mustache">
<div class="product">
<amp-img width="150" height="100" alt="{{name}}" src="{{img}}"></amp-img>
<div>
<div>{{name}}</div>
<div>{{{stars}}}</div>
<div>${{price}}</div>
</div>
</div>
</template>
</amp-list>If a company needs to change these prices, or even feature a product on sale, there is no need to resend the email, as they can simply update the file on the server.
5. Customer Social Media Showcase
Another interactive feature showcased in the Google Pixel Superfan email was the use of carousels to display customer’s social media posts. Instead of filling up the vertical space in an email, AMP allowed Google to have three pages of customer images that scroll horizontally.
In addition to reducing email length and unnecessary clutter, this can also help increase viewer retention, as customers may stay longer in order to view all of the featured photos. Additionally, customers may scroll through the entire showcase to see if their photo was featured in this edition’s newsletter.
Using AMP, you can create a carousel only using five lines of code. Simply import the ‘amp-carousel’ component into your project, and wrap your images in the ‘amp-carousel’ wrapper.
<amp-carousel height="300" layout="fixed-height" type="carousel" role="region" aria-label="Basic usage carousel">
<amp-img src="https://amp.dev/static/samples/img/image1.jpg" width="400" height="300" alt="a sample image"></amp-img>
<amp-img src="https://amp.dev/static/samples/img/image2.jpg" width="400" height="300" alt="another sample image"></amp-img>
<amp-img src="https://amp.dev/static/samples/img/image3.jpg" width="400" height="300" alt="and another sample image"></amp-img>
</amp-carousel>You are free to add any additional formatting options to the amp-carousel wrapper, such as ‘autoplay’ if you want the slides to automatically scroll without the user’s input.
Those are my top five ways to utilize AMP for email marketing, as they can increase retention rates and lead to frictionless user experiences.
All code snippets were taken or modified by me from: https://amp.dev/about/email. Feel free to read the documentation to see how to implement this great tool in your own campaigns! Good luck!
