Mobile Marketing, Messaging, and Apps

Promote Your iTunes Podcast with a Smart App Banner

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/id1113702712

Using 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:

  1. Design Your Banner: Create a visually appealing banner that matches your brand and website design.
  2. Implement Detection Logic: Use JavaScript to detect if the user is on an Android device and hasn’t installed your app.
  3. Display Custom Banner: If conditions are met, show your custom-designed banner.
  4. Link to Google Play: Ensure the banner links directly to your app’s Google Play podcast listing.
  5. 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()">&times;</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:

  1. Replace your-app-icon.png with the path to your podcast’s icon image.
  2. Replace YOUR_PACKAGE_NAME in the Google Play podcast URL.
  3. 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.
  4. The width should typically span the full width of the screen.
  5. The JavaScript checks if the user is on Android and hasn’t previously closed the banner.
  6. 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.

Appreciate this content?

Sign up for our weekly newsletter, which delivers our latest posts every Monday morning.

We don’t spam! Read our privacy policy for more info.

Douglas Karr

Douglas Karr is a fractional Chief Marketing Officer specializing in SaaS and AI companies, where he helps scale marketing operations, drive demand generation, and implement AI-powered strategies. He is the founder and publisher of Martech Zone, a leading publication in marketing technology, and a trusted advisor to startups and enterprises alike. With a track record spanning more than $5 billion in MarTech acquisitions and investments, Douglas has led go-to-market strategy, brand positioning, and digital transformation initiatives for companies ranging from early-stage startups to global tech leaders like Dell, GoDaddy, Salesforce, Oracle, and Adobe. A published author of Corporate Blogging for Dummies and contributor to The Better Business Book, Douglas is also a recognized speaker, curriculum developer, and Forbes contributor. A U.S. Navy veteran, he combines strategic leadership with hands-on execution to help organizations achieve measurable growth.

Related Articles

Back to top button
Close

Adblock Detected

We rely on ads and sponsorships to keep Martech Zone free. Please consider disabling your ad blocker—or support us with an affordable, ad-free annual membership ($10 US):

Sign Up For An Annual Membership