If you’ve read my publication for any length of time, you know that I’m an Apple fanboy. Simple features like the ones I’m going to describe here make me appreciate Apple’s products and features.
How to Display iOS App Banners
You’ve probably noticed that when you open a site in Safari on iOS, businesses often promote their mobile application with a Smart App Banner. Click on the banner, and you’re taken directly to the App Store, where you can download the application. It’s a great feature and works well to increase adoption.
What you may not have realized is that the Smart App Banner can also be used to promote your podcast! Here’s how it works. Our link for our podcast is:
https://itunes.apple.com/us/podcast/martech-interviews/id1113702712Using the numeric identifier from our URL, we can add the following meta tag between the head tags in our site:
<meta name="apple-itunes-app" content="app-id=1113702712">You can also look up your App ID for your music or podcast with Apple’s link builder.
Now, as iOS Safari visitors visit your website on a mobile device, they’re presented with the banner you see on our site above. If they click that, they’re brought directly to the podcast to subscribe!
How To Display Android App Banners
For Android, since there’s no native solution, you’ll need to create a custom banner. Here’s a basic HTML, CSS, and JavaScript implementation:
- Design Your Banner: Create a visually appealing banner that matches your brand and website design.
- Implement Detection Logic: Use JavaScript to detect if the user is on an Android device and hasn’t installed your app.
- Display Custom Banner: If conditions are met, show your custom-designed banner.
- Link to Google Play: Ensure the banner links directly to your app’s Google Play podcast listing.
- Use the Google Play Install Referrer API: to track installations and implement deep linking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
<style>
#app-banner {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f8f8f8;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
#app-banner .content {
display: flex;
align-items: center;
justify-content: space-between;
}
#app-banner img {
width: 50px;
height: 50px;
margin-right: 10px;
}
#app-banner .text {
flex-grow: 1;
}
#app-banner .close {
cursor: pointer;
padding: 5px;
}
</style>
</head>
<body>
<div id="app-banner">
<div class="content">
<img src="your-app-icon.png" alt="App Icon">
<div class="text">
<h3>Martech Zone Interviews</h3>
<p>Listen to our podcast to research, learn, and discover Martech!</p>
</div>
<a href="https://play.google.com/store/apps/details?id=YOUR_PACKAGE_NAME" class="button">Listen</a>
<span class="close" onclick="closeAppBanner()">×</span>
</div>
</div>
<!-- Your website content goes here -->
<script>
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
function shouldShowBanner() {
return isAndroid() && !localStorage.getItem('app_banner_closed');
}
function showAppBanner() {
if (shouldShowBanner()) {
document.getElementById('app-banner').style.display = 'block';
}
}
function closeAppBanner() {
document.getElementById('app-banner').style.display = 'none';
localStorage.setItem('app_banner_closed', 'true');
}
// Show the banner when the page loads
window.onload = showAppBanner;
</script>
</body>
</html>In this Android example:
- Replace
your-app-icon.pngwith the path to your podcast’s icon image. - Replace
YOUR_PACKAGE_NAMEin the Google Play podcast URL. - Modify the CSS to customize the banner’s appearance. Since Android doesn’t have a native solution, you have more flexibility in sizing. A common practice is to make the banner similar in size to the iOS version for consistency. A height of 50-100 pixels is often sufficient to display necessary information without intruding.
- The width should typically span the full width of the screen.
- The JavaScript checks if the user is on Android and hasn’t previously closed the banner.
- The banner is displayed at the top of the page and can be closed, with this preference saved in local storage.
Remember, this is a basic implementation. You might want to enhance it with more sophisticated device detection and A/B testing capabilities or integrate it with your existing website design and functionality.
App banners are a powerful tool for promoting your mobile application to website visitors. Implementing them effectively on both iOS and Android platforms increases visibility, improves user experience, and drives more installations. Remember to continually test and refine your approach to maximize the impact of your app banners.
