Data Sources. What is it for and how to use it?

AMP emails contain dynamic content. Quite often, they require amp-list components.

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.

To provide this type of content in emails, you need to maintain a connection between these emails and servers. Now these processes are totally on us.

Following on this link you will find more detailed information about the Data Sources and how to use it - https://stripo.email/blog/working-with-data-source-in-stripo/

Besides, please take a look at the our video for easier visual perception

To use Stripo as your Data Source, you need to:

  • go to the “Data sources” tab;
  • click the “Connect a new data source” button;
  • in a new window, enter all required information about this particular connection;
  • copy URL address;

For now, we have 2 options to create the Data Source:

  1. paste the created JSON file;
  2. pull Data from Google Sheets.

Let's start from the JSON option:

  • paste the JSON file that you’ve previously prepared (or the one we will build now together) in the JSON section;
  • done.

Important to note:

We recommend that you name this source after the goal of your email if you are going to use this email component across multiple campaigns.

You will need to edit your JSON every time new blog posts/videos appear on your blog to deliver the latest posts. But you will not need to make any changes to your emails. Stripo will transmit these changes/updates to your emails via endpoint (the URL address we’ll build now). It will replace images, text, etc. So you will not have to edit/replace welcome emails in your ESP.

BTW, in this way, you can always show only fresh and actual sales in your emails no matter when users see them.

Creating a JSON file

Prior to customizing JSON, you need to decide on the mission your amp-list is going to fulfill.

I want to deliver the latest blog posts in welcome emails (it’s not vain, right?).

As a base for our JSON file, we’ll use a sample provided by Google.

{   "items": [    
{
"title": "AMP YouTube Channel",
"url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" },

{
"title": "AMP Start",
"url": "https://ampstart.com/"
}
] }

This part of JSON is repetitive. You can paste it as many times as you need.

You can also add more elements in each section. We recommend that you edit one section, and then copy-paste it as many times as you need because it is important that each section has the same set of elements.

You can edit your JSON either in any text editor or in the Sublime Text app.

The set of elements depends on the content you are going to show.

I want our recipients to see:

  • cover image;
  • title;
  • short description;
  • the “Read on” button.

So, here’s my JSON that I’m going to use for welcome emails:

{   "items": [     
{ "title": "Father’s Day: 33 Catchy Email Subject Lines and Email Examples",
"url": "https://stripo.email/blog/20-catchy-fathers-day-email-subject-lines-marketing-ideas/",
"imgUrl": "https://stripo.email/photos/shares/Blog/Stripo-Fathers-Day-Featured-Image.jpg",
"text": "According to NRF, in the United States alone on Father’s Day, people spent upwards of $16 billion in 2019. You will need to run a heartfelt email marketing..."
},

{
"title": "10 Best Ways to Use AMP in Emails",
"url": "https://stripo.email/blog/ways-to-use-amp-in-emails/", "imgUrl": "https://stripo.email/photos/shares/Blog//AMP_Ways-to-Use-AMP_Stripo_Featured-Image.png",
"text": "AMP is proven to be effective. It does increase conversion by at least FIVE times. All Gmail and Mail.ru users are now able to see AMP in their inboxes. Yahoo users will join them soon, too...."
}
] }

Where:

  • title — is a title of a blog post;
  • url — is a link to this blog post;
  • imgUrl — is a link to blog post cover image;
  • text — is a short description/annotation.

Important to note:

All text that goes after colons in the quotation marks should be replaced with your content. You now do it manually.

So you just need to insert your code into Stripo Data Source, the JSON section.

And now that we have our URL, which is actually an endpoint, we may embed it in our welcome emails.

Building emails with AMP lists

Right, first of all, we need to design the email part where you are going to put blog posts into.

Step 1. Designing welcome emails for example like this one:

This structure includes next blocks:

  • cover image;
  • title;
  • annotation;
  • button.

Step 2. Embedding your endpoint into email

  • you need to get the code of the structure we’ve just created. To do so, you need to click the “Structure” icon in your template, then open code editor;
  • copy its code that starts with <table width="100%" cellspacing…>;
  • pull a new 1-container structure exactly where you want to put your blog posts;
  • drop the “HTML” basic block in it;
  • double-click this block in your template to open its code;
  • paste the code element that we’ve copied in the previous step;
  • now please 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://amp.stripo.email/v1/list/haig/welcome-emailsstripo-1 is the endpoint we’ve previously generated in the “Creating a JSON file” section;

  • please insert it right at the beginning of the block’s code;
  • insert these closing tags (given below) at the end of your this block;
</template> 
</amp-list>

  • the highlighted part of the code (that refers to images)

should be replaced with

<a href="{{url}}" target="_blank"> 
<amp-img width="540" height="180" alt="{{title}}" src="{{imgUrl}}" layout="responsive">
</amp-img> </a></td>

(You please set image width and height that are appropriate for you).

Important:

No need to insert any other script into email’s <head> because Stripo adds them automatically.

This is required for displaying images in AMP emails;

  • now please replace all links that go after <a href> with {{url}} — important! It should go in quotation marks. And do not remove curly brackets;
  • a link that goes after src should be replaced with {{imgUrl}};
  • alt text for the image should be replaced with {{title}};
  • annotation that goes in white should be replaced with {{text}} — please, add no quotation marks here;
  • this is what my finalized code looks as shown below:
  • check yourself — the only real link that your code contains — is your endpoint;
  • all other data will be retrieved from your JSON;
  • include the entire “Structure” that contains our HTML block in ⚡HTML;
  • please preview your template — if done right, you will see your blog posts in this email.

Pull Data from Google Sheets.

You have an opportunity to connect Google Sheets to emails via Data sources.

Please find more information how to set the Google sheet in our blog post.

This is a video where showing all the steps how to connect the Google Sheets to emails.


Please mail us support@stripo.email if you still have any questions.

Did this answer your question?