Smart App Banners Tutorial

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.