Smart banners for iOS and Android — a quick solution for a Shopify site
Let’s see how to create a valid cross-platform solution to have “smart banners” that help you guide your mobile users from your mobile web to your mobile app.
First things first, there are several services that can do this for you like Branch or AppsFlyer. If you want an out-of-the-box solution, check out these services. you can check the pricing on their websites.
In our case and for this article, we will go into how to implement a valid solution for our app, without having the need to add also changes on the app side.
tl;dr
We use the native Safari smart banner solution, and implement a reduced version of smart banners for the rest of the browsers and devices by using SmartBanner.js
The goal
Our Product Team wants to increase the traffic to our brand new app by showing them a banner when they first come to our website that drives them to download the app.
You probably have seen this functionality plenty of times before, especially when it comes to PWAs.
We want to implement a solution that works on:
- IOs Safari
- IOs Chrome
- Android Chrome
The problem
There’s just no standard solution that works across all devices.
- Whilst Apple has a very straightforward solution to achieve this, this is just valid for Safari browsers.
- There’s no universal solution to apply to IOs Chrome or Android browsers in general.
So, unless we use a service that does all the work for us (like the ones mentioned above), we need to find a separate solution for iOS Safari and other browsers.
In our case, we must also consider the development time to implement this, since we want to have a quick solution out there as soon as possible.
iOS Safari smart banner
This is undoubtedly the most satisfying solution you’ll find. Is as simple as adding the following <meta> tag inside your pages’ <head>.
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, app-argument=myURL”>Where app-id is your app’s id in the Apple Store (something like 1110223352)
Unless you want to also implement deep-linking, you don’t need to add any additional info in the app-argument=myURL field. But check out the official docs about this if you are interested in it.
When it comes to positioning (at the very top of the browser) this is managed by Safari and its own non-intrusive guidelines, so there’s nothing to do about it.
One of the most remarkable features of this implementation is that the banner will adapt its content by detecting in advance if your app is installed on the user’s device or not. Showing “open” or “download”.
Warning! Once this banner is dismissed, Safari will remember this info in a cookie in order to avoid spamming our users. If you need to see this banner again for testing, deleting your cookies will do the trick.
And that’s it, easy peasy.
iOS Chrome (and the rest of the browsers)
Yes, you guessed it, the magical Safari solution won’t work at all with Chrome on iOS, and obviously not on other Android devices.
There are no major problems in showing a banner to the user. There is, however detecting if our app is installed on the user’s phone in order to adapt the content dynamically. As per the moment in which this article is being published, I couldn’t find a well-documented way to achieve this behavior on Chrome iOS.
For Android, though, Chrome has the getInstalledRelatedApps() function that can do this work. This also requires adding information to your Android manifest. If you are interested in exploring this via and achieving a native Android behavior I recommend you these articles:
In our case, we had some other factors to consider:
- Our app is coded in React Native
- Managed with Expo both for Android and iOS. So we needed to deal also with the Expo configuration for both platforms.
Given that the main goal was to gain new users, we’ve decided to look for a quicker middle solution and dismiss the app installation detection.
Implementing a cross-browser smart banner
Having decided that we were willing to let the “app installation detection” go, it was just a matter of creating banners for all the possible cases in phones and browsers. Maybe not that hard, but definitely very laborious.
So, somebody came to the rescue, and we decided to implement an adapted version of the library Smartbanner.js
- It works cross-browser (also on iOS!)
- It is customizable both in content, appearance, and positioning.
- It’s almost “plug and play”
The banner will show on the page load and offer a custom appearance depending on the device (iOS aesthetics or Android) and offer the user a link to the corresponding store.
The banner can also be dismissed, and will not bother the user again (unless he deletes his cookies). If you did want to insist with the user more, you can also configure this.
There are plenty of customizations you can make, checkout out the ReadMe.
Implementing Smartbanner.js on a Shopify Liquid site
If you're looking to add this to your Shopify website and don’t use Node.js, don’t worry you can still do this.
- Look for the files
smartbanner.min.jsandsmartbanner.cssin the/distfolder of the project. - Create a file into your Shopify ‘s
assetsfolder calledsmartbanner.jsand paste the .js content. Do the same with the .css. - Go to your
theme.liquidtemplate and, inside your<head>add the reference to both files:
/* Place the .css reference along with your other calls*/{{ 'smartbanner.css' | asset_url | stylesheet_tag }}
/* Place the reference to the .js along with the other scripts*/<script src="{{ 'smartbanner.js' | asset_url }}" defer></script>
4. Now, let’s add the configuration for the banner, also inside your theme.liquid and inside your <head></head> tag.
Most of these instructions are contained in the ReadMe file of the project. Remember to change the information of the title, author, price, price-suffix-apple and price-suffix-google with the information of your own product.
For the icon, you can go to your app’s page on each store, right-click on the icon and copy the address of the image, or link it to a file on your assets folder.
<!-- Start SmartBanner configuration --><meta name="smartbanner:title" content="Umamicart: Asian Groceries"><meta name="smartbanner:author" content="Umamicart, Inc."><meta name="smartbanner:price" content="FREE"><meta name="smartbanner:price-suffix-apple" content=" - On the App Store"><meta name="smartbanner:price-suffix-google" content=" - In Google Play"><meta name="smartbanner:icon-apple" content="https://is3-ssl.mzstatic.com/image/thumb/Purple122/v4/24/7a/eb/247aeb51-2bda-749f-3d5a-1001bab0d50a/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/230x0w.webp"><meta name="smartbanner:icon-google" content="https://play-lh.googleusercontent.com/zAup4togjaTxYkQC0cydmDTK3CT8L8A2gnq93bjagFxCa0fwLe6TiZWsTL6lgTJ796k=w240-h480-rw"><meta name="smartbanner:button" content="VIEW"><meta name="smartbanner:button-url-apple" content="https://apps.apple.com/us/app/umamicart/id1610216362"><meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.umamicart.umamicart"><meta name="smartbanner:enabled-platforms" content="android,ios"><meta name="smartbanner:close-label" content="Close"><!-- End SmartBanner configuration -->
But wait… this overrides Safari’s native behavior for a more limited one! Let’s fix that:
<meta name="smartbanner:exclude-user-agent-regex" content="^.*(Version).*Safari">This line above allows us to disable this banner for Safari, leaving it free to show the native banner we saw before.
Conclusions
This is not the most complete solution we could have achieved, but it was definitely the quickest one. If the goal is satisfied, maybe this solution is enough for you too.
If you still have to implement the installation detection to have a dynamic content banner, then you’d probably want to explore the Android native way, and possibly encounter issues with Chrome on iOS.
Or if you are willing to save some development time, you can consider using a service that will keep up-to-date all the development needed for the constant changes in iOS and Android platforms.
