🚀 Ad Integration Examples

<!-- Place this where you want the ad to appear -->
<div id="ad-placement-container"></div>

<script>
(function() {
    fetch('https://yourdomain.com/serve-ad-new.php?placement=YOUR_PLACEMENT_CODE')
        .then(response => response.json())
        .then(data => {
            if (data.error) return;
            
            const container = document.getElementById('ad-placement-container');
            
            if (data.type === 'text') {
                // Text ad
                container.innerHTML = `
                    <div style="padding: 20px; background: #f8f9fa; border-radius: 8px;">
                        <h3 style="margin: 0 0 10px 0; color: #000;">${data.headline}</h3>
                        <p style="margin: 0 0 15px 0; color: #666;">${data.description}</p>
                        <a href="${data.click_url}" target="_blank" 
                           style="display: inline-block; padding: 10px 20px; background: #dc3545; 
                                  color: #fff; text-decoration: none; border-radius: 4px;">
                            Learn More
                        </a>
                    </div>
                `;
            } else if (data.type === 'image') {
                // Image ad
                container.innerHTML = `
                    <a href="${data.click_url}" target="_blank">
                        <img src="${data.image_url}" alt="${data.title}" 
                             style="max-width: 100%; height: auto; border-radius: 8px;">
                    </a>
                `;
            }
        });
})();
</script>

<!-- Place this where you want the audio ad -->
<div id="audio-ad-container"></div>

<!-- Load the audio player script -->
<script src="https://yourdomain.com/assets/js/audio-ad-player.js"></script>

<script>
// Initialize the audio ad player
new AudioAdPlayer('audio-ad-container', {
    placementCode: 'YOUR_PLACEMENT_CODE',
    autoplay: false,  // Set to true for autoplay (may be blocked by browser)
    volume: 0.7,      // Volume level (0.0 to 1.0)
    theme: 'dark'     // 'dark' or 'light'
});
</script>

<!-- Place this where you want the video ad -->
<div id="video-ad-container"></div>

<!-- Load the video player script -->
<script src="https://yourdomain.com/assets/js/video-ad-player.js"></script>

<script>
// Initialize the video ad player
new VideoAdPlayer('video-ad-container', {
    placementCode: 'YOUR_PLACEMENT_CODE',
    autoplay: false,     // Set to true for autoplay
    muted: false,        // Set to true to start muted
    controls: true,      // Show player controls
    width: '100%',       // Player width
    height: 'auto',      // Player height
    theme: 'dark'        // 'dark' or 'light'
});
</script>

1. Add a "Custom HTML" block in your post/page
2. Paste any of the code examples above
3. Replace YOUR_PLACEMENT_CODE with your actual code
4. Publish!

// Add this to your theme's functions.php
function adnetwork_pro_shortcode($atts) {
    $atts = shortcode_atts(array(
        'placement' => '',
        'type' => 'text'
    ), $atts);
    
    $code = '<div id="ad-' . esc_attr($atts['placement']) . '"></div>';
    
    if ($atts['type'] === 'audio') {
        $code .= '<script src="https://yourdomain.com/assets/js/audio-ad-player.js"></script>';
        $code .= '<script>new AudioAdPlayer("ad-' . esc_js($atts['placement']) . '", {
            placementCode: "' . esc_js($atts['placement']) . '",
            theme: "dark"
        });</script>';
    }
    
    return $code;
}
add_shortcode('adnetwork', 'adnetwork_pro_shortcode');

// Usage in posts: [adnetwork placement="YOUR_CODE" type="audio"]

<div id="ad-container" data-placement="YOUR_PLACEMENT_CODE"></div>

<script>
// Load ad only when it's about to be visible
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const container = entry.target;
            const placement = container.dataset.placement;
            
            // Load audio player
            new AudioAdPlayer(container.id, {
                placementCode: placement,
                theme: 'dark'
            });
            
            observer.unobserve(container);
        }
    });
});

observer.observe(document.getElementById('ad-container'));
</script>

<!-- First ad placement -->
<div id="ad-sidebar"></div>

<!-- Second ad placement -->
<div id="ad-footer"></div>

<script src="https://yourdomain.com/assets/js/audio-ad-player.js"></script>
<script>
// Initialize multiple players
new AudioAdPlayer('ad-sidebar', {
    placementCode: 'YOUR_PLACEMENT_CODE_1',
    theme: 'dark'
});

new AudioAdPlayer('ad-footer', {
    placementCode: 'YOUR_PLACEMENT_CODE_2',
    theme: 'light'
});
</script>