Smart App Banners Tutorial

Note from Ray: This is a brand new tutorial released as part of the iOS 8 Feast. Enjoy!

According to the latest statistics, the Apple App Store boasts over 1.2 million apps. 

Let that sink in for a moment. Though there are millions of potential users out there for your apps, it’s harder and harder to get your work noticed. 

Of course, there’s an array of marketing strategies you can use to help elevate your app’s status, downloads and ultimately generate more revenue. Unfortunately, most require you to spend money to make money — something a lot of indie developers may not want or cannot afford to do.

There is a free option, though. Since the launch of iOS 6 in 2012, Apple’s allowed developers to add advertising banners, so-called Smart App Banners, to promote your app directly on a website.

For example, try browsing to math-ninja-app.com on your iOS device. You’ll see a Smart App Banner for the Math Ninja App by Razeware, as shown in the screenshot to the upper right.

In this short and sweet Smart App Banners tutorial, you’ll learn how to display a Smart App Banner on a website, by editing the HTML and using a cool WordPress plugin.

Getting Started

Smart App Banners have limited scope and visibility. They only show on the Safari browser on iOS devices. Since the intent is to encourage the user to download or open the app, they display when a user visits a website or subpage that’s usually a landing page for the app.

Smart App Banners are, well…smart, so they only display on devices that support the promoted app. For example, if your app is only compatible with iOS 7 and above, a user on an iOS 6 device will never see the banner.

Likewise, a banner for an iPad-only app will not display on an iPhone or iPod. Finally, if an app isn’t available in the user’s country, the Smart App Banner will not display.

It detects whether the user already has the featured app. If not, the Smart App Banner invites the user to download or purchase the app, and tapping View brings the user to your App Store page.

If the device already has the application, the Smart App Banner recognizes this and loads a slightly different ad with a link to open the app, rather than downloading and/or purchasing it.

Users can easily dismiss a Smart App Banner by tapping the X button on the left. Once dismissed, it doesn’t show itself again for that user on that website, even if the website is reloaded. 

The only way to get it to show again is if the user clears some metadata on that iOS device, as described below.

Re-Showing Hidden Banners

Note: This section is optional. You only need to know this if you dismiss a smart app banner and want to know how to get it to show up again. Feel free to skip to the next section if you want to speed ahead to implementing a banner!

On iOS 6, Smart App Banners can reappear only if Safari’s cookies and data are erased by the user in the Settings App. (Open Settings, find Safari and select Delete cookies and data.)

On iOS 7.0, it’s in a similar location, but under Website Data. (Open Settings, find Safari, select Advanced, Website Data and Remove all Website Data). 

Alternatively, you can tap the Edit button in the Website Data screen and then tap the minus button next to each website where you want the Smart App Banners.

On iOS 7.1, the only way to have those Smart App Banners reappear, once dismissed, is to reset all settings. (Open Settings, find General, then go into Reset and Reset All Settings.)

Of course, this resets your iOS device to factory settings, which is a pretty radical solution. So the onus is on you to be strategic about where your banner displays; you don’t want to annoy users by peppering them with ads because they’ll just dismiss the banner and never see your app again. 

How to Make Them Appear?

Since Smart App Banners are highly specialized marketing agents, you have to make some small modifications to the website where you want to place them. 

One best practice is to only employ Smart App Banners on websites dedicated to your application(s). For example on math-ninja-app.com, or on subpages of websites that are all about applications, such as razeware.com/battle-map-2/. 

Another important detail to note is that since only one Smart App Banner can display at a time, you must choose — and choose wisely — the perfect app to promote.

App ID

How does the Smart App Banner know what to display? You feed it an App ID, your application’s unique identifier within the Apple mobile ecosystem. There are two common ways to find an App ID.

From the iTunes.apple.com URL

If you view your application’s page on iTunes.apple.com, the URL contains your application’s App ID, as seen below, in the highlighted section of the browser’s address bar.

From iTunes Connect

Log in to your account on iTunes Connect, click Manage your apps and then click on the application you plan to promote. From there, you can find your application’s App ID next to the label Apple ID.

Save your App ID number somewhere handy, as you’ll need it to work through the sections below and create your Smart App Banner.

Showing a Smart App Banner in Plain HTML

Adding a banner to your site’s HTML is extremely easy — it requires you to add a single line of code to the head. You can use this method on static pages, as well as those encoded by a CMS, provided you can access and edit each page’s source code.

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

The most important part of this meta tag is the name attribute, which must always be apple-itunes-app. This identifies the type of meta tag, which in turn tells Safari to display your Smart App Banner.

The content attribute contains the following parameters/arguments:

• app-argument=myAppStoreID (required): replace ‘myAppStoreID’ with your unique App ID
• affiliate-data=myAffiliateData (optional): If you are an iTunes affiliate, replace ‘ myAffiliateData’ with your iTunes affiliate string
• app-argument=myURL (optional): Specifies a context-sensitive URL that passes back to the application, so it can open and load in accordance with the current context. More on that later.

