An email pops up greeting you by your first name. Inside, you find offers for the exact holiday destination you have been viewing for a while. Or there’s an alert for a product on your wishlist that is about to run out of stock. It could even be a reminder to replenish your groceries or medicines. What are you likely to do next? In all probability, you will make a purchase.
Consumers like to shop with brands that understand their interests, and offer uniquely relevant recommendations and deals. If you exploit the power of personalization in your marketing emails, your campaign’s ROI is sure to spike.
amp-mustache is an AMP component that makes personalization possible in AMP emails. Each email can turn out to be customized/personalized for its recipient, even if it is part of a bulk mailing exercise.
With amp mustache templates you can reference and replace predefined pieces of information in the email with dynamic data stored in the back end. Let’s look at how you can use it to create communication that resonates well with users.
1. What are the benefits of the amp-mustache component?
amp-mustache helps you render templates in emails. You can use mustache templates containing tags for other AMP components to display the final results.
Here are a few proven strategies to use amp-mustache in AMP emails to drive conversions.
1.1. Personalize the name tag
Address each recipient individually to personalize your emails. It’s a compelling way to connect with the audience and increase engagement rates. You can further use amp-mustache tags to include person-specific elements like gender, age, location, etc.
1.2. Display dynamic content
amp-mustache displays dynamic elements in emails. To show color variants, recently added product features, updated room availability status, customized deals on scratch cards, subscription settings, etc., as per user preferences, this component is what you need. It combines well with the amp-list component to render dynamically pulled-in lists.
1.3. Share interactive content
Based on user behavior, create games to connect better and significantly increase interaction rates. Include personalized offers and deals as rewards that match user preferences.
2. How to use the amp-mustache component?
amp-mustache allows the rendering of Mustache templates.
Required Scripts: <script async custom-template=”amp-mustache” src=”https://cdn.ampproject.org/v0/amp-mustache-0.2.js”></script>
The amp-mustache templates are defined using a templating language exported by an AMP templating extension. The AMP templating system allows AMP elements to render dynamic content using templates defined within the AMP document. The data for templates is received from a CORS JSON endpoint.
amp-mustache templates are defined using mustache.js syntax. Note that any templating language has its syntax restricted and verified by the AMP validator to ensure that XSS and other issues cannot be dynamically injected into the AMP document.
amp-mustache templates are required to be well-formed DOM fragments like all AMP templates. This means that, among other things, you can’t use amp-mustache to:
- Calculate tag name. E.g. <{{tagName}}> is not allowed.
- Calculate attribute name. E.g. <div {{attrName}}=something> is not allowed.
The output of “triple-mustache” is sanitized only to allow the following tags:
a, article, aside, b, blockquote, br, caption, code, col, colgroup, dd, del, details, div, dl, dt, em, figcaption, figure, footer, h1, h2, h3, header, hr, i, ins, li, main, mark, nav, ol, p, pre, q, s, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul.
Mustache output is sanitized for security reasons and to maintain AMP validity resulting in certain elements and attributes being silently removed.
Mustache is a logic-less template syntax. It is called “logic-less” because there are no if statements, else clauses, or for loops. Instead, there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.
mustache.js is a zero-dependency implementation of the mustache template system in JavaScript. A mustache template is a string that contains any number of mustache tags. Tags are indicated by the double mustaches that surround them. {{person}} is a tag, as is {{#person}}. mustache.js can be used for anything like HTML, config files, or source code. It works by expanding tags in a template using values provided in a hash or object.
There are several types of tags available in mustache.js. The most basic tag type is a simple variable. A {{name}} tag renders the value of the name key in the current context. If there is no such key, it will display nothing.
All variables are HTML-escaped by default. If you want to render unescaped HTML, use the triple mustache: {{{name}}}. You can also use ‘&’ to unescape a variable.
If you’d like to change HTML-escaping behavior globally (for example, to template non-HTML formats), you can override Mustache’s escape function. For example, to disable all escaping: Mustache.escape = function(text) {return text;};.
If you want {{name}} not to be interpreted as a mustache tag but rather to appear exactly as {{name}} in the output, you must change and then restore the default delimiter. See the Custom Delimiters section for more information.
Some of the core Mustache tags are:
- {{variable}}: A variable tag. It outputs the HTML-escaped value of a variable.
- {{#section}} {{/section}}: A section tag. It can test the existence of a variable and iterate over it if it’s an array.
- {{^section}} {{/section}}: An inverted tag. It can test the non-existence of a variable.
- {{{unescaped}}}: Unescaped HTML. It is restricted in the markup it may output (see “Restrictions” below).
If you wish to learn more about the amp-mustache component for email, visit amp.dev.
3. Variation of the amp-mustache component
amp-mustache component allows you to introduce conditional results in emails.
You can use the true/false or if/else conditions to show varying results for every customer. Based on the templates created, the component references backend data and replaces elements in emails dynamically. Some use cases could be displaying items in stock or out of stock, recommending well-matched food items or apparel, showing exclusive deals for loyal customers, etc.
amp-mustache is frequently combined with the amp-list and amp-form components to make the emails even more effective.
4. How can Netcore Cloud help you?
Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month on behalf of businesses across 12 countries.
Netcore Cloud offers an enterprise-ready AMP editor that makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to build engaging AMP emails quickly. To customize further, you can connect with the in-house team of AMP experts to design AMP emails for specific use cases.
At Netcore Cloud, we help you set up and integrate AMP emails in as few as 10 days. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize the ROI of your email marketing campaigns.
With Netcore Cloud’s help, 50+ global brands have rolled out interactive emails powered by AMP and achieved their goals.
Netcore Cloud’s team partners with your marketing team to help you leverage the power of AMP emails and drive business revenue. Our experts share your brand KPIs and work as an extension to provide result-oriented solutions.
Connect with us to understand how you can benefit from our expertise and experience.
