5 Secrets To Maximizing Clicks On App Store Badges

by Justin Carroll

Do you want more people to install your games? Dumb question, right? Here’s 5 ways to help increase clicks on your game’s app store badges.

You’ve released your game on both the App Store and Google Play, maybe more. Naturally, you’ll want to put both of those app marketplace badges on your website. And that’s a great thing. But simply slapping them on seldom gives a great return.

App store badges ask users install your game on their mobile device. It’s the single most important action someone can take on your website. Therefore, you ought to pay great attention to the placement and design of your badges.

I admit, it sounds trivial. But it’s not.

If you want more clicks on your app store badges, more installs for your games, here’s 5 things you can do to help increase clicks.

1. Convert Your Official Game Websites Into Landing Pages

Websites are full of distractions, menu options, share buttons, informational pages and so on. Converting your official game website into a landing page basically means freeing it of all those distractions, and reducing it to a single page where the one and only goal is more clicks to install your game.

I know it’s intense, but it works.

If you’re a big game, this may not be the best strategy (there’s more advanced ways for you to get more clicks). But if every penny matters, landing pages can help maximize the return from your official game websites.

For more on how to convert your official game websites into landing pages read my ultimate guide to official game websites that work.

Boom Beach
has a fantastic landing page. Take a look…

The official website for Boom Beach

The overall idea of using a landing page here is right on!

2. Only Show App Store Badges On Their Respective Devices

The practice that’s been adopted by even the biggest mobile game developers has been to show all your app store badges at once across all devices (see above).

It shows your game is available on all those devices or platforms, and gives users links to click.

But having two or more buttons present at the same time, in the same space, across all devices takes away from the one button that’s relevant to the user.

The best user experience is to only give users one option, the only option you want them to choose. That’s how you maximize clicks on your app store badges.

On desktop computers this issue can’t really be avoided, because users aren’t on a device where they’re able to install your game anyway. So forwarding them on to your app store page is really just show and tell.

However, on mobile devices the issue certainly can and should be avoided in an effort to maximize clicks on the relevant badge.

Thankfully, it’s pretty easy to show and hide app store badges based on the user’s device. Here’s some example code that I’ve written to help you do just that…

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>App Store Badges Example</title>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
            // isMobile minified
            !function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);            
            // Document ready
                // Apple devices, show App Store badge
                if (isMobile.apple.device) {
                // Android devices, show Google Play badge
                } else if (isMobile.android.device) {
                // All other devices, show both badges
                } else {
            body {
                padding: 50px;
            .badge {
                display: none;
            .badge img {
                margin-bottom: 15px;
                width: 100%;
            <!-- App Store -->
            <a href="https://itunes.apple.com/us/app/clash-of-clans/id529479190?mt=8" target="_blank" class="badge badge-apple"><img src="http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg" alt="Download on the App Store" /></a>
            <!-- Google Play -->
            <a href="https://play.google.com/store/apps/details?id=com.supercell.clashofclans" target="_blank" class="badge badge-google"><img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" alt="Get it on Google Play" /></a>

I wrote this using jQuery, but you could do this with pure Javascript. Simply copy and paste this into an .htm file for a working example.

Ultimately, if your game is available on multiple platforms I recommend communicating that in a text list (a la Crossy Road) or logo list in the footer of your official game website such as this…

“Available for iPad®, iPhone®, Windows Phone®, and Android®.”

And most importantly, reserve your big call to actions for the only button you want that particular user to click.

3. Put App Store Badges In Their Right Place

App store badges should be viewable when the page loads without the user ever having to scroll first.

Ensure they’re in plain sight, and never hidden behind another action such as a rollover or additional click. I know big mobile game developers do this. That doesn’t mean they’re right. Don’t do it.

Your app store badges should always feel as if they’re the only thing the user should really be clicking.

Don’t put them up against, or in a cluster of, other actionable elements. Otherwise, they’ll either get lost in the crowd or lose impact.

Here’s a great example of an official game website with a clear, distinct call to action…

The official Hearthstone website

See how that button breathes nicely? That’s exactly what we’re after.

Consider the official Hearthstone website the poster child for the best possible way to roll your app store call to action.

4. Design Your Own App Store Badges

App store badges are boring because… copy, specifically a lack thereof. And what are they, really? Are they buttons or are they labels? Who knows?

Either design your own badges or add a line of copy preceding them.

Yes, this goes against Apple’s and Google’s app store guidelines, but oh well. Life is short and you’ve got games to sell. When brand guidelines become rules, then we’ll care.

For example, which button copy would you rather click to play Game of War: Fire Age

Button: Available in the App Store

Or this combination…

Copy: Rule the world in this real time game of global conquest!
Button: Enter Battle Now!

Yeah, me too. I want to rule the world.

Never underestimate the power of great copy. Use messaging that invokes your game experience in calling users to install your games.

Again, the perfect example using great copy in this way, is Hearthstone. Take note.

5. Ensure Your Website Has A Great Mobile Experience

While your app store badges may be nice, big and juicy on desktop computers, they’ll probably shrink significantly on mobile devices.

If a potential player is viewing your website on a mobile device they’re essentially one click away from installing your game at all times. That’s a big deal.

And the last thing you want them to do is work for it by pinching and zooming before they can click. That would be a huge problem and definitely effect conversion rates.

Here’s another example of an official game website that gets it right. Desktop version…

The desktop website for Covet Fashion by Emma Roberts

And now the mobile version of the same page…

The mobile website for Covet Fashion by Emma Roberts

If you’re selling mobile games, having a great mobile experience should go without saying. And with website builders being ridiculously cheap to obtain that, there’s simply no excuse.

By the way, the Covet Fashion by Emma Roberts official website was made using Squarespace.


Let’s be real, website take a lot of work. It’s important they give you a measurable return on your investment.

At the end of the day, it really comes down to this… websites are selling tools.

If you want to stop viewing your official game website as simply some type of digital brochure for your games, then start today by implementing these 5 technique to maximize clicks on your app store badges!