What are the Data Sources?
Data Source is a place where you can pull information into emails by connecting these emails to the server.
Connecting emails to servers is time-consuming, but we created Stripo Data Sources for your convenience.
With the Data Sources service, Stripo took over all the processes of setting up the «connection» for each new campaign. In this way, we significantly save you time and create opportunities for fast data transfer to your newsletters.
AMP emails contain dynamic content. Quite often, they require amp-list components.
What is AMP-list?
AMP-list is a component that allows you to use dynamic content and update it in real-time. Your recipients will always see only fresh and relevant offers whenever they open your emails.
AMP-Lists is designed to help you implement gamification so you can update email content in real-time and allow your users to confirm appointments directly in emails.
How to create a Data Source in Stripo:
At the moment, Stripo supports 2 types of pulling data into emails:
Creating a JSON file;
Connect to the Google Sheets.
Let's create a Data Source by pasting the JSON file:)
In the Stripo account, find the "Data" tab;
Click on the "Connect a Data Source" button;
Give the source a name (required) and a short description (optional);
All other fields are filled in automatically;
Besides, in the "Additional Options" tab you can enable the "Randomizer" option;
The Randomizer feature for AMP-lists provides the ability to retrieve content in random order - product cards inside the array are returned in haphazardly.
Once you fill everything out, copy the URL as you will need it later;
After that, paste the JSON file you prepared beforehand (or the one we'll create together) into the JSON tab;
Done:)
Important note:
Every time you publish new articles or videos on your blog, you need to edit the JSON to add these updates to your newsletters. However, you don't need to change anything in the emails themselves because you’ve put a link from the source in the email.
JSON will automatically change images, text, and everything else. This means you won't have to edit or update welcome emails in your ESP. At the same time, users will always see only fresh and relevant offers whenever they open your emails.
Creating a JSON file:
We will place Stripo’s blog articles directly in the email to show you how it's done. (You can replace the links to our blog posts with yours to later pull in necessary information from your resource into emails).
The set of elements depends on the content you want to show to recipients.
Our set for now:
Title/cover image of the article;
Article title;
Short description;
The "Read More" button.
The simplest JSON here will look like this:
{
"items": [
{
"title": "Stripo Data Source, or How to Use AMP Lists in Emails with Stripo",
"url": "https://stripo.email/blog/working-with-data-source-in-stripo/",
"imgUrl": "https://stripo.email/photos/shares/Blog/Data-Source_Featured-Image.png",
"text": "AMP lists are meant to help you implement gamification, to let you update email content in real-time, and to let your users confirm appointments directly in emails"
},
{
"title": "Email Marketing Checklist: 10 Things to Do Before Sending out HTML and AMP HTML Emails",
"url": "https://stripo.email/blog/email-marketing-checklist-10-things-to-do-before-sending-out-html-and-amp-html-emails/",
"imgUrl": "https://stripo.email/photos/shares/Blog/Checklist_for_HTML_and_AMP_HTML_Emails_Stripo_Blog_Cover_Image.png",
"text": "Email marketing is one of the main driving forces behind the development of many businesses. According to surveys, 85% of marketers use email as the primary channel for generating leads"
}
]
}
Where:
Title — this is the title of the blog post;
Url — link to the article (or any other source of information);
ImgUrl —link to the cover/title image of the article;
Text — the text that will be displayed in the description.
Important note: Do not alter the quotation marks in the code — just leave them the way they are.
Done! JSON is ready :) Add it to the "Data Settings" → "JSON" tab.
Writing an email for a future newsletter:
We need to prepare an email: work on designing the part where you will post articles from the blog.
In my case, there will be the following structure:
Image block for the cover image of the article;
Text block for the Article title;
Text block for the Article's description;
Button block for the "Read More" button.
It is very important to correctly set the size for the title picture - the proportions here can only be set once.
Make sure all elements belong to the same structure.
Embedding an endpoint:
We need to get the code of the created structure. To do this, select the "Structure" and open the code editor;
Copy code starting from the <table cellpadding="0" cellspacing="0"...>
And ends with the closing </table> tag;
Drag a new structure with one container where you want to place your blog article;
Drag the "HTML" block into the container;
Double-click the "HTML" block in your template to open its code;
Paste the code element that we’ve copied in the previous steps;
Insert the code sample given below into the block’s code:
<amp-list layout="fixed-height" height="360" width="auto" src="https://stripo.email/emailformdata/v1/list/ecxs/stripo-welcome-emails">
<template type="amp-mustache">
Where https://stripo.email/emailformdata/v1/list/ecxs/stripo-welcome-emails is the endpoint example. You should replace it with the previously generated URL in the “Creating a JSON file” section;
Insert it right at the beginning of the code you added earlier;
Insert these closing tags (given below) at the end of our code;
</template>
</amp-list>
Part of the code (responsible for the pictures) is highlighted in the screenshot below:
It should be replaced with the code below;
<a href="{{url}}" target="_blank">
<amp-img width="540" height="180" alt="{{title}}" src="{{imgUrl}}" layout="responsive">
</amp-img>
</a>(You can set the width and height to suit your email design)
Important note: You don't need to put any other scripts in the <head> of the email. Stripo adds everything automatically.
So, dealing with the JSON code:
Please replace all links inside <a href> with {{url}} — it's important that they are in the quotes! And don't remove the curly braces;
Links inside src should be replaced with {{imgUrl}};
The alt text and heading for the image should be replaced with {{title}};
The annotation, it is white in the code, should be replaced with {{text}} — please do not add the quotes here;
Check yourself in advance: the only real link contained in your code is your endpoint;
All other data will be pulled in from your JSON;
When you're done, don't forget to enable the ⚡HTML option for this entire row/structure;
After you have done all these steps, you can go to the preview to check the result:)
Important note: You paste this code just once, and it will pull up as many content units as needed (that is, exactly as many as you configured in your JSON file. In our case, two elements). In other words, it doesn't need to be entered twice if you want to share two articles in one email.
Creating a fallback:
What is a fallback email? We know that not all email clients will be able to render the amp component in the email, so we can take care of those clients and make a fallback version of displaying a content part, including it in the HTML version.
It is created very easily and does not require any special knowledge. The main rule is to make a special switch to the HTML version only.
Let's consider our example of the fallback: we put an article's title in the email and attach a link to a button that leads to the site where the recipients can see absolutely all available articles. This way our recipients will still be able to view our articles even if they don't support amp.
Firstly, add a 1-container structure into the template;
Design it the way you like; add a "Text" block with the article's title;
Drop a "Button" block and paste a link to your website where the articles are located;
Click on the Structure with all this content;
And include this structure into the "HTML" email version only (as shown above)
Connect to the Google Sheets:
You can find all the detailed instructions on connecting to the Google Sheets with the Data Source in a separate article.
How to test AMP emails?
You can test it in your Gmail box when you send the test from Stripo. Please click on the "Test" button above the template;
In a pop-up window, enter your email address and click the "Send Test" button;
You should go into your mailbox settings in Gmail and turn on the option to receive dynamic content;
In the developer settings below, you need to specify our sender box as trusted- info@stripo-test.email
Please delete all the test emails (for that current email, if you tested it before) that you sent earlier and send the test again.
After all these steps, you will be able to test displaying your AMP emails.
After you've tested the emails and made sure it's ready to send, let's look at the option to export AMP emails:
How to export AMP emails?
Important to note: not all possible email services and clients support AMP functionality.
Here is an official Google page https://amp.dev/support/faq/email-support/.
Here you can check which email support services send AMP emails and which email providers have AMP support content.
Currently, this is the list of ESPs that do support sending of AMP emails:
In order to export a finished AMP email, please click on the Export button in the Stripo editor, choose "Support for AMP", and you will be able to export the AMP email directly to your ESP.
If you see that your ESP is not listed but supports AMP technology, then you should export the email as AMP HTML — this export method saves the scripts that are appropriate for the MIME type. Import this file into the ESP that supports Google AMP for emails.
Proceed to "Files" and then to AMPHTML.
Please be informed that only 4 email clients (GMAIL, YAHOO, MAIL.RU, FAIREMAIL) support displaying AMP content as recipients.
Getting Whitelisted with Google and Yahoo
If you want to make your own sending, your mail should be white-listed in the Google/Yahoo service, so now I will tell you how to do it in just a few steps.
To get whitelisted with Gmail and Yahoo, you need to:
authenticate your emails using SPF and DKIM;
check the destination of XHR;
make sure the DKIM signature matches the domain of your sender address;
have a permanent history of mass mailings;
send an AMP email to ampforemail.whitelisting@gmail.com (Google) and ampverification@yahoo.com (Yahoo);
fill out the Sender Registration Form.
This form is designed for both mail services that support AMP.
After submitting the registration form, you will see the following notification:
You will not receive any other notification from Google or Yahoo until you are whitelisted.
To find the whole instruction, we wrote an article and covered it in great detail How to Whitelist Google for Sending AMP Emails: Sharing Our Experience.
Please read it if you are determined to go through it.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.