Actions speak louder than words, and doing is always better than showing. Don’t talk about buying your wife flowers; buy them.

It’s the same with playable ads. Why show your game when you can get people to play it? Video ads get boring too, and playable ads can add some spice to your UA campaigns. For the unfamiliar, playable ads are minigames that give users a brief glimpse of what your game looks like.

Here’s everything you need to know about them:

Where did playable ads come from?

Playable ads used to be developed by ad networks for advertisers. However, advertisers didn’t have the control to test or experiment with different creatives. Now, there are a lot of drag-and-drop tools that make it easy to develop. Alternatively, you can also easily produce them with a little bit of coding and elbow grease.

Playable ads gained popularity in 2010 and eventually became mainstream by 2018. Although the concept of playable ads is widely known, only 7% of mobile gaming app advertisers utilize it today. More specifically, playable ads are only used in 1% of RPG ads, 13% of Hypercasual ads, and 9% of shooting games.

Source: Mintegral, State of Games Media Buying 2024

This is why I don’t really believe any reports. This doesn’t represent the gaming industry at all. Playables are mandatory for running UA outside of Facebook, Google, and TikTok. If you don’t have playables, you are fucked. You can’t scale. Full stop!

Why should you use them?

Playable ads add variety to your UA campaigns. With so much access to creative tools to produce them, it’s a no-brainer to add them to your creative mix for testing. Here are a few more reasons why you should play around with them:

Share

They’re super engaging, especially when compared directly to static or video ads. Playable ads drive 27x higher conversion rates than banner ads. In comparison, video drives 23x. More engaging means more memorable and almost impossible to ignore.

They’re cost-friendly to run. On Android and some ad networks, playables are one of the cheapest to run on ($0.60) and run at less than half the cost of native ads ($1.22). According to Liftoff.

You can work with good data. I’ll cover this more later, but you can test things like if letting users win will drive more conversions or measure how quickly users engage with your ad. These customizations can help you fine-tune

What a playable ad looks like

There are five simple parts to a playable ad.

1. Intro: a brief graphic or video that captures the user’s attention
2. Tutorial: a quick visual explanation of how to play the game. Some apps show a quick video tutorial or use on-screen elements like arrows, prompts, or pointers.
3. Key gameplay mechanic: the interactive element where users can play the game.
4. Feedback: rewards, points, and indicators of win or loss
5. Call-to-Action (CTA): something to compel the user to install and continue playing

Here are a few examples of what playable ads look like:

Source: https://www.is.com/community/blog/the-what-how-and-why-of-playable-ads/

Two types of playables

Playables are not only for gaming. Shopping, fitness, finance, and travel apps use them too. Temu has a minigame where users play a match game to unlock a discount. Dating apps will let you create a profile. Or fitness app can let you select your workout goals. It’s becoming more widely adopted across all app categories, but we’ll try to stick to gaming in this guide.

There are two versions of playable ads:

• HTML5 code and assets pulled from the game to give users a feel for the real game
• Interactive videos that use footage with interactive HTML elements that make it ‘playable’

The video format is easier to produce and may be lighter weight, but the HTML5 version is often more visually appealing and accurate to the product.

How playable ads are created

Playable ads are programmed with HTML5, CSS, and Javascript, all of which play unique and distinct roles.

HTML5 (HyperText Markup Language 5) is used for: 

• AdNetworks work with HTML format – playable ads need to be packet/bundled into html
• Structures the layout of the a
• Embed images, audio, and  video
• Forms and interactive elements

JavaScript is used for:

• Interactive elements
• In-game logic
• Responding to user actions (user progress, scorekeeping, CTA)

JavaScript plays a central role in playable ads. It typically uses the HTML <canvas> element to render the game. With the help of a JavaScript game engine, the game is drawn into the canvas, which in this case is set to fullscreen and acts as the main display for the playable.

Note: The <canvas> element allows you to draw and render graphics directly. Note 2: While using a game engine isn’t strictly required, developing without one can be quite challenging (most developers prefer using one).

