Get Noticed with Universal Smart App Banners

Or, “How to roll your own free, universal smart app banner with Tapstream”

The introduction of the Mobile Safari Smart App Banner in iOS 6 solved a common problem - how to nicely prompt your website visitors to download your app - but left many things unresolved. Three big questions remain:

1. How can you offer your Android, Windows Phone, etc., visitors the same experience?
   
2. How can you track clicks and resulting installs from this banner?
   
3. How can you use the banner to drive users to the in-app content they want, whether they already have the app or not?
   

Showing a nice banner to all of your users (not just those on iOS)

The open source community quickly resolved question 1 by publishing dozens of JavaScript-implemented Smart App Banner lookalikes that are cross platform. Our favorite is jQuery Smart App Banner by Jasny - we’ll use this as our reference implementation for the rest of this document.

Tracking clicks and installs from the banner

Question 2, tracking clicks on the banner, is a bit more complex. Even on iOS, tracking clicks on the native Smart App Banner is impossible. The iOS SAB lives outside of the browser’s document - it’s actually part of the browser itself. That means it can’t be manipulated to, say, use a redirector or an onClick() event to track clicks. Tapstream gets around this by tracking impressions and installs from that page, which is the next best thing to tracking clicks.

With jQuery Smart App Banner and Tapstream, you can trivially override the destination URL to be a Tapstream link, like so:

javascript
$.smartbanner({
   url: “http://taps.io/my-example-url?content=[the current page’s path]”,
   // ….
})

Delivering the right content in-app

Whether the user already has your app or not, it’s important that the app opens immediately to the content they were viewing on your site.

This can be accomplished with Tapstream’s Unified Deeplinking. We configure our Tapstream link (taps.io/my-example-url) to gracefully handle Android users (who do and don’t have your app), iOS users (who do and don’t have your app), and a fallback for any other type of user. Here’s a screenshot of the configuration (full size):

For iOS:

• set the deeplink destination of myapp://{{ content }}
  
• set the non-deeplink destination to your app’s listing in the iTunes App Store
  

For Android:

• set the intent URL destination to intent://{{ content }}/#Intent;scheme=myapp;package=com.myco.myapp;end
  
• set the non-intent URL destination to your app’s listing in the Google Play Store
  

With this configuration, users who already have your app will be immediately taken to it, and your app will load the correct content.

Users who don’t have your app already will be able to download it. Once they do, Tapstream’s Onboarding Links will push your users to the deeplink destination, giving them the same smooth user experience.