iOS Smart App Banners

Intelligent App Banners significantly enhance the user browsing experience over other advertising strategies. On iOS, Intelligent App Banners offer a uniform appearance and usability that users quickly become familiar with. Users are confident that clicking the banner will direct them to the App Store, rather than to an external ad. They favor the subtle banners positioned at the top of a webpage over intrusive full-page ads that disrupt their web interaction. Additionally, with a clearly visible and large Dismiss button, removing the banner is straightforward. Should the user navigate back to the webpage, the banner does not show up again.

If the app is already present on a user’s device, the Smart App Banner smartly modifies its function, and a tap on the banner just launches the app. If the app is not installed on their device, tapping the banner directs them to the app’s page in the App Store. Upon returning to your website, a progress indicator shows up in the banner, displaying the remaining time for the download to finish. Once the app is downloaded, the View button switches to an Open button, and tapping the banner opens the app while maintaining the user’s content from your website.

Smart App Banners automatically assess if the user’s device is compatible with your app. If it isn’t, or if your app is not available in the user’s region, the banner will not be displayed.

Add a Smart App Banner to Your Website

To incorporate a Smart App Banner on your website, insert the following meta tag in the head section of each page where you want the banner to display:

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

You can specify two comma-separated parameters in the content attribute:

1. app-id:
   1. Mandatory. This is your app’s unique identifier. To locate your app ID from the App Store Marketing Tools, enter your app’s name in the Search box, and choose the relevant country or region and media type. In the results, select your app. In the detail view of your app, locate the Content Link. Your app ID is the number found between ‘id’ and ‘?’. Alternatively, navigate to App Store Connect, select your app, go to General, choose App Information, and then locate your app ID in the General Information section presented in the center of the screen; it is identified as Apple ID.
2. app-argument
   1. Optional. A URL that adds context to your native app. If this URL is included and the user has your app installed, they can transition directly from your website to the relevant part of your iOS app.

Retaining navigational context is typically beneficial because:

• If the user is navigating deep within your website, you can forward the entire URL of the document, which your app can then parse to guide the user to the appropriate part of your app.
•  If the user conducts a search on your website, you can transfer the search query, allowing the user to continue their search in your app without needing to re-enter their query.
• If the user is creating content, you can transmit the session ID to transfer the web session state to your app, enabling the user to resume their activity without loss.

The app-argument parameter for each page can be dynamically generated using a server-side script. You can format it as you prefer, provided it constitutes a valid URL.

Example:

<meta name="apple-itunes-app" content="app-id=6479165784"/>

We can find the Apple ID in App Information > General Information, within App Store Connect.

Integrating Deep Linking into Your iOS App

If you’re looking to enhance user experience by connecting your website to your native iOS app, implementing deep linking is a key step. This involves setting up your app to handle URLs, allowing users to jump directly to specific content within your app. Here’s how you can get started:

Step 1: Implement the application(_:open:sourceApplication:annotation:) 

First, add this method to your app delegate. This method is triggered when your app is launched from a URL. Within this method, you will need to provide the logic to interpret the URL.

Step 2: Handle the URL Passed to Your App

When you set the `app-argument` parameter in your website’s Smart App Banner, it passes a URL to your app. In your app, this URL is accessible as an `NSURL` object. You need to decode this URL to direct the user to the appropriate part of your app.

Example Code Snippet:

Let’s consider you have a website that sends users to different profiles within your app. You might handle the URL like this:

- (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 whether the user was viewing a profile.
if ([[url path] isEqualToString:@"/profile"]) {

// Switch to the profile view controller.
[self.tabBarController setSelectedViewController:profileViewController];

// Pull the profile ID number found in the query string.
NSString *profileID = [url query];

// Pass the profile ID number to the profile view controller.
[profileViewController loadProfile:profileID];

}
return YES;
}

What This Code Does:

• It checks if the incoming URL contains the string `/profile`.
• If it does, the method parses the URL to extract the `profileID` from the query string.
• It then calls a function (assumed to exist in your app) named `openProfileViewController(withID:)`, which navigates to the profile view controller and passes along the `profileID`.

Implementing this functionality will make your app feel more integrated and seamless for users transitioning from your website to your app. They’ll appreciate the smooth experience as they navigate directly to the content they’re interested in!s

Reference:

Promoting Apps with Smart App Banners