What is a Smart Banner?
The Smart Banner is a banner that directs mobile store customers to your app. This banner usually appears at the top of the store and links to the appropriate app store.
Example Ikea app:
There are several ways to integrate smart banners into your online store.
1. Apple and Google Banners
Apple and Google each offer their own solutions for integrating a smart banner. However, these only work with their own browser technologies (Safari or Chrome) and cannot be customized.
1.1 Apple
The Apple Developer documentation describes how to integrate the banner. This option is very easy. All you need to do is add the following tag to your store frontend:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL">
Replace "myAppStoreID" with your unique App Store ID. Where to find it is described at the end of this article. The "app-argument" is optional and only serves as a reference to the download source. For example, you can enter your store URL here.
1.2 Google
You can also find all the necessary information in Google's developer documentation. This integration is a bit more complex than with Apple. Basically, you need to have a so-called "Web App Manifest" on your server so that Google can associate the app with the store. The following part of the manifest is particularly important:
"related_applications": [
{
"platform": "play",
"id": "com.google.samples.apps.iosched"
}
]
The "id" must match your App. Where to find it is described at the end of the article.
2. javascript-based smart banner
A javascript-based banner offers you the advantage that it covers both platforms and more browsers at the same time. In addition, you can do more customization with this option. Shopgate provides a template for a banner that you can use and customize as you wish:
/** Configuration **/
var appIconImg = "https://www.myshop.com/icon.png";
var iosAppLink = "https://itunes.apple.com/us/app/xyz/id123456789?ls=1&mt=8";
var androidAppLink = "https://play.google.com/store/apps/details?id=com.my.app";
var appName = "My App";
var appDescription = "My App Description";
var downloadButtonText = "View";
var bannerBackgroundColor = "#262729";
var bannerTextColor = "#f79d3d";
var downloadButtonColor = "#3288ff";
var downloadButtonTextColor = "#ffffff";
/*******************/
function closeAppBanner() {
var sgSmartBanner = document.getElementById("sg-smartbanner");
if (sgSmartBanner) {
sgSmartBanner.parentNode.removeChild(sgSmartBanner);
try {
localStorage.setItem("hideSmartBanner", "true");
} catch (e) {
console.log('Local storage not supported', e);
}
}
}
function isMobileDevice() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
return /android|iPhone|iPad|iPod/i.test(userAgent);
}
function getAppLink() {
if (/android/i.test(navigator.userAgent)) {
return androidAppLink;
}
return iosAppLink;
}
function shouldShowBanner() {
try {
return !localStorage.getItem("hideSmartBanner") && isMobileDevice();
} catch (e) {
return isMobileDevice();
}
}
function insertSmartBanner() {
if (!shouldShowBanner()) return;
var sgSmartBanner = document.createElement("div");
sgSmartBanner.id = "sg-smartbanner";
sgSmartBanner.style.cssText = "
display: flex;
align-items: center;
max-width: 100%;
width: 100%;
height: auto;
overflow: hidden;
font-family: 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: " + bannerBackgroundColor + "; color: " + bannerTextColor + ";
z-index: 99999;
margin: 0 auto;
padding: 8px 8px 8px 0;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
";
// Close button
var closeButton = document.createElement("div");
closeButton.id = "close-banner-btn";
closeButton.style.cssText = "flex: 0 0 auto; color: #777; font-size: 20px; cursor: pointer; padding: 0 10px;";
closeButton.innerHTML = "✕";
closeButton.onclick = closeAppBanner;
// App icon
var appIcon = document.createElement("div");
appIcon.style.cssText = "flex: 0 0 60px; margin-right: 10px;";
var appIconImgTag = document.createElement("img");
appIconImgTag.src = appIconImg;
appIconImgTag.style.cssText = "width: 100%; border-radius: 12px; border: 1px solid #e4e0e0;";
appIcon.appendChild(appIconImgTag);
// App info
var appInfo = document.createElement("div");
appInfo.style.cssText = "flex: 1; line-height: 1.2; font-size: 15px; padding-left: 10px;";
var appNameTag = document.createElement("span");
appNameTag.style.fontWeight = "bold";
appNameTag.innerHTML = appName;
var appDescriptionTag = document.createElement("span");
appDescriptionTag.style.cssText = "color: #8e8e93; font-size: 13px;";
appDescriptionTag.innerHTML = "<br />" + appDescription;
appInfo.appendChild(appNameTag);
appInfo.appendChild(appDescriptionTag);
// Download button
var downloadButton = document.createElement("div");
downloadButton.style.cssText = "flex: 0 0 auto; margin-left: auto;";
var downloadLink = document.createElement("a");
downloadLink.href = getAppLink();
downloadLink.target = "_blank";
downloadLink.style.cssText = "
background-color: " + downloadButtonColor + ";
color: " + downloadButtonTextColor + ";
font-size: 16px;
padding: 8px 16px;
border-radius: 6px;
text-decoration: none;
";
downloadLink.innerHTML = downloadButtonText;
downloadButton.appendChild(downloadLink);
// Append elements
sgSmartBanner.appendChild(closeButton);
sgSmartBanner.appendChild(appIcon);
sgSmartBanner.appendChild(appInfo);
sgSmartBanner.appendChild(downloadButton);
var firstElement = document.body.firstElementChild;
// var sgInsertPoint = document.getElementById('header');
// var sgInsertPoint = document.getElementsByClassName('header')[0];
document.body.insertBefore(sgSmartBanner, firstElement.nextSibling);
// sgInsertPoint.parentNode.insertBefore(sgSmartBanner, sgInsertPoint);
}
function initSmartBanner() {
setTimeout(insertSmartBanner, 100);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initSmartBanner);
} else {
initSmartBanner();
In this script, some placeholders (bolded here) need to be replaced to get the banner to work the way you want it to:
App Icon: e.g. "https://www.myshop.com/icon.png";
Apple App Link: e.g. "https://itunes.apple.com/us/app/xyz/id123456789?ls=1&mt=8";
Google App Link: e.g. "https://play.google.com/store/apps/details?id=com.my.app";
You also have the option to customize texts and colors using the other items in "Configuration". The next step will show you where to find the necessary data.
3. Your own Banner or Landing Page