[ad_1]
Good day, everybody.
Right this moment we begin our tutorial sequence the place we’ll present the best way to construct AMP emails before you write a paragraph of promo textual content.
Quick introduction
As you in all probability know, final month we ran our Stripo AMP Quiz sequence. It consisted of three emails, every contained components of gamification. The purpose of this marketing campaign was to reveal some capabilities of AMP know-how to our recipients.
Because of this, we obtained actually 1000’s of requests, like “How do I construct such emails for my campaigns?”.
That is why we determined to make these tutorials.
Let’s begin with the AMP questionnaire because it was the primary e mail from our Quiz sequence…
Watch our quick video or hold studying the submit to study to construct questionnaires quick.
Learn how to construct AMP questionnaires with Stripo
Your browser doesn’t assist HTML5 video tag.
Usually, to construct this e mail factor, you would need to deal with AMP code, embed a number of amp-components in your emails, join them to your servers with the assistance of your builders to allow AMP in emails. With us, it is grow to be a lot simpler…
Simply comply with our step-by-step information, and you may design this e mail on your campaigns by your self.
Step 1. Pulling a prebuilt AMP module in your template
On your comfort, I’ve constructed a ready-to-use “AMP Questionnaire” module. It consists of three questions. The truth is, as a base, we used our e mail 1 from the sequence, eliminated all of the Stripo identification, and our intro. That is it.
So your module can have three sections for questions.
You pull this module in your template. It’s included within the AMP HTML model by default.
To drag the module right into a template, please:
drag a 1-container template in your e mail;
go to the “Modules” part;
enter the “Pre-built” tab;
enter “Questionnaire”;
simply drag this module into your template.
Your browser doesn’t assist HTML5 video tag.
Right here, you’ll be able to edit colours; colours for the “Query” phrase and its background, and colours for the fields with solutions.
To take action, click on the “Construction” icon, then open code editor as proven beneath:
Modifying the “Query phrase” part
You’ll want to exchange present colours with the colours you want by pasting colours’ numbers from our palette.
To get coloration’s quantity, begin enhancing textual content/designing buttons, and within the coloration palette simply copy the mandatory coloration quantity.
Modifying the “Solutions” fields design
Within the “Solutions” fields, you present if the reply was right or incorrect.
To seek out them in your code, scroll down:
the place “a1” is supposed for the right reply;
“a0” is supposed for an incorrect reply.
Right here you’ll be able to exchange a background coloration and a border coloration.
By default, when customers give an incorrect reply, the “Reply subject” will get pink, when customers give an accurate reply — it will get inexperienced.
What about different components, like questions themselves, and pictures, and quite a lot of sections? You edit them in your JSON file.
BTW, this module is already related with the JSON file. You don’t want to alter something in it. We’ll work on the JSON file solely.
Step 2. Engaged on questions/Modifying a JSON file
Sure, you want a JSON file for creating your Knowledge Supply — the questionnaire itself.
This file will pull info/questions out of your servers into emails.
As your JSON file use the code pattern given beneath (the one we used for our marketing campaign):
{
“objects”: [
(,
{
“id”: 2,
“img”: “https://kvlya.stripocdn.e mail/content material/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/photographs/83411588071269619.jpeg”,
“query”: “What’s the hottest e mail shopper on this planet?”,
“textual content”: “In accordance with research performed by Litmus in April 2020, Gmail is the preferred e mail shopper. Please discover the detailed outcomes of the research right here.”,
“wrongtext”: “Oops. The proper reply is “Gmail”. In accordance with research performed by Litmus in April 2020, Gmail is the preferred e mail shopper. Please discover the detailed outcomes of the research right here.”,
“c”: “2”,
“solutions”: [
{
“ida”: 1,
“answer”: “Outlook”
},
{
“ida”: 2,
“answer”: “Gmail”
},
{
“ida”: 3,
“answer”: “Apple iPhone”
},
{
“ida”: 4,
“answer”: “Apple Mail”
}
]
},
{
“id”: 3,
“img”: “https://kvlya.stripocdn.e mail/content material/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/photographs/64191588071296283.jpeg”,
“query”: “Learn how to replace a header or a footer in 100 emails with Stripo without delay?”,
“textual content”: “Certainly, with Stripo, you’ll be able to replace any variety of emails without delay with just a few clicks by utilizing synchronized modules. Discover extra particulars on the function in our article. P.S. You may all the time e mail our assist crew. We’re there for you ;)”,
“wrongtext”: “Oops. The proper reply is “Use synchronized modules”. Certainly, with Stripo, you’ll be able to replace any variety of emails without delay with just a few clicks by utilizing synchronized modules. Discover extra particulars on the function in our article. P.S.: You may all the time e mail our assist crew. We’re there for you ;)”,
“c”: “3”,
“solutions”: [
{
“ida”: 1,
“answer”: “Email our support team, they’ll do it for you”
},
{
“ida”: 2,
“answer”: “Use smart elements”
},
{
“ida”: 3,
“answer”: “Use synchronized modules”
},
{
“ida”: 4,
“answer”: “Hire a team of 100 people”
}
]
}
]
}
The place “id” is the part with questions:
“id1” — is the part with query 1. All components from “id1” to “id2” belong to query 1;
“img” — hyperlink to the picture you might be about to make use of within the questionnaire;
“query” — is the query itself;
”wrongtext” — is the textual content your customers will see if they offer an incorrect reply;
“ida1-4” — is reply choices given to customers.
Edit this data manually:
“img”: “hyperlink to your picture”,
“query”: “Your query?”,
“textual content”: “textual content that seems as soon as any reply has been given by a person”,
“wrongtext”: “that is what customers see once they give an incorrect reply”,
“ida”: 1,
“reply”: “reply choice 1″
“ida”: 2,
“reply”: “reply choice 2″
Do the identical to every part.
Our code accommodates three query sections. In order for you simply two, please take away the highlighted textual content out of your JSON file.
In order for you your all questions to incorporate 4 reply choices, then within the JSON code please take away part 1, and duplicate part 2.
Step 3. Connecting emails to a knowledge supply
This step is required for pulling knowledge from JSON file into our questionnaires; additionally for exhibiting customers if their solutions had been right or incorrect (customers’ submit responses, and our Knowledge Supply reveals if the reply was right, and offers customers the right reply)
open the “Knowledge” tab;
go to the “Knowledge Sources” part;
create a brand new knowledge supply;
enter the identify of this marketing campaign (it may be, in actual fact, something);
in a brand new part beneath, paste your JSON file;
copy URL deal with.
Your browser doesn’t assist HTML5 video tag.
Step 4. Engaged on knowledge storage/Selecting the place to ship customers’ responses to
We have to create an information service — a spot for storing customers’ responses.
If you wish to put knowledge on Stripo servers, please toggle the “Stripo storage” button.
Your browser doesn’t assist HTML5 video tag.
For those who plan on storing knowledge in Google Drive (Unfold Sheets), please comply with the steps given in our “Stripo Knowledge Service” weblog submit.
Step 5. Inserting endpoints in emails
Now to attach our survey to servers and knowledge storage — to truly allow AMP questionnaire in our emails, we have to insert the endpoints that we have simply constructed:
click on the ⚡ HTML “Construction” icon;
open code editor;
exchange the hyperlink that goes after “action-xhr” within the <type id…> line with the URL deal with you generated in Step 4;
exchange the supply hyperlink that goes after “src=”https://stripo.e mail/weblog/building-questionnaires-with-stripo/within the <amp-list…> line with the URL deal with you generated in Step 3;
Step 6. Constructing a fallback/HTML model of a questionnaire
We have to construct a fallback/HTML model of the survey for these whose e mail shoppers don’t assist AMP but.
Lately we printed a submit the place confirmed 10 survey invitation emails. We hope you’ll discover some inspiration there.
Usually, in such emails, entrepreneurs embody hyperlinks to Google Varieties or questionnaires on websites, the place customers can take the survey…
(E mail survey invitation from Litmus)
So as to add this hyperlink in your survey emails, please:
drag the 1-container construction proper beneath/above the construction that accommodates your AMP HTML quiz;
fill it in with mandatory content material;
drag the “Button” primary block into this construction;
design it the way in which you want;
paste your URL;
embody this construction within the HTML model of this survey e mail.
Essential:
All different components of this e mail, like emblem, footer, contact info, can be included in each variations of this marketing campaign.
In order for you your customers to see the Survey we’ve simply created in Step 5, it’s possible you’ll simply embody the hyperlink to the online model of our AMP e mail as a substitute of the hyperlink to Google Varieties.
To get this hyperlink, please:
Your browser doesn’t assist HTML5 video tag.
Phrase of recommendation
We talked so much about AMP emails and the best way to use it.
This is only a pleasant reminder. To have the ability to ship AMP content material, that you must:
get whitelisted with Google;
repair all of the bugs if any happens. You will notice them within the Preview mode (in any other case customers will see HTML e mail);
add the fallback — HTML model — on this e mail. We talked about it above;
ensure that your ESP/CRM is able to sending AMP emails;
remember that at present solely Gmail (each net and cellular apps on all OSs) and Mail.ru are able to rendering AMP emails. Yahoo will be part of the listing quickly;
AMP emails lose their AMP parts in case you ahead them.
Remaining ideas
We have simply constructed a questionnaire e mail. It really works, like all AMP components, in Gmail and Mail.ru. Different customers will see your survey fallback.
For those who favored our AMP questionnaire, design an analogous one for your self
[ad_2]