How to Build AMP Emails with Stripo
Wanna keep up with the times and send AMP-powered emails over to your recipients?
Gmail in its AMP emails guidelines specified that when building such emails, you will need to add some code elements to email header and to its doctype! Stripo does it all for you — no coding skills needed at all.
Google also offers its Gmail AMP for Email Playground where you can code AMP emails from header to footer. But the emails you build with it, render in the Gmail’s desktop clients only. Eventually, Yahoo, Outlook.com, Mail.ru will also support AMP for emails. But what about the rest of your customers?
Today, we’re gonna show you how to build AMP emails with Stripo that render correctly in all email clients.
Let us remind you that in order to be allowed to send out AMP emails, you need to get registered with Google. In the previous post, we shared our personal experience on how we got whitelisted with Google.
How to build AMP-powered email with Stripo
Currently, there are two ways of building AMP emails with Stripo:
Way 1. Using the Stripo's AMP blocks
Today, we offer image AMP-carousel block. This means that you do not need to make any changes to codes. No HTML skills required.
You just drag and drop this block into your HTML email template.
So, to build AMP carousel, you need to:
- drag the AMP-carousel block into your HTML email template;
- then set the "preview" image width. Preview images are the small images under your carousel. They annotate how many slides there are in the carousel and what they are;
- add as many slides in your carousel as you need;
- remember to add links to all slides. By clicking them, your users will be directed to respective pages on your website.
Important to note:
This element by default will be shown only to those recipients whose email clients do support AMP for emails. For other users, you need to build a fallback: this could be a banner and a bunch of product cards aka product content modules.
Remember to enable them for the HTML version of your email only.
Please, find the full manual in this dedicated blog post.
All other elements of your emails should be enabled for both versions of your email.
This summer, we'll release two more AMP-blocks.
Way 2. Using the code from Gmail Playground.
This way requires just a few steps:
Step 1. Build a traditional HTML email template.
To do so, you may either build one from scratch by dragging blocks, or you may use any of our 300 ready-to-use email templates
Step 2. Build AMP element with Gmail AMP for Email Playground.
Google offers a wide variety of prepared AMP elements.
We’re going to use the AMP-carousel element.
in the Gmail playground, click the dropdown menu to choose AMP-carousel;
once you’ve clicked it, to the left in the code editor, you will see the AMP-carousel code. Find the following line in the code:
<amp-img src="https://www.google.com/images/background/p1.jpg" width="800" height="600" layout="responsive"></amp-img>” line and remove it, as it just specifies the source of the images used below
now, in this code sample, please edit the image width, that was set by default, from 800 to 600 pixels as this is the most common width size;
change the height from 600 to 480 pixels to save the image ratio;
now, replace all the links wrapped in the <href> attributes with the links to the necessary images you host on your website or any other image hosting site;
highlight and copy the embed code with 4 images in AMP-image carousel;
<div class="images"> <amp-carousel width="600" height="480" layout="responsive" type="slides"> <amp-img src="https://image.freepik.com/free-photo/school-backpack-school-supplies-with-chalkboard-background_53476-528.jpg" width="600" height="480" alt="a sample image"></amp-img> <amp-img src="https://image.freepik.com/free-photo/stylish-teenage-workspace-with-yellow-backpack-reading-lamp_23-2147878350.jpg" width="600" height="480" alt="another sample image"></amp-img> <amp-img src="https://image.freepik.com/free-photo/father-leads-little-child-school-boy-go-hand-hand-parent-son-with-backpack-back_90791-15.jpg" width="600" height="480" alt="and another sample image"></amp-img> <amp-img src="https://image.freepik.com/free-photo/rear-view-group-diverse-kids-wearing-backpack_53876-75383.jpg" width="600" height="480" alt="and another sample image"></amp-img> </amp-carousel> </div>
Step 3. Paste the embed code in Stripo
In Stripo, drag the 1-column structure in your prepared template;
in the setting panel, in the “include in” section, set “⚡HTML”;
This means that AMP image carousel will be shown only in those email clients that support AMP;
drop the HTML block in it;
double click it to open the “HTML code editor”;
replace the “Insert your HTML code” with the embed code;
in Google Gmail Playground, copy the script that specifies what AMP element you’re about to use. It’s located in email head below the <style> attributes before the closing</head> tag;
if you, like us, are going to use AMP-carousel, here’s the script to embed:
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
open HTML code editor of entire email template by clicking the “Code Editor” button above the template;
insert the embed script right above the closing </head> attribute;
close the code editor. Done!
Those recipients whose email clients support AMP, will see this AMP image carousel, while others — will not. Hence, we need to create a perfect banner for them, too, as a fallback.
To do so, you need to:
drag the one-column structure into your template;
in the settings panel in the “Include in” section, choose the “HTML” version of your email — by doing this, your banner will be enabled only to those recipients, whose email clients do not support AMP;
In the Stripo editor, you can easily see what elements are enabled for the traditional HTML version of your email, what elements are enabled for the AMP HTML version of your email, and which will be shown in both versions.
The containers/elements marked with “HTML” will be shown only to those recipients whose email clients do not support AMP for Emails. While the ⚡HTML elements will be shown only to those recipients whose email clients do support AMP.
Elements/containers that have no marks, will work for the both versions of the email.
Now that your AMP email is built, you need to preview it.
How to preview AMP emails with Stripo
This is a very essential step at building any kind of emails: AMP HTML or traditional HTML emails.
to preview AMP HTML email with Stripo, click the preview button above the template;
in the settings panel in the preview email mode, click the necessary version of your email;
to check out the other version of your email, just switch the button
Important to note:
Please, be advised, that AMP elements do not work on mobile devices. All recipients will see the traditional HTML email version when seeing the email on their mobiles.
Once you’ve previewed your email, we strongly recommend that you test your email. Our embedded testing tool will only test the traditional HTML version of your email and will also show if AMP elements are displayed in Gmail and Mail.ru. But it won't show if AMP elements are clickable. To check this, you need to send a test email to yourself.
How to test AMP emails with Stripo
To be able to send test emails from Stripo, you need to enable us to send test emails to your account.
If this is your personal account, you need to:
- in Gmail, go to the settings panel - click the "Settings" icon;
- in the dropdown menu, click the "Settings" section;
- in the new window, in the "General" section, find the "Dynamic content" and open the "Developer settings";
- paste this email address firstname.lastname@example.org;
- click save.
If this is your corporate account with G-suite, you need to:
As of July 2, all the G-suite users are also able to receive AMP emails.
Ask your manager to enable "Dynamic emails" for you. And then you will only need to add our address to receive test AMP-powered emails from Stripo.
Please, be advised: changes come into effect within 24 hours.
How to export AMP email to your ESP
Currently, only 4 ESPs support AMP for Emails:
- eSputnik — via the API method only. The SMTP method will be added soon;
- Amazon SES and PinPoint — via the API method only;
- SparkPost — via the SMTP and API methods;
- SendGrid — via the API method only.
You cannot export AMP emails from Stripo to any of the aforementioned ESPs. But you can download your email as AMP HTML file and import it into the necessary ESP.
So, how to export your AMP email from Stripo:
click the “Export button”;
among the multiple options, select “AMPHTML”;
in the pop-up window, click the “HTML-file” button. Then, all images will be hosted on our servers;
- in your ESP, open the "code your own email" section;
- drag the downloaded AMP HTML file in this section;
We want to remind you that prior to sending AMP emails out to recipients, you need to get whitelisted with Google.
Email clients that support AMP emails:
- Gmail — yes;
- Mail.ru — yes;
- Outlook — coming soon;
- Yahoo and AOL are also working on it — coming this summer.
Remember that your AMP HTML email that you've built with, contains the AMP HTML version and the traditional HTML version of your email.
Those recipients' whose email clients do no support AMP, will see the traditional HTML email; while those whose email clients do support AMP, will see your sophisticated emails. Remember, we learned to hide AMP-elements in regular emails?
Try building AMP emails with Stripo right away!