For development, it’s best to use a JavaScript game engine. However, the engine’s size is crucial because playable ads have strict size limitations. For 2D game development, engines like PixiJS and Phaser are good options.

For 3D games, Three.js and Babylon.js are noteworthy. While Babylon.js is excellent for development, it requires tree-shaking to fit within size limits. Tree-shaking involves extracting only the code used in your app (in the playable ad) from the library, reducing the final package size.

However, not all libraries support tree-shaking, and it can be challenging, especially if you need multiple features from the library.

Specifics + validation

It’s important to mention that each ad network has its own requirements. For example, they specify how the package must be wrapped, and the Call-to-Action (CTA) needs to be implemented specifically in the JavaScript code for each playable ad. Additionally, some ad networks, like Mintegral, require special JavaScript calls. For instance, the playable ad must explicitly signal (via a JavaScript function) when the game ends.

Another key aspect is the validation process. To put it dramatically, it’s often comparable to uploading an app to an app store. There are a number of documented requirements, but the playable ad usually needs to pass an automated validation process first, followed by a manual review by a person to ensure compliance.

For more details, you might find this helpful: Mintegral has well-documented requirements (specific to their platform). You can check them here:
https://www.mindworks-creative.com/review/doc

The best playable creation tools

Non-programmers can easily create playable ads using drag-and-drop tools, like ADS Kit and 2DKit, without any coding knowledge. Alternatively, you can hire mobile ad developers to build custom ads for you. (calling Mr.Lancaric, yes, that’s me. I have also a playable team!)

At the moment, 2DKit is probably the best self-creation tool that has built-in visual scripting. They make it easy to export to the most popular ad networks. Luckily, there are a wealth of good YouTube tutorials on how to use the platform.

Playablemaker and ADS Kit are strong competitors that have solid UI that caters to more non-coders.Although many things in 2DKit can be achieved using drag-and-drop (D&D), it’s highly unlikely that you won’t need to use scripts (JavaScript) to achieve the desired effects.

It’s similar to Unity—while it’s possible to work without scripting, in reality, you’ll almost always end up needing to write code. So, one way or another, you’re back to coding.

Most ad networks support playable ads

Playable ad weight directly impacts loading speed and user experience. It’s crucial to factor in platform limitations, as some cap ad file sizes at 5MB, others at 10MB. Each platform’s requirements must be reviewed individually for optimal ad placement.

Applovin

• Your playable must not auto click or auto play audio before the first user interaction.
• Your playable ads must be single-line HTML code (no external references and images should be base64 encoded).
• Your playable must support MRAID v2.0.
• Your playable must support both landscape and portrait orientations.
• AppLovin renders the Close button (do not add your own).
• The click-through must redirect directly to the app store by means of mraid.open().
• Your playable should be smaller than 5MB.
• If you use WebGL, periodically check if WebGL is available if the initial check fails.
• The playable ad timer does not start until the first user interaction.
• Do not execute any JavaScript code that modifies or references the DOM until the MRAID ready event fires.
• Disable the playable’s sound until the first user interaction.
• Disable the playable’s sound when your playable closes.
• Your playable should not include any external calls or requests without prior approval from your AppLovin account team. External calls or requests may be permitted if they do not contain personal data and otherwise comply with our policies and applicable laws.

Applovin guidelines are here!

Meta (Facebook) Ads

Facebook allows you to upload a HTML5 or zip file of your playable ads for Android and iOS placements. Meta offers a partner directory for agencies and companies that help create them as well. You can read more about the specs here.

Facebook is not really suitable for playables at the moment, but something is cooking under the hood. Stay tuned; I will keep you posted.

Google Ads

You can create HTML5 playable ads for App Campaigns on Google. You can build your own playable ad using Google Web Designer, although there are better 3rd-party tools out there. AMPHTML assets are not supported at the moment. And they are no eligible to serve on App Campaigns for pre-registration and App Campaigns for engagement. Here are detailed instructions on how to upload your HTML5 assets on Google Ads.

Same here, Google is not really working too well with playables. But I will keep trying to crack it.

Unity Ads

