What are smart banners?

You'll probably recognise smart banners from your day to day mobile usage. As stated in Apple's Smart banner documentation - “Smart App Banners provide a consistent look and feel that users come to recognize. They trust that tapping the banner will take them to the App Store and not a third-party advertisement. They appreciate unobtrusive banners at the top of a webpage, instead of a full screen that interrupts their experience with the web content. And with a large and prominent Close button, a banner is easy to dismiss. When the user returns to the webpage, the banner doesn’t reappear.”

Smart banner implementation on iOS is straightforward and seamless. Android is less so but there are still options available.

Additionally we have our own separate Pugpig smart banner which allows for different display and redirect options on single article pages.

iOS Smart banners

Set up for iOS banners is quite simple and fortunately well documented by Apple. All you need is to add one meta tag to the head element of each relevant page. The tag and how to find the relevant parts of it are detailed in the aforementioned article. 

Example meta tags

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

<meta name="apple-itunes-app" content="app-id=34534534245, app-argument=https://app.yourdomain.com/story/87654321/content.html">

You don't need to worry about the part of the article that mentions providing navigational context to your app, that part of the experience is handled within the native Pugpig Bolt code. 

This is handled automatically between Bolt Web and the apps, or standalone content.html pages (from the Pugpig CMS) and the apps.

2 types of iOS banner

You may notice 2 different versions of the native iOS banner. A larger dismissible app banner and a smaller persistent app banner, both shown at the top of the web page. The persistent banner is set up via universal/canonical linking which is explained in a separate doc.

Android app install prompt

Android unfortunately does not support smart banners in the same way that iOS does. Instead there is a native app install prompt which, unlike the iOS banner, will only show if the app is uninstalled and displays a prompt to install the app or “add to home screen”. The appearance is inconsistent and it will have no effect if the app is already installed, but if applicable it should show at the bottom of the relevant web page, then display a popup if tapped. 

In order to display the prompt, your website will need to meet certain criteria:

• Neither the web app nor the native app currently installed on the device.
• Includes a Web App Manifest that includes:
  • short_name
  • name (used in the banner prompt)
  • icons including at minimum a 192px and a 512px version
  • prefer_related_applications is true
  • related_applications object with information about the app
• Served over HTTPS via the below

<link rel="manifest" href="/manifest.json">

Example manifest

{
    "name": "Demo app",
    "short_name": "Product Demo",
    "icons": [
        {
            "src": "/pugpig_assets/icon144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/pugpig_assets/icon192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/pugpig_assets/icon512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "prefer_related_applications": true,
    "related_applications": [
        {
            "platform": "play",
            "id": "com.kaldorgroup.productdemo"
        }
    ]
}

If you find that the prompt still isn't showing for you, some developers have raised that there may be additional criteria that you could try.