Stripo Data Service, or How to Build AMP Forms Easier (DON'T DELETE THIS!!!)

Today Stripo released its Data service. We’ll show now what it is for, how to use it to take your email marketing to a whole new level.

Introduction or what’s the use of AMP emails

Quite often we ask users to rate us, leave feedback, and comments, we ask them to share their contact information, age, gender, etc. Forms and questionnaires are an integral part of email marketing.

Why AMP in the first place? Our tests showed that the conversion of AMP emails was 5 times higher against the conversion of traditional HTML emails.

We rushed to share these results with you.

Stripo Data Service: What is it for and how to use it?

By using revolutionary AMP forms, you can collect email addresses, phone numbers, use checkboxes, and even measure your NPS  in emails — all done in emails.

That’s right… But to be able to measure and process these results, you need to set CORS on your side, build endpoints on your servers to connect your emails to data service. It all takes a lot of time, requires programming skills or programmers’ aid.

We, at Stripo, do it for you: we let you build data services with just a few clicks (no coding skills required), where you store all users’ responses. You have access to it at any time!

Now let’s create a Data Service and use it in our email with AMP form.

Ready to give it a try? Let’s do it together…

Step 1. Creating a new service

Please be advised that you can use our Data Service, or embed any external endpoint, even the ones you built with Zapier. 

Option 1. Choosing Stripo Data Storage

If you want to store users’ responses on our side, as it’s way easier than building a new server for every email campaign, then you are supposed to use our Data Service. You will have access to this data service at any time. 

So, to build a new Service with Stripo, you need to:

• in your Stripo account, click the “Data” tab which is located on the left side of the screen;

• in a new window, choose the “Services” tab;

• click the “+ Create service” button.

• the “Service configuration window” will appear. Here you need to just give a name to your Data Service and enter a short description, the former is mandatory, the latter is optional;

• all other fields are filled out automatically;

• copy URL address for the future campaign.

Important to note:

We recommend that you name this service after the name of your email campaign. We believe this will make it easier for you to find and analyze the necessary data in your Stripo account after the email campaign’s been finished.

• in the section, below toggle the “Stripo storage” button.

Option 2. Choosing Zapier as Data Storage

To use Zapier as your Data Storage, you need to do all the steps described above, but instead of choosing Stripo as your data storage, you should:

• choose “External storage resources”;

• paste link to your Zapier Webhook — we’ll build it now.

Creating Zapier Webhook

Zapier offers a wide range of zaps (connections). 

As I want to store all users’ responses in Google Sheets, I need to connect Stripo to Zapier, and Zapier to my Google Drive.

Let’s do it:

• in your Zapier account in the upper left-hand corner, click the “Make a Zap button”;

• give it a name;

• in the “1. When this happens” section choose “Webhooks by Zapier”;

• as a trigger you choose “Catch hook”;

• you click continue;

• in the new window, you click the Webhook URL that Zapier has just generated for you;

• then you get back to Stripo and insert this link into respective field;

• now please copy our Data Service URL address;

• paste it in the Form — you have to replace existing link with the Data Service URL;

• now let’s go back to Zapier;

• here we “Skip” tests and click “Continue” as we have nothing to test yet; 

• now, in the “2. Do this” section, we choose “Google Sheets” — to find them, you need to enter Google or Sheets in the search field;

• now we need to choose the right Action event — for our purpose, we need the “Create Spreadsheet Row” option;

• click “Continue”;

• enter your credentials for your Google account;

• give Zapier access to your Google Drive;

• Zapier automatically adds your Google Drive account on the list. You do not even need to choose anything;

• previously you’ve built a Google Sheet with all necessary columns. My goal is to collect rates and feedback. Of course, I also need to know which recipient rated us. So, this is what my spreadsheet looks like:

• customize your spreadsheet: You need to select “Drive”, “Spreadsheet”, which is the Google Sheet you’ve created, and worksheet. I choose “Sheet 1” as I want to store all data on one single page.

• Zapier pulls names of the fields from your spreadsheet;

• Zapier pulls in data from your AMP Form (as we said, we will collect email addresses, rates, and feedback);

• we need to choose necessary “values” for respective fields;

• click “Continue”;

• run this test, please to check if the connection was established correctly;

• if your test was successful, click “Done Editing” and turn your Zapp On.

Important:

We showed how to store data on our Service and store data on external service (Zapier). But you can choose both if you like. Just toggle these both options:

Step 2. Working on your AMP forms

Now that we have our endpoint, let’s proceed to build these AMP forms.

Important to note:

The aforementioned form will work only for those recipients whose email clients already support AMP — Gmail and Mail.ru, both desktop and mobile screens. Other users will see the fallback that we will build together later.

Currently, there are three ways of building AMP forms in Stripo:

Way 1. Embedding amp-components from Google AMP dev

Google provides us all with embed AMP components. You follow the instructions on the respective page, and embed your form into our template.

But it’s a bit complicated for me, so I prefer not using this way.

Way 2. Using Stripo modules

Well, now this is much easier.

Once your template is finished, you should:

• go to the Modules section;

• enter “Form” in the search console;

• drop the chosen module into your template;

• redesign it if you like;

Caution: do not make any changes to the ⚡HTML part of this module as it may affect the performance of your AMP form.

• click on the ⚡HTML part of this module to open its code;

• paste the URL address you copied when building your Data Service in Step 1;

• insert it as shown in the GIF below;

• now this form will collect rates and feedback. But we need to know who submitted them. So in order to receive email addresses, we need to embed this code sample into our form:

<input type="hidden" name="email" hidden value="%EMAIL|%">

It goes after </label> before <input type>.

This field is hidden and is filled in automatically. Users do not need to enter their email addresses manually.

Important:

Contact your ESP for the merge tag that is meant for displaying email addresses. We use eSputnik, so in our case this tag is  %EMAIL|%. Please do not make any changes to the rest of this embed code. 

• your email is ready to collect feedback and rates from your users :)

