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

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.

Building the game

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.

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.

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.

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

AMP for email is supported by the following email clients:

• Gmail, which holds 35.99% of the email client market share;
• Yahoo! Mail, with a client share of 2.85%.

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.

(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.

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.

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.

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.

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)

(Source: Email from Stripo)

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.