How To Implement Smart App Banners To Get More Downloads

This capability has been around since WWDC 2012, but if you haven't taken advantage of it yet, you should start implementing it because it is a simple way to help your app get more downloads.

There are many ways to do mobile app advertising, but Apple Smart App Banners are easy to add to your website and provide a consistent iOS look and feel that your website visitors can trust. In this post, you will learn how they work, how to implement them, and you will see examples of them in action.

How They Work

Smart App Banners only appear in Safari on iOS 6+ devices. They do not appear in Safari on OSX. By adding one line of code to your HTML, every time someone visits your website, they will be presented with a banner that will make them aware of your app on the App Store, or give them the option to open your app, if it is already installed on their device.

This provides a great way for you to convert more of your website visitors into app users or encourage visitors to continue to use your app. Since the banners are styled just like the App Store, they are less obtrusive and you do not have to resort to clunky third party pop-ups or creating your own solution.

How To Implement Mobile App Advertising With Smart App Banners

On Your Website

The code is actually incredibly simple. Just insert the following meta tag in the head area of your website html:

Keep name="apple-itunes-app" as-is, because that identifies the type of meta tag it is. The only parameter that is required is app-id and is the unique identifier of your app. If you cannot find your app ID, you can use the iTunes Link Maker page to find it.

The other optional parameters function as follows:

• affiliate-data - If you have an affiliate code, you can enter it here. If you do not have one, you can get from the Apple Affiliate Program page.

• app-argument - This is a parameter that be passed from your website to your app. It can be used for a variety of things, from passing a search string, to downloading the session ID to your app. The app-argument gets passed as a URL.

Once you have this code set up on your website, you are good to go. If you would like to provide some kind of navigational context to your app by passing a value in app-argument, then you have to provide the logic that will interpret the URL that you pass.

In Your App

To read a URL that is passed to your app, add the application:openURL:sourceApplication:annotation: method to your app delegate. Then insert the logic that will make your app respond accordingly.

If you would like more information on how this works, you can find the protocol reference here.

What It Looks Like

Let's check out the Instapaper app and see what it looks like when Smart App Banners are implemented on a website. This is what their website looks like on an iPhone:

Now if we open Safari on an iPad, this is what the banner looks like. Notice that because there is more room on the iPad, the banner also shows the screenshots of the app on the right.

An App That Could Benefit From Using A Smart App Banner

Now let's look at an app that could benefit from installing an App Store banner meta tag on their website. As we looked through the top ranking apps, the Baby Connect app caught our eye. It is an app that allows parents to track everything related to their baby.

If we take a look at the rankings for this app, they are already doing well. In the iPhone - US - Medical category, they are currently ranked #1 for paid apps and #4 for top grossing apps.

But if we visit their website with Safari on an iPhone, we do not see the banner at the top.

Even though they are doing pretty well, they would probably be able to boost the number of downloads of their app by simply adding a Smart App Banner. This shows that even popular apps can overlook this simple website optimization. With the app marketplace becoming more and more competitive, you should look for every advantage you can find.

How To Advertise Web Apps And Display Smart Banners On Pre iOS 6 Devices

If you are willing to put in a little more work, you can make banners appear on pre iOS 6 devices and advertise web apps. These are not Apple banners, but third party solutions that use jQuery to achieve a similar look and function. Kurt Zenisk's solution allows you to advertise web apps, while the Jasny solution will allow you display Smart Banners on older iOS devices. Here is an example of the Jasny banner.

Conclusion

That is all there is to it. This will only take you a few minutes to add to your site and you should start to see the effect immediately, depending on your website traffic. Regardless of what you have thought of Smart App Banners in the past, we hope that this post has made you aware of the benefit of using them and encouraged you to implement them, if you haven't already.

Have Smart App Banners been an effective form of mobile app advertising for you? Let us know in the comments below.