Important:

You can test these forms even in the editor Preview mode. If done right, your Google sheet will fill out the following information:

It shows the merge tag since we tested email in the preview mode.

When we collect real feedback from real users (colleagues if you like to test this form once again) will show real addresses.

Way 3. Using our prebuilt templates 

I believe this is the easiest way to use AMP forms in emails. Today! In the near future, we will release our AMP form Drag-n-Drop block — we’ll tell more about it later.

So, to use our templates, you need to:

• open this template in your account;

Important to note:

Previously we said you would need to build a fallback/HTML version of this survey. Well, you do not need it for this template as it already contains the HTML survey invitation.

• in the template, click on the ⚡HTML form;

• open code editor;

• replace the existing URL with the URL address that you copied in Data Service.

• if you want to collect email addresses as well, please paste the embed code as shown in the “Way 2” section. But in this case, it will go after the </label> and before the <button type>.

Step 3. Building a Fallback

We published a long-read where we showed 10 best survey invitation emails and showed how to build them with Stripo.

Here we’ll show three best, in my opinion, fallbacks. They all are totally websafe:

Fallback 1: Collecting rates

As we said, users can rate our service directly in emails:

• drag a 4-container structure into your dynamic template — if you want to get rated 1-5;

• include this structure in the HTML version only;

• add one more container to this structure;

• equalize these containers;

• upload images with Digits — “1”, “2”, “3”, “4”, “5” into each container;

•  add one more structure with the respective number of containers and enter respective “grades” to each image — if you like;

• apply respective URLs to each image.

Your ESP will provide you with the total number of clicks on each “rate”.

Fallback 2. Rating service

You can just ask users if they are satisfied with your products by choosing from “Bad”, “Okay”, and “Great” options.

You do it the way described in the Fallback 1 option with only 1 difference — you insert a 3-container structure. That’s it.

Fallback 3. Providing a link to an external source

If you are going to ask users a few questions, as a fallback you might want to ask them to take a multi-question survey.

You build a form either on your website, or by using Google Forms.

Once you have done it and you have a link to this survey, you:

• add a 1-container structure into your template;

• drop a “Button” basic block in it;

• design your button;

• add your URL to this button;

• add a clear CTA copy above this button;

• include this Structure in HTML email only.

Important to note:

Both versions of your emails — AMP and HTML will contain all parts of your template, like header, banner, footer, and contact information.

And only AMP HTML forms and HTML fallbacks will appear in respective versions of your emails.

Ste 4. Previewing your emails

Prior to sending emails with AMP forms to users, please preview them to make sure they have no errors and send test emails to your colleagues to see how AMP forms really work.

To check out AMP tests in Gmail, please add our email address — info@stripo-test.email  — as a trusted sender.

For more details on how to preview emails with Stripo, please refer to our “Preview and Test Emails with Stripo” blog post.

Step 5. Checking out your results

To see the results of this campaign, you need to enter the “Data” section again.

Find the service you’ve previously built.

As you can see, it shows how many requests each service had, and time when the last request was made.

Click the “Download CSV-File” button.

That’s it.

Coming soon

We showed how to collect feedback by using AMP forms.

1. Collecting users’ contact information

You can also use AMP forms for reminders, for enriching your contact base with users’ phone numbers, ask users about their age, geolocation to provide them with more relevant offers, etc.

How do you do it?

• you will just need to drag our “Form”, which we are going to release soon, basic block into your email;

• select required “Text input”;

• and collect users’ info they are ready to share with you.

You will even be able to design these forms.

2. Using checkboxes

Dreams come true :)

Adding checkboxes, and rates in emails with no coding skills? Very soon you will be able to do it!

Stay tuned ;)

Final thoughts

Data Service today helps you get the most out of AMP emails, helps you easily connect your email campaigns to data services without external servers, without the necessity to set CORS, and with instant access to a campaign’s results.