gamification-in-email-technical-aspects
11 July

Gamification in email marketing: Bringing fun into emails, part 2 (tech aspects of the game)

Hanna Kuznietsova
Table of contents
  1. Key takeaways
  2. Building the game
  3. Stripo’s gamified email generator
  4. Wrapping up
1.
Key takeaways

Gamification brings fresh challenges that encourage email developers to push the envelope in what can be done to engage a subscriber.

John Thies

John Thies,

Co-founder of Email on Acid. Founder and CEO of Petrikur.

In our previous article, we delved into gamification, exploring different game types, key traits of engaging games, and the concept of boosters as emotional enhancements. We discussed the importance of selecting clear goals for players and aligning games with specific marketing objectives. As promised, this post will guide you through designing games efficiently and effectively. Let's dive in!

Key takeaways

  1. Unified coding and client support: The complexity of coding for gamified emails requires a combined use of AMP HTML and HTML5 & CSS3, given the diverse support from different email clients and Email Service Providers (ESPs). This ensures that interactive elements are rendered effectively across a wide range of platforms.
  2. Robust fallback strategies: Implementing strategic fallback solutions is crucial for clients that lack support for advanced interactivity. This includes static versions that mimic interactive experiences to maintain user engagement.
  3. Comprehensive email testing: Rigorous testing across various email clients is vital to ensure all interactive elements function as intended, optimizing the user experience in every scenario.
  4. Advanced tracking capabilities: Stripo’s tools not only facilitate the creation of engaging emails but also enable detailed tracking of interactions. This enhances the overall effectiveness of gamified content by providing insights into user engagement and behavior.
eBook
Ultimate Guide to Email Gamification
 
ebook

Building the game

One of the biggest challenges for marketing teams is finding the time and resources to accomplish gamification.

John Thies

John Thies,

Co-founder of Email on Acid. Founder and CEO of Petrikur.

If John Thies's observation holds true, why is designing gamified emails so complex? Creating a gamified email traditionally involves coding to ensure all recipients can interactively engage with your game. Here are some crucial concerns when designing a gamified email:

  • email client support: You need to ensure your emails display correctly across all devices and email clients. While this is challenging, it is entirely achievable;
  • ESP interactivity support: You should check whether your marketing automation service, aka email service provider (ESP) supports interactivity and, if so, which coding methods are available;
  • fallback: You need to address scenarios where gamification elements might not render due to some email clients or your ESP lacking support for interactivity. Plan appropriate fallbacks for these situations.

Addressing these concerns guarantees a seamless interactive experience for all game recipients.

Spoiler alert: We've found a way to streamline the game building process through a user-friendly interface, completing it in under an hour. But first, let's review essential coding practices for gamification.

Coding dialects for gamified emails

Nowadays, there are two main sublanguages of HTML for coding interactive emails:

  1. AMP HTML.
  2. HTML5 & CSS3.

AMP HTML

AMP HTML is a subset of HTML that allows interactive content in emails. Its most widely used components are:

  • AMP-carousel, which enables rotating slides in rows;
  • AMP-selector, which presents a list of options and allows the player to choose one or multiple options at once; and
  • AMP-bind, which enables the submission of answers or players’ actions directly within the email.

By combining these components, you can create games where players engage in emails and you can see their results, feedback, and progress as they play in real-time.

AMP eleements for gamified emails

HTML5 & CSS3, aka advanced HTML & CSS

To design interactive emails, HTML5 & CSS3 utilize “punched card coding,” inspired by old-school programming methods. The key elements include the following:

  • the :checked selector, which acts like an on/off switch, remains true until clicked to change. The content is encased in its own label, preventing the parent label’s function from being altered upon clicking;
  • the checkboxes and radio buttons, the “punches” in our analogy, trigger specific email actions. Please note that only one radio button in a group can be checked at once.

By strategically incorporating checkboxes, radio buttons, and checked the selector, you can craft interactive experiences in your emails. These include showing or hiding content based on user selections, progressively disclosing information, and conducting quizzes or polls.

HTML5 & CSS3 in gamified email production _ Punchcoding

You might think you can use any dialect to design your gamified emails. Unfortunately, this isn’t possible because subscribers use different email clients, many of which have their own rendering rules.

Email client support

Dealing with the different ways email clients render and display interactive content is yet another challenge email marketers face when utilizing gamification.

John Thies

John Thies,

Co-founder of Email on Acid. Founder and CEO of Petrikur.

AMP for email is supported by the following email clients:

These email clients constitute 38.84% of the email client market share. If you rely solely on AMP for your gamified emails, 61.16% (6 out of 10) of your recipients won’t be able to engage with your games.

HTML5 & CSS3 are supported by the following email clients:

  • Apple Mail, which holds 48.46% of email client share;
  • Samsung Mail with 0.12% of email client share; and
  • Thunderbird with 0.24%.

In total, this covers about 48.82% of subscribers. If you rely solely on HTML5 & CSS3, then about half of your recipients won’t be able to engage with your games.

List of top 10 email clients worldwide and their market share

(Source of statistics: EmailClientMarketShare by Litmus)

Thus, no matter which coding dialect you choose, there's a likelihood that some of your subscribers won't be able to experience gamification.

This means we need to learn how to combine both coding dialects in a single email.

Combining both dialects 

This means the email includes both AMP and HTML5 & CSS3 versions. Subscribers with email clients that support AMP will see this version, while those with support for HTML5 & CSS3 will view the advanced HTML version. AMP is the primary version, with HTML5 & CSS3 serving as the interactive fallback, ensuring those with compatible clients experience interactivity.

