Promoting Apps with Smart App Banners

Safari has a new Smart App Banner feature in iOS 6 and later that provides a standardized method of promoting apps on the App Store from a website, as shown in Figure 7-1.

Figure 7-1  A Smart App Banner of the Apple Store app

Smart App Banners vastly improve users’ browsing experience compared to other promotional methods. As banners are implemented in iOS 6, they will provide a consistent look and feel across the web that users will come to recognize. Users will trust that tapping the banner will take them to the App Store and not a third-party advertisement. They will appreciate that banners are presented unobtrusively at the top of a webpage, instead of as a full-screen ad interrupting the web content. And with a large and prominent close button, a banner is easy for users to dismiss. When the user returns to the webpage, the banner won’t reappear.

If the app is already installed on a user's device, the banner intelligently changes its action, and tapping the banner will simply open the app. If the user doesn’t have your app on his device, tapping on the banner will take him to the app’s entry in the App Store. When he returns to your website, a progress bar appears in the banner, indicating how much longer the download will take to complete. When the app finishes downloading, the View button changes to an Open button, and tapping the banner will open the app while preserving the user’s context from your website.

Smart App Banners automatically determine whether the app is supported on the user’s device. If the device loading the banner does not support your app, or if your app is not available in the user's location, the banner will not display.

Implementing a Smart App Banner on Your Website

To add a Smart App Banner to your website, include the following meta tag in the head of each page where you’d like the banner to appear:

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

You can include three comma-separated parameters in the content attribute:

Providing Navigational Context to Your App

In your app, implement the application:openURL:sourceApplication:annotation: method in your app delegate, which fires when your app is launched from a URL. Then provide logic that can interpret the URL that you pass. The value you set to the app-argument parameter is available as the NSURL url object.

The example in Listing 7-1 illustrates a website that passes data to a native iOS app. To accomplish this, detect if the URL contains the string /profile. If it does, then open the profile view controller and pass the profile ID number that is in the query string.

Listing 7-1  Routing the user to the correct view controller

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    // in this example, the URL from which the user came is http://example.com/profile/?12345
    // determine if the user was viewing a profile
    if ([[url path] isEqualToString:@"/profile"]) {
        // switch to profile view controller
        [self.tabBarController setSelectedViewController:profileViewController];
        // pull the profile id number found in the query string
        NSString *profileID = [url query];
        // pass profileID to profile view controller
        [profileViewController loadProfile:profileID];
    }
    return YES;
}