Personalizing Content for Audio Ad Listener – Audiohook

The Audiohook JavaScript library provides powerful tools to personalize your website content for visitors who have been exposed to your audio advertisements. This guide will show you how to use the ahServed function to detect audio ad exposure and dynamically adjust your website experience.

What is ahServed?

The ahServed function is a JavaScript function that checks whether a website visitor has been served an audio ad. It returns a Promise that resolves to true if the user has heard your audio ad, or false if they haven't.

Basic Usage

After installing the Audiohook Conversion Tag on all the pages of your website as shown here, the simplest way to use ahServed to check if a user has been exposed to your audio ad:

ahServed().then(hasBeenServed => {
    if (hasBeenServed) {
        console.log('User has been served an audio ad');
        // Personalize content for this user
    } else {
        console.log('User has not been served an audio ad');
        // Show default content
    }
});

Example: Dynamic Promo Banner

One of the most effective ways to use ahServed is to display a special promotional banner with a promo code to users who have heard your audio ad. This creates a seamless experience from audio ad to website conversion.

HTML Structure

First, create a hidden banner element in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    
    <!-- Audiohook Analytics Script -->
    <script async src="https://js.audiohook.com/analytics.js?audiohookId=YOUR_AUDIOHOOK_ID"></script>
    
    <style>
        .promo-banner {
            display: none;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .promo-banner.visible {
            display: block;
        }
        
        .promo-code {
            font-size: 24px;
            font-weight: bold;
            background: rgba(255,255,255,0.2);
            padding: 10px 20px;
            border-radius: 5px;
            display: inline-block;
            margin: 10px 0;
        }
        
        .close-banner {
            position: absolute;
            top: 10px;
            right: 15px;
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Promo Banner (hidden by default) -->
    <div id="promoBanner" class="promo-banner">
        <button class="close-banner" onclick="closeBanner()">×</button>
        <h2>🎉 Welcome Back! We Heard You Heard Us!</h2>
        <p>Use this exclusive promo code for 20% off your first order:</p>
        <div class="promo-code">AUDIO20</div>
        <button onclick="applyPromo()" style="background: white; color: #667eea; border: none; padding: 10px 30px; border-radius: 5px; cursor: pointer; font-weight: bold;">Apply Code</button>
    </div>
    
    <div style="padding-top: 100px;">
        <!-- Your main content here -->
    </div>
</body>
</html>

JavaScript Implementation

Add this JavaScript code to check for audio ad exposure and show the banner:

<!-- Load Audiohook Script -->
<script async src="https://js.audiohook.com/analytics.js?audiohookId=YOUR_AUDIOHOOK_ID"></script>

<script>
// Wait for the page to load
window.addEventListener('load', async function() {
    try {
        // Check if user has been served an audio ad
        const hasBeenServed = await window.ahServed();
        
        if (hasBeenServed) {
            // Show the promo banner
            showPromoBanner();
            
        }
    } catch (error) {
        console.error('Error checking audio ad status:', error);
    }
});

function showPromoBanner() {
    const banner = document.getElementById('promoBanner');
    if (banner) {
        banner.classList.add('visible');
        
        // Optionally, auto-hide after 10 seconds
        setTimeout(() => {
            closeBanner();
        }, 10000);
    }
}
</script>

Advanced Example: Personalized Hero Section

You can also use ahServed to completely customize different sections of your website:

async function personalizeHeroSection() {
    const hasBeenServed = await ahServed();
    const heroSection = document.getElementById('hero');
    
    if (hasBeenServed) {
        // Personalized message for audio ad listeners
        heroSection.innerHTML = `
            <h1>Great to See You Again! 👋</h1>
            <p>Ready to experience what you heard about?</p>
            <button onclick="showSpecialOffer()">Claim Your Exclusive Offer</button>
        `;
        
        // Track personalized view
        ahTrack('hero_personalized', {
            version: 'audio_ad_listener'
        });
    } else {
        // Default message for new visitors
        heroSection.innerHTML = `
            <h1>Welcome to Our Website</h1>
            <p>Discover amazing products and services</p>
            <button onclick="learnMore()">Learn More</button>
        `;
        
        // Track default view
        ahTrack('hero_default', {
            version: 'new_visitor'
        });
    }
}

// Run on page load
window.addEventListener('load', personalizeHeroSection);

Best Practices

Always use try-catch: Wrap your ahServed calls in error handling to gracefully handle any issues

Track engagement: Use ahTrack to monitor how users interact with personalized content

Test both states: Ensure your website works well for both audio ad exposed and non-exposed users

Don't be intrusive: Make personalized content feel natural and valuable, not creepy or overly aggressive

Provide value: Offer genuine benefits (like exclusive promo codes) to users who heard your audio ads

Respect privacy: The ahServed function only checks for audio ad exposure; it doesn't reveal personal information

Troubleshooting

Banner not showing?

Ensure the Audiohook script is loaded before calling

ahServed

Check browser console for any JavaScript errors

Verify your Audiohook ID is correct

Make sure you're testing with a user who has actually been served an audio ad

How do I test this functionality?

For testing purposes, you can temporarily simulate an audio ad exposure by manually setting the required cookie or parameter. Contact Audiohook support for testing credentials and instructions.

Can I use multiple personalization strategies?

Yes! You can call ahServed multiple times throughout your site to personalize different elements. Just be careful not to overwhelm users with too many personalized elements at once.

Need Help?

If you have questions about implementing ahServed or personalizing content for audio ad listeners, please contact our support team or visit our Knowledge Base for more resources.