However, this strategy only reaches 87.66% of your recipients. What steps can you take to bridge this coverage gap?

Fallback solutions for diverse rendering rules across email clients

What is a fallback?

A fallback refers to an alternative version of the content provided to email clients that might not support a specific dialect or the features/interactive elements implemented in an email.

Interactivity in an email should always be seen as a progressive enhancement. Providing a solid fallback for email clients that do not support interactivity is absolutely crucial.

Cyrill Gross

Cyrill Gross,

Partner, consultant, and developer at Mayoris AG.

Here are a few types of fallback in email:

  • when static fallback is used, subscribers are notified that they can’t play the game, unlike other recipients. However, brands often still provide these subscribers with bonuses that players receive for participating in the game, such as discounts, price cuts, free subscriptions, or unlocked content so they do not feel left out. But where’s the engagement in that? Our goal is not to show subscribers what they missed; our goal is to let them experience the fun;
  • interactive fallback, as discussed in the "Combining both dialects" section, ensures that recipients experience interactivity in emails;
  • a web version for all other recipients. You simply ask your clients to check the web version of your email. But how do you encourage clicks when stats show that people interact with forms inside an email five times more often than with forms on separate web pages they have to visit? This leads us to the next option;
  • static fallback that imitates interactivity with embedded web version… Your interactive email element looks like a real game. When recipients interact, such as answering a survey, their choices are saved and highlighted as accepted on the landing page to which they're redirected, where they can keep playing or taking the survey. This ensures a seamless transition and maintains the game-like experience from email to web.

Not only do email clients have different rendering rules, requiring the use of specific coding dialects to ensure every recipient can experience interactivity in emails, but this variability also extends to email service providers (ESPs).

ESP interactivity support

To ensure recipients can experience gamification in your emails, your chosen ESP needs to support both AMP and HTML5 & CSS3. Unfortunately, some ESPs may lack support for one or both. This means even if your audience primarily uses Gmail, which conditionally supports AMP, they might miss out on the interactive aspects of your gamified email if the ESP isn’t compatible, resulting in a static fallback instead.

The optimal solution here combines AMP HTML, HTML5 & CSS3, and a static fallback that imitates interactivity with embedded web version for recipients whose email clients don’t support interactivity.

In this simple way, you ensure all your recipients no matter their email client, no matter your ESP/CDP will have interactive experience inside your emails.

Testing gamified emails

Currently, the only way to ensure your games work across different email clients is by sending test emails to various recipients, like colleagues and friends, to verify that everything functions as intended, including tracking and embedded web versions. 

Stripo’s gamified email generator

Stripo provides a gamified email generator, also known as an interactive module generator, that allows you to design games through a user interface without any coding. Then you have to simply copy and paste the generated code into your email to create engaging, impactful content.

You do not have to be a Stripo user to be able to use this generator. These modules are compatible with any builder/sender.

The content of this module:

  • AMP version of your email, compatible with Gmail and Yahoo;
  • interactive fallback, which works on all devices and email clients that support HTML5 & CSS3, such as Apple Mail and Samsung Email; and
  • static fallback that imitates interactivity with embedded web version. Those recipients whose email clients support neither AMP HTML nor HTML5 & CSS3 — such as some Outlook apps, or in case your ESP has no support for any of the above coding dialects — will see fallback. Once they start playing/submitting a form/rating you, they will be directed to the web version of the email, which is automatically generated by the tool.

You might also like

upgrade-of-the-game-module-generatorEnsuring engagement for all: The essential norms of fallback in gamified email marketing

As mentioned, interactive content within emails garners five times more responses compared to forms and games that require recipients to leave the email via a link. We've managed to create a seamless transition so recipients hardly notice when they're redirected from email to a website, maintaining high email engagement.

But what about tracking? Tracking the performance of a web version can be challenging. Fortunately, we have a solution for that too.

Tracking regardless of the email version your customers see in the email

Interactive emails excel in data generation, capturing every interaction from clicks within the email to activities on the landing page.

Our Data Service enables monitoring of engagement across both AMP HTML and HTML5 & CSS3 email versions, detailing game plays and interactions, including form submissions. Additionally, we've allowed personalization tags in the web version of the game, allowing for the tracking of customer details such as names and emails. This setup not only tracks responses but also identifies the individuals interacting.

Why you should not be afraid to the game bases/game templates for your emails

Using our generator's templates or game bases is both time- and cost-effective. A game template provides the essential framework, stripped of rules and visuals. You can enhance this base with your own visuals, rules, and components to create a fully customized game.

The two games below share the same base but feature different implementations.

(Source: Yakaboo)

Building games with an interactive mobile generator _ Stripo

(Source: Email from Stripo)

By effectively using various boosters, rules, and rewards and experimenting with new designs each time, you can easily create diverse and engaging games for your subscribers even using the same games from the generator.

Wrapping up

This discussion highlights the importance of combining technical precision with innovative design in gamified email marketing. By leveraging coding standards like AMP HTML and HTML5 & CSS3, marketers can achieve compatibility across various email platforms. The use of strategic fallbacks ensures engagement is maintained, while thorough testing ensures functionality. Stripo’s advanced tracking further enables marketers to gain deep insights into campaign performance, helping refine strategies and engage audiences more effectively.

Design gamified emails with Stripo in literally no time
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
0 comments
Type
Industry
Seasons
Integrations
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.

Stripo editor

For email marketing teams and solo email creators.

Stripo plugin

For products that could benefit from an integrated white-label email builder.