Once you have all the pieces necessary for this meta tag, insert it directly into website’s main page, usually named index.html, index.php, or something similar. Here’s an example of how looks on the Math Ninja website.

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Math Ninja iPhone/iPod Touch Game | Making Addition, Subtraction, Multiplication, and Division Fun!</title> <meta name="apple-itunes-app" content="app-id=370144476"/> <link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="stylesheet" type="text/css" href="style.css"/> </head>

And this is how that renders in Safari:

If you’re not sure about tinkering with your website’s HTML code, then consult with your webmaster or your favorite web professional. 

Showing a Smart App Banner in WordPress

For websites developed on WordPress, you start by installing a free WordPress plugin. This makes it much easier to specify the App ID and display different banners on different subpages — all without touching the source code.

The aptly named Smart App Banners plugin by Justin Saad is an elegant solution. 

Before installing the plugin, you need to ensure the version of WordPress installed on your website is compatible with the plugin. Technically, you should backup your website before installing a new plugin, but it’s rare that people report issues with this tool. 

Check the requirements on the plugin’s landing page or dialog within WordPress. As of this writing, it’s compatible with version 2.9 to 3.8.3.

Installing the Plugin

To install the plugin, log in as an administrator to your website’s WordPress dashboard and navigate to the Plugins section.

From the Plugins menu, click Add New, and within that page type Smart App Banners in the Search field.

Click Search Plugins to see the results, which will look similar to this — though plugins are constantly added, so your results could look different.

From those search results, the recommended plugin is likely the first one in the list, if not, just look for it and make sure the author is Justin Saad. In the search results list, click the Install Now link directly underneath the plugin name.

In the next screenshot, you can also see what the WordPress requirements look like, so you can tell if the plugin will work on your site. 

If you don’t have a compatible version of WordPress installed — try updating to a newer build. Otherwise, the plugin could behave in unexpected ways. (It’s also wise to keep WordPress updated for the sake of security.) 

The plugin comes with extra features, such as widgets to display “Download on the App Store” and “Download for Android” badges and shortcodes you can copy and paste into any page or HTML widget. This tutorial does not cover these, but they’re easy to set up and you can find out more directly from the plugin’s webpage.

The Smart App Banners plugin allows two different ways to specify the App ID: a global site banner and a subpage-specific banner.

Global Site Smart App Banner

In order to display a Smart App Banner across your entire WordPress site, navigate to the plugin’s settings page and specify the App ID in the appropriate field. Make sure that Show banner on all pages? is checked. Click Save Changes.

This is what a Smart App Banner using this methodology looks like on the Wild Fables website:

Every page on this site displays the banner, provided the user hasn’t dismissed it.

Subpage-specific Smart App Banner

But what if you only want to show the banner on a specific subpage? There’s a fix for that.

In order to specify a page-specific Smart App Banner, load the page or post in admin side of WordPress and specify the App ID as shown below.

When users browse to that page on a mobile device using Safari, they will see the Smart App Banner for that mobile application. When they visit another page on that website, they’ll see no banner, unless you set an App ID for that page.

Here is a Smart App Banner displayed on the Battle Map 2 subpage of the Razeware website using this methodology, as seen in Safari on a device running iOS 6:

Using a Contextual URL with Smart App Banners

As you saw earlier, the content attribute of the meta tag can contain the app-argument parameter, and its value passes into your app when the user taps Open. 

For example, if you add app-argument=http://mywebsite.com/reviews?123, the following code in your app’s AppDelegate could take the user directly to the review with ID 123 in your app:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { if ([[url path] isEqualToString:@"/reviews"]) { ReviewViewController *viewController = [[ReviewViewController alloc] init]; viewController.reviewID = [url query]; [self.navigationController pushViewController:viewController animated:NO]; } return YES; }

This is convenient for your users to continue doing in your app what they started doing on your website, seamlessly. For example, if you had an app that allows you to purchase items, perhaps you want to start the user on a particular item.

Final Notes

Test the implementation of your Smart App Banner by loading the website or subpage where you placed it in Safari on a compatible iOS device. Also check to see if it self-modifies when you have installed the application.

Bear in mind that Smart App Banners display the language set on your iOS device the last time you connected to your iTunes/App Store account in the Settings App. 

In order to test Smart App Banners in another language, you need to modify your device’s language in the Settings App, and also log out and reconnect to your iTunes/App Store account on that same device.

Where to Go From Here?

That’s it for this Smart App Banners tutorial! 

Now you can start using your own Smart App Banners and enjoy a free, simple way to promote your app. If you’d like to know more, be sure to check out the Safari Web Content Guide. 

We’d love to hear from you about the different marketing and contextual strategies you’re using to make the most of Smart App Banners, so be sure to leave your comments below.

转载：http://www.raywenderlich.com/80347/smart-app-banners-tutorial