iOS – Smart App Banners in browsers not named Safari

AppBanner
With the release of iOS 6, Apple introduced a new way to promote your apps with a feature called Smart App Banners.  It’s basically a banner that appears at the top of the webpage by pushing the whole page.  It makes for a much better browsing experience as opposed to pop-up ads or full page displays.  Implementing a smart app banner is easy, all you have to do is include a meta tag in the head section of you web page. More in-depth instructions on implementing smart app banner can be found in Apple’s iOS Development Library. Below is an example of the meta required for smart app banners:

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

The only problem with smart app banners is that they will only display on devices using iOS 6 on Apple’s Safari browser. What about users running older versions of iOS? What about users who perfer to use other browsers besides Safari? To solve these questions, I decided to write a script that can be included in your web pages to display the app banners.

var origHtmlMargin = parseFloat($('html').css('margin-top'));

$(function() {      
  var iPad = navigator.userAgent.match(/iPad/i) != null; // Check if using an iPad
  var iPhone = navigator.userAgent.match(/iPhone/i) != null; // Check if using an iPhone
  var safari = $.browser.safari; // Check if using Safari
  var standalone = navigator.standalone;
  var appBannerID = $('meta[name=apple-itunes-app]').attr("content"); //Check if using smart app banners
  if (!standalone && safari) { safari = false}; //Chrome is just a re-skinning of iOS WebKit UIWebView
  if (appBannerID != null) { 
    appBannerID = appBannerID.replace('app-id=',''); 
    if ((iPad || iPhone) && (!safari)) {
      $.getJSON('http://itunes.apple.com/lookup?id=' + appBannerID + '&callback=?', function(json) {
        if (json != null) {
          var artistName, artistViewUrl, artworkUrl60, averageUserRating, formattedPrice, trackCensoredName, averageUserRatingForCurrentVersion;
          artistName = json.results[0].artistName;
          artistViewUrl = json.results[0].artistViewUrl;
          artworkUrl60 = json.results[0].artworkUrl60;
          averageUserRating = json.results[0].averageUserRating;
          formattedPrice = json.results[0].formattedPrice;
          averageUserRatingForCurrentVersion = json.results[0].averageUserRatingForCurrentVersion;
          trackCensoredName = json.results[0].trackCensoredName;

          var banner = '<div class="smart-banner">';  
          banner += '<a href="#" id="swb-close" onclick="CloseSmartBanner()">X</a>';
          banner += '<img src="' + artworkUrl60 + '" alt="" class="smart-glossy-icon" />';
          banner += '<div id="swb-info"><strong>' + trackCensoredName + '</strong>';
          banner += '<span>' + artistName + '</span>';
          banner += '<span class="rating-static rating-' + averageUserRating.toString().replace(".", "") + '"></span>';
          banner += '<span>' + formattedPrice + '</span></div>';
          banner += '<a href="' + artistViewUrl + '" id="swb-save">VIEW</a></div>';

          $('body').append(banner);                       
          $('.smart-banner').stop().animate({top:0},300);
          $('html').animate({marginTop:origHtmlMargin+78},300); 
        }
      }); 
    }
  }       
}); 
      
function CloseSmartBanner() {
  $('.smart-banner').stop().animate({top:-82},300);
  $('html').animate({marginTop:origHtmlMargin},300);
}

How it works: The first thing I had to do was get the value of margin-top. This is used to animate the page and push it down so the banner can display at the top of the page.

var origHtmlMargin = parseFloat($('html').css('margin-top'));

Next step was determine the device and browser being used. I also check if the meta tag for smart app banners is included by pulling the App ID. Standalone is meant to determine if a UIWebView is being used within an app. If it is then the safari variable would be set to true. Since we want to show the banners at all times we change the safari variable back to false.

var iPad = navigator.userAgent.match(/iPad/i) != null;
var iPhone = navigator.userAgent.match(/iPhone/i) != null;
var safari = $.browser.safari;
var standalone = navigator.standalone;
var appBannerID = $('meta[name=apple-itunes-app]').attr("content");
if (!standalone && safari) { safari = false};

Next we get the app details using Apple’s Search API and build the HTML.

$.getJSON('http://itunes.apple.com/lookup?id=' + appBannerID + '&callback=?', function(json) {

artistName = json.results[0].artistName;
artistViewUrl = json.results[0].artistViewUrl;
artworkUrl60 = json.results[0].artworkUrl60;
averageUserRating = json.results[0].averageUserRating;
formattedPrice = json.results[0].formattedPrice;
averageUserRatingForCurrentVersion = json.results[0].averageUserRatingForCurrentVersion;
trackCensoredName = json.results[0].trackCensoredName;

var banner = '<div class="smart-banner">';
banner += '<a href="#" id="swb-close" onclick="CloseSmartBanner()">X</a>';
banner += '<img src="' + artworkUrl60 + '" alt="" class="smart-glossy-icon" />';
banner += '<div id="swb-info"><strong>' + trackCensoredName + '</strong>';
banner += '<span>' + artistName + '</span>';
banner += '<span class="rating-static rating-' + averageUserRating.toString().replace(".", "") + '"></span>';
banner += '<span>' + formattedPrice + '</span></div>';
banner += '<a href="' + artistViewUrl + '" id="swb-save">VIEW</a></div>';

Next we animiate the web page and push it down to display the app banner at the top. We use the margin-top value saved at the beginning of the script and add the height of the banner. The function CloseSmartBanner is triggered when the user clicks the X at the top left of the banner. The code hides the banner and animates the web page back up.

$('body').append(banner);
$('.smart-banner').stop().animate({top:0},300);
$('html').animate({marginTop:origHtmlMargin+78},300);

function CloseSmartBanner() {
$('.smart-banner').stop().animate({top:-82},300);
$('html').animate({marginTop:origHtmlMargin},300);
}

This is the bare bones of the script. There’s more to it including styling and images included in a CSS file. The star rating system used can be found here: Star Rating. If your reading this, I won’t go into the details of the styling so if you have any questions leave them in the comments section below.

.smart-banner {                         
position:absolute; 
left:0; 
top:-82px; 
border-bottom:1px solid #e8e8e8; 
width:100%; 
height:78px; 
font-family:'Helvetica Neue',sans-serif; 
background:-webkit-linear-gradient(top, #f4f4f4 0%,#cdcdcd 100%); 
box-shadow:0 1px 2px rgba(0,0,0,0.5); 
z-index:9998; 
-webkit-font-smoothing:antialiased; 
overflow:hidden; 
-webkit-text-size-adjust:none;
}
#swb-save { 
position:absolute; 
right:20px; 
top:24px; 
border:1px solid #bfbfbf; 
width:10%; 
min-width:58px; 
height:24px; 
font-size:14px; 
line-height:24px; 
text-align:center; 
font-weight:bold; 
color:#6a6a6a; 
background:-webkit-linear-gradient(top, #efefef 0%,#dcdcdc 100%); 
text-transform:uppercase; 
text-decoration:none; 
text-shadow:0 1px 0 rgba(255,255,255,0.8); 
border-radius:3px; 
box-shadow:0 1px 0 rgba(255,255,255,0.6),0 1px 0 rgba(255,255,255,0.7) inset; 
}
#swb-save:active { 
line-height:25px; 
background:-webkit-linear-gradient(top, #dcdcdc 0%,#efefef 100%); 
}
.smart-glossy-icon {
width: 60px;
height: 60px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
border-radius: 12px;                            
position:absolute; 
left:30px; 
top:10px; 
display:block; 
}
.rating-static { 
width: 60px; 
height: 14px;  
display: block; 
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAgCAYAAADZubxIAAAB+klEQVR42u2ZsWrDMBCGvfYJ+np9jC55g1DoKySjlyweugTSJUsIJUPAOCaEeElpSmk7dClqf4HCYSTXCqXlTvfBQWL/i0+688l/limKIoyXxcK8bTYmFT1omuYqGf3TaGSeJxOTir4sS7NardLQY+cfh0MbKejBcrk0CJF6tDPseBdIzOfNhQ38pvc+drtb7no883q9Ni6QmPl8bgO/6T3X9rjrM7Qzl5RQHGez0w7hrseDT6dT0xV1Xb9K0VuQgFByUCXtyueuB6HkbLfbe4l6O5z0TY4E/X6/vy6KwtBAa5Oqz7ytrWNY4a7HO6udIFSASP374XAZanES9SDPc4NAYjCkuP8i9a69+YYXX5vjrkd7G4/HBmdIdw2DCRLkO1Ny12c0MRQcLXxfhbjruwgOKUL1iqIoiqIoym/A3d/FmTg1PzgK7v4ujkzV98G/r567HxyFBH8XWixw3yrg7gf/2P7afurjYGCjr//6n3pX4TSgrTz+qLPQ2Pu7sXD3d1HlWFR6HwtMLTRaESL83Vgk+LtU83BXnJJDv9dS2Pu75wxXnP1dVDJdYOeyhPTs/d1YuPu7tLW7BUZ0DTOc/eAoqJ/afp9x0Lc3REX80dBwwt0PPqs9c/V33YZoV3ioTbP3d88ZsnzXufi7XV+7YhOk/q6iKIryB3wBtjEcvuWoD/oAAAAASUVORK5CYII=') 0 0 no-repeat;
}
.rating-50 { background-position: 0 0; }
.rating-40 { background-position: -12px 0; } 
.rating-30 { background-position: -24px 0; }
.rating-20 { background-position: -36px 0; }
.rating-10 { background-position: -48px 0; }
.rating-0 { background-position: -60px 0; }
.rating-5  { background-position: -48px -16px; }
.rating-15 { background-position: -36px -16px; }
.rating-25 { background-position: -24px -16px; }
.rating-35 { background-position: -12px -16px; }
.rating-45 { background-position: 0 -16px; }                    
#swb-close { 
position:absolute; 
left:5px; 
top:5px; 
display:block; 
border:2px solid #fff; 
width:14px; 
height:14px; 
font-family:'ArialRoundedMTBold'; 
font-size:10px; 
line-height:14px; 
text-align:center; 
color:#fff; 
background:#070707; 
text-decoration:none; 
text-shadow:none; 
border-radius:14px; 
box-shadow:0 2px 3px rgba(0,0,0,0.4); 
-webkit-font-smoothing:subpixel-antialiased; 
}
#swb-close:active { color:#aaa; }                       
#swb-info { 
position:absolute; 
left:98px; 
top:14px; 
width:44%; 
font-size:11px; 
line-height:1.2em; 
font-weight:bold; 
color:#6a6a6a; 
text-shadow:0 1px 0 rgba(255,255,255,0.8); 
}
#swb-info strong { 
display:block; 
font-size:13px; 
color:#4d4d4d; 
}
#swb-info em { font-style:normal; text-transform:uppercase; }

The full source code and installation instructions can be found here: https://github.com/ijason/Smart-App-Banners

16 Replies to “iOS – Smart App Banners in browsers not named Safari”

    • Unfortunately it would not tell users whether or not the app is already installed. Other then that it does function identically like it would on Safari.

      • but is that not the whole idea of “smart” in “Smart App Banners” to detect the App and direct to Store or App in a smart way. Without that it is just yet another pretty banner.

  1. Pingback: Useful tool for promoting your app | Andreas Kambanis

  2. Pingback: Smart App Banners for promoting your app | Andreas Kambanis

    • It looks like the safari detection no longer works. I’ll look into that. To make this work for desktop you can remove the checks for iPad, iPhone and safari.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Do the Math      
 

*