Games appeal to the competitive side of people by challenging them to win. When you combine games with a reward, you get a horde of interested participants. This is what most ecommerce brands have done to their apps to engage users and increase their revenue.
AMP makes it possible to bring gamification within emails and make them irresistible. Some popular email games include virtual treasure hunts, travel quizzes, mazes, and wordle.
amp-bind, an AMP component, is what you need to create interactive games within emails.
Let us explore how you can get the best out of amp-bind.
1. What are the benefits of the amp-bind component?
amp-bind helps create a rich gaming experience using altering elements like text, images, placeholders, etc. Here is how you can leave a lasting impression on your audience using amp-bind in emails.
1.1. Bring popular games to emails
Use amp-bind to bring the most popular games like tic-tac-toe, puzzles, quizzes, spin-the-wheel, wordle, etc., to your emails. The in-email games are effective in keeping your audience engaged. You can quickly turn user participation to your advantage and create returning customers.
1.2. Jazz up customer rewards
Make the reward experience more enjoyable for users with interactive scratch cards. For example, users get to scratch a virtual card to reveal a discount voucher or a BOGO offer on completing a task or creating a winning streak. You can maximize user engagement across an email campaign with a game series.
1.3. Collect zero-party data
amp-bind allows you to build multi-step forms in emails. The component makes grouping similar input fields easier, simplifying the form-filling process. Use the easy-to-fill forms to gather valuable user information to profile them and offer personalized deals and other incentives.
2. How to use the amp-bind component?
The amp-bind component allows elements to mutate in response to user actions or data changes via data binding and simple JS-like expressions.
Required Scripts: <script async custom-element=”amp-bind” src=”https://cdn.ampproject.org/v0/amp-bind-0.1.js”></script>
amp-bind has three main concepts:
- State is a document-scope, mutable JSON state. Its variables update in response to user actions. The component does not evaluate expressions on page load. Visual elements should have their default “state” defined and not rely on amp-bind for the initial render.
- Expressions are JavaScript-like expressions that can reference the state.
- Bindings are special attributes that link an element’s property to a state via an expression. You can bind a property by wrapping it inside brackets in the form of [property].
Each AMP document that uses amp-bind has document-scope mutable JSON data or state. An amp-state element must contain a child <script> element. Expressions are not evaluated on page load, but you may define an initial state. The <amp-state> component contains different states and their state variables. While this defines a state, it will not reflect on the page until after a user interacts.
Use expressions to reference state variables. If the JSON data is not nested in the <amp-state> component, reference the states via dot syntax. An <amp-state> element can also specify a CORS URL instead of a child JSON script. An <amp-state> element’s JSON data has a maximum size of 100KB. The state variables return to the defined JSON in <amp-state> on page refresh.
Note that:
- When triggered by certain events, AMP.setState() can access event-related data on the event property.
- Nested objects are generally merged to a maximum depth of 10. You can override all variables, including those defined in <amp-state>.
- AMP.setState(object) throws an error if object contains a circular reference.
- Remove an existing state variable by setting its value to null in AMP.setState().
- Calling AMP.setState() deep-merges the provided object literal with the current state. amp-bind writes all literals to the state directly, except for nested objects, which are recursively merged. Variables of the same name in the object literal always overwrite primitives and arrays in the state.
amp-bind uses JavaScript-like expressions that can reference the state.
Expressions function differently from JavaScript in certain aspects:
- Expressions may only access the containing document’s state.
- Expressions do not have access to ‘window’ or ‘document.’ ‘global’ references the top-level state.
- Only amp-bind allowlisted functions and operators are usable. Use of arrow functions are allowed as function parameters, e.g. [1, 2, 3].map(x => x + 1).
- Custom functions, classes, and loops are disallowed.
- Undefined variables and array-index-out-of-bounds return null instead of undefined or throwing errors.
- The capping for a single expression is currently at 250 operands for performance.
The objects under allowlisted functions are Array, Number, String, Math, Object, and Global.
You can reuse amp-bind expression fragments by defining an amp-bind-macro. The amp-bind-macro element allows an expression that takes zero or more arguments and references the current state. Invoke amp-bind-macros like a function, referencing the id attribute value from anywhere in the document. A macro can also call other macros defined before it. A macro cannot call itself recursively.
If you wish to learn more about the amp-bind component for email, visit amp.dev.
3. Variations of the amp-bind component
Use the component’s attributes to bring interactive and dynamic capabilities to your AMP emails.
3.1. Dynamically change email elements
With amp-bind, you can update element attributes and values via bindings. The component supports data bindings on five element state types as mentioned below:
- [text] attribute: dynamically changes the text value of an element
- [class] attribute: dynamically changes the CSS classes of an element
- [hidden] attribute: hides and reveals an element; [hidden] expression should be a boolean expression
- [width] and [height] attributes: updates the width and height of an element
- All [aria-*] attributes: dynamically updates information available to assistive technologies, such as screen readers
For security reasons, binding to innerHTML is disallowed. All attribute bindings are sanitized for unsafe values (e.g., javascript:).
3.2. Tweak other AMP components
amp-bind has several attributes that can enhance the functionality of other AMP components. A few examples are:
- For <amp-carousel type=slides>, use the [slide] attribute to change the currently displayed slide index. Whenever the carousel slide changes, it updates selectedSlide and text attribute in the <p> tag above the carousel
- For <amp-lightbox>, use the [open] attribute to toggle display of the lightbox
- For amp-accordion, use the [data-expand] attribute to change the expansion of a section
amp-bind is frequently combined with the amp-mustache and amp-lightbox 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.