Unity’s ad network allows for HMTL5 playable ads. If you’re using Unity’s game engine, you can create playable ads with your own assets, but there are way better tools out there. When it comes to Unity, we need to mention Luna, a costly tool that helps create HTML5-compatible playables (it’s integrated with Unity: Luna Labs Docs). However, Unity itself has significant limitations, such as a strict 5MB size limit. While Unity offers a Web Build feature using WebGL, it’s not suitable for playable ads because the resulting package is enormous and relies heavily on external assets.

Additionally, for playable ads, all assets must be embedded directly into the HTML file. This means all graphical and audio assets are converted to Base64, inflating the file size by approximately 1.3 times. This can make it even more challenging to stay within the size limits required for playable ads.

Snapchat Ads

Snapchat offers playable ads via its Snap Ad format. File size limitations exist, but Snapchat works with developers to ensure quick loading for minimal disruption in the user experience. You can read more about their specs here.

TikTok Playable Ads

TikTok (Pangle) encourages advertisers to experiment with playables. And like the other guys, they accept HTML5 playable ads with a file size under 5MB to improve performance and loading speeds. TikTok audience have one of the least forgiving attention spans, so this would be a real test for your engagement metrics. You can read more here.

Vungle, IronSource, Mintegral:

These three ad networks, along with most others, also allow playables, but with their own small differences in specifications.

PlayableMaker.com shared their ad network comparison, and it clearly shows that UA managers are interested in building for all of them when they have the option to do so.

Metrics to test and measure

Chasing surface-level metrics leads to short-term gains. Focusing on long-term metrics and testing them over time drives sustainable UA. Set up in-ad events to track player behavior and fine-tune your playable ads. And like in all things UA, you need to test your creatives to see what drives the best results. Here are the no-bullshit metrics to look at.

Engagement Rate (ER): percentage of users who play the playable ad

(Total Engagements / Total Impressions ) x 100

Click-through rate (CTR): percentage of users who click on the ad in proportion to the number of users who viewed

(Clicks/Impressions) x 100

Conversion Rate (CVR): percentage of users who completed the call-to-action

(Conversions/Clicks) x 100

Impressions per mille (IPM): how many conversions per 1,000 impressions

(Conversions/Impressions) x 1000

Completion rate: the number of users who finished playing the ad. This indicates how well the ad engages the user and holds their attention.

(Users who finished the ad / total users who started the ad) x 100

Dropouts: how many users closed the ad before finishing playing. This can suggest issues with the creative, design, or length.

Total users who started the ad – users who finished the ad

Time to Engage (TTE): how long it took users to interact with the ad. This shows if the ad starts off strong and makes a good impression or not.

% win CTR: how many players won the playable ad and clicked through to the store. A high win CTR means you should continue letting players win and vice versa.

(user who won the playable ad and click through / total users who won the ad ) x 100

% lose CTR: how many players lost the playable ad and clicked through to the store

(users who lost and clicked through / total users who lost) x 100

Share

Dancing Unicorn Best Practices

Keep gameplay simple. Users should immediately understand how to interact with the ad. You’ve got only seconds to hook new players. Add a challenge for a sense of reward, but don’t overcomplicate it. For hypercasual games, keep it under 15 seconds, and under 28 seconds for more complicated games. BUT! There have been recent cases where longer playables are performing better than short ones. Test it out!

Make it visually striking. The art style should match the app and grab attention. Make sure players instantly recognize the game genre, so they understand the mechanics and jump in fast.

Let players win, but test the data first. Use clear visual cues like pointers, arrows, circles, and fingers to show the winning move. And when they win, make them feel good about it. Sparkle confetti or make it rain coins. Make the player feel good. Start here, then test your hypothesis by measuring %win and %lose CTR.

Combine playables with other ad formats. Videos + playables FTW!

Show progress with visual progress bars, racking up points, leaderboards, or cues that indicate milestones to motivate users to complete the game. Mobile games take advantage of the psychology of points systems all the time, so why not use it here?

End with action. Make the next step crystal clear—whether it’s a download, sign-up, or click-through—and ensure every interaction drives toward that goal.

Think long-term. Avoid showing a rare or irrelevant game mechanic (looking at you, Gardenscapes). You want installs, but you also want engaged, long-term users. Don’t trick them into playing a game it’s not. High uninstall rates could ultimately hurt your ASO rankings.

• I know, I know. It’s highly debatable. I will leave this as an open discussion point. Should it be only gameplay oriented?

A/B test

Sure playables are expensive to ABtest, but with no code tools you can create 3-4 variations of one ad and test it on small scale before going full custom playable frenzy

Beginner Mistakes to Avoid

The last thing you want is to be considered shovelware. Here are costly mistakes to avoid:

1. Avoid asshole design

One of the oldest plays in the book is to ask players to “play your game” but just send you to the App Store as soon as you click on it. Some ads have fake close (x) buttons or tiny ones that make you accidentally click through to the app store to boost CTR metrics.

2. Low-quality apps can’t be saved

This goes without saying, but don’t stress about making elaborate playable ads if your game is shit. Even worse, don’t mislead people into thinking your game is something it’s not.

3. Think twice when on a shoestring budget.

Unless you have an unlimited budget, it’s not worth investing in developing playable ads for apps with small budgets unless you use no-code tools where you can create lots of playable easily and ABtest before making a decision to go full-on custom playable.

Yes, some of you might know this. Playablemaker is a tool we develop. I would appreciate it if you booked a demo, tried the tool, and shared feedback. If you use promo code DANCING UNICORN, you might get a discount.

Playable References from my end

Forge Of Empires:

https://api.playable-ads.store/data/foe-1/index.html

https://api.playable-ads.store/data/foe-2/index.html

https://api.playable-ads.store/data/foe-3/index.html

Food Stylist:

https://api.playable-ads.store/data/food-stylist-2-santorini/index.html

https://api.playable-ads.store/data/food-stylist-2-cake/index.html

https://api.playable-ads.store/data/food-stylist-3/index.html

Panzer:

https://api.playable-ads.store/data/panzer-1/index.html

https://api.playable-ads.store/data/panzer-2/index.html

Toon Riders:

https://api.playable-ads.store/data/toon-riders-1/index.html

https://api.playable-ads.store/data/toon-riders-2/index.html

https://api.playable-ads.store/data/stickman-run/index.html

Playable Brief example: Unleash Magic & Defend the Realm!

First Interaction – Set Up Your Defense:

Players are prompted to place two of their heroes, each with unique abilities, along a pathway leading to the village.

Visual Cues: Tap to place heroes and set up defenses along the path.

Narrator Text: “Position your heroes to block the enemy’s path and activate their magic!”

Second Interaction – Face the First Wave:

The first wave of enemies starts descending from the top of the screen. Players tap to activate each hero’s special ability, like Zeus casting lights to slow down and damage enemies.

Visual Cues: A glowing tap prompt on each hero to activate abilities.

Narrator Text: “Unleash powerful spells to clear the enemies! Tap to cast meteors and slow the horde.”

Third Interaction – Collect Rewards and Upgrade Heroes:

After surviving the first wave, players collect rewards (coins or hero XP) dropped by defeated enemies. They’re prompted to use these rewards to upgrade one of the heroes, unlocking a stronger spell or boosting damage.

Visual Cues: Tap to collect coins and then tap the upgrade icon to enhance hero abilities.

Narrator Text: “Upgrade your heroes to unlock devastating spells!”

Fourth Interaction – Face a Challenging Wave with Upgraded Heroes:

With upgraded powers, a larger and stronger wave of enemies approaches. Players can tap to activate the heroes’ newly enhanced abilities, experiencing increased damage and stunning effects as their heroes unleash the upgraded spells.

Visual Cues: Tap to unleash stronger, visually intense abilities, like meteors and ice blasts that clear large groups.

Narrator Text: “Fight back with enhanced powers and protect the realm!”

Call to Action:

End with a dramatic scene of the heroes standing victorious as the village is safe once again.

Text Overlay: “Collect heroes, upgrade spells, and defend the realm! Download now and unleash the magic within!”

Playable Ads checklist – before you go to your dev -think about these steps

1. Game/App Assets

• Gameplay Footage: Video or screen recordings of the game/app to understand the mechanics and flow.
• Links to app stores or access/builds if the apps are not accessible yet
• Art Assets: All relevant graphics, including character sprites, backgrounds, and UI elements, preferably in their original formats (e.g.,fbx, glb… .psd, .ai). Please do not forget the End screen assets.
• Playable ads must fit into a 5 MB package, meeting strict ad network standards. That means compressing every graphic and audio asset to perfection!

Try to avoid:

• Day 1: “I will just export and share this 359000 TB of game assets with the developer, and he will pick something”
• Day 7: “Why did you choose that asset? I don’t like the ones you picked. And why are they in lower quality than my original 4K FULLHD 5000MB file?”

Try to achieve:

• Day 1: “I have read the creative concept and I am sending you these files, I think we can use filename.xyz as a character and filename.xyz as background etc….”
• Day 7: “I understand the 5MB limit for final playable ad, I see some of the assets were optimized by you, try this smaller one and lets see if it fits”

2. 3D Assets

• Accepted 3D formats: GLTF, GLB, FBX.
• Ensure:
  • The files include all the materials, textures and animations.
  • FBX: Set the export format to binary FBX. Ensure all the external references are included, and please check the paths (Unity FBX exporter can refer to external files through their absolute path).
• Note: The best check of 3D asset validity is to open the asset in Blender, MeshLab, online 3D Viewer, or in any similar 3D Viewer / Editor
• Export FBX from Unity:

If the models have multiple textures (tens or hundreds) we need either documentation or guide, or contact for questions

Try to avoid:

• “Why are you taking so long processing the assets? We have shared everything pixel perfect”
• Meanwhile developer: “My pc is on fire, I had to learn how to do 3D graphics, install a bunch of 3D soft to process all the files I received. Also the files exported from unity are connected to their game project, that we don’t have and I have to re-model them from scratch”

Try to achieve:

• “Here are the 3D files, let us know if you have any issues, we are the creators of them so we can optimize and process them very fast.”

3. Gameplay Mechanics for Adaption

• Core Gameplay Elements: Key mechanics and features of the game/app that should be highlighted in the ad.
• Simplified Gameplay Concept: Ideas on how to simplify or adapt the game/app’s gameplay for a short, engaging ad experience.
• Interactive Elements: Specific actions or gestures (e.g., tap, swipe) to be included in the playable ad.
• Better explanation of gameplay means less iterations between builds – faster delivery of Playable Ad.

Try to avoid:

• “We want our playable ad to have 10 different screens and it should show gameplay and also backstory and also sidequests and also 3 different  game mechanics that our game don’t have now. We really need to show all we have and much more in one ad.”

Try to achieve:

• “Let’s find the way to simplify our core gameplay and add some layers and elements about the backstory in the game, so the gamer will immediately have the idea and feeling of what he is about to install.”

4. Audio Assets

• Music and Sound Effects: Background music and sound effects files, indicating which can be used in the ad.
• Keep in mind the final Playable package is about 5MB – audio files included

Try to avoid:

•  “Let’s use this 10 minute long background music – it’s a great idea! “

Try to achieve:

• “Here are sound effects and some loops to be played in the background”

5. Testing playable ads

• The fonts and some assets can be messy on an external display.
• The best way to test out the game is to use a test app from your target Ad Network.
• Maybe the easiest way is to use AppLovin Playable Preview. https://p.applov.in/playablePreview?create=1&qr=1
• We recommend testing it on the phone (there is a link to download the AppLovin test app, then scan the QR code with the app)

Try to avoid:

•  “We have looked at the ad on our big screen in the meeting room and it looks blurry and shitty – why did you make it like this?”

Try to achieve: 

• “We have used software that is dedicated for previewing playable ads and tried them on our mobile devices – because we understand these devices are the ones user will actually interact with them”

Share

Book a call to get help on playables, creatives or UA!