Stripo Data Source, or How to Use AMP Lists in Emails with Stripo

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.

This May we ran our Quiz Series. The results of this Quiz showed that the AMP technology along with gamification has a positive impact on CTOR. Our recipients were interacting with the content in AMP emails 1.5 more actively rather than in HTML emails. 

But what stops email marketers from implementing AMP in their campaigns? One of the main difficulties you face here is the need to connect those emails to a server.

Connecting emails to servers is a time-consuming process, but for your convenience, we’ve just released Stripo Data Sources...

Stripo Data Sources: What is it for? 

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

Like we said, to provide this type of content in emails, you need to maintain a connection between these emails and servers. It was kind of a pain in the neck as required a lot of programming skills or significant help from your programmers. And you had to do it for each campaign. Now these processes are totally on us.

Stripo Data Source:

• sets appropriate CORS headers which are vital for AMP emails;

• creates an endpoint for each email campaign with AMP components.

We do it all to help you build AMP emails way faster.

Our Data Source saves you hours, if not to say days, on building AMP emails.

Using Stripo Data Source

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

• enter the “Data” section;

• 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;

• 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.

eCommerce can show off the most popular items by using amp-list in their promo and welcome newsletters.

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.

For example:

• "title": "your blog post title";

• "url": "link to your blog post",

• "imgUrl": “link to image”;

• "text": “annotation/description”.

You just insert your code into Stripo Data Source, the JSON section. 

Building emails with AMP lists

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

Step 1. Designing welcome emails

Right, first of all, we need to design our emails. 

Then you also work on the design of the email part where you are going to put blog posts into.

Mine is going to have this order:

• cover image;

• title;

• annotation;

• button.

It is important to set the right size for your cover image — you set proportions here just once.

Make sure all elements belong to one single structure.

Step 2. Embedding your endpoint into email

This is the most interesting part…

But it’s not that complicated as it may seem at first sight.

However, if you follow our step-by-step guide, your email will work:

• 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 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>

(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.

Important:

You insert this code just once — it will add as many content units as necessary (as many as you set in your JSON file. 2 — in our case). No need to enter it twice if you want to share two blog posts in one email.

Step 3. Building a fallback

There are many options for this fallback, but we’ll show just two most popular ones:

Option 1. Showing the most popular or the most useful blog posts

If you want newcomers to start using your service right away and you wanna help them out, you should provide them with the most informative blog posts/guides on how to get the most out of your tool. 

(Source: Welcome email with popular integrations by Zapier)

In the “Step 1” paragraph, we designed our welcome email with the Blog posts area.

You just need to make sure it will visible only in the HTML version of your email:

• click the “Structure” icon;

• in the setting panel, activate the “Include in HTML” option.

Option 2. Directing users to your website

If you want to provide your recipients with fresh content, but don’t feel like updating your welcome emails every week, then why not just tell them they can find lots of useful and fresh information on your blog.

(Source: Welcome email with an invitation to go to the site to see the full catalog, by Warner Bros Games).

Building the necessary content unit 

• pull a 1-container structure into your template;

• design it the way you like;

• enter necessary CTA text;

• drop the “Button” block into this structure;

• paste a link to your blog;

• click the “Structure” icon in your template;

• include this structure into the HTML email only (as shown in the “Option 1” section).

Word of advice

Here's just a friendly reminder. To be able to send AMP content, you need to:

• get whitelisted with Google;
• fix all the bugs if any occurs. You will see them in the Preview mode (otherwise users will see HTML email);
• add the fallback — HTML version — in this email. Above, we showed how to do it;
• make sure that your ESP/CRM is capable of sending AMP emails;
• keep in mind that currently only Gmail (both web and mobile apps on all OSs) and Mail.ru are capable of rendering AMP emails. Yahoo will join the list soon;
• AMP emails lose their AMP components if you forward them.

Final thoughts

By using AMP lists you can implement gamification, show only fresh content in emails in real-time (like your available hours for meetings and demos, like items product items available in your stock, and like latest content).

By using Stripo Data Source, you build dynamic emails, with the amp-list component, of any complexity without the need to set CORS policy for every campaign and the need to connect emails to your server — we’re on it.

We make AMP email production easier.