Viewability Tracking

// Simplified view of SDK's viewability tracking

1. Ad starts playing
   ↓
2. IntersectionObserver monitors visibility
   • Checks every 100ms
   • Tracks what % of ad is visible
   ↓
3. When 50%+ visible for 2+ seconds
   • Mark as "viewable impression"
   • Send tracking event to server
   • Update analytics
   ↓
4. Ad continues playing
   • Viewability tracked once per impression
   • No duplicate tracking

// Inside the SDK (you don't need to implement this)
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        const visibilityRatio = entry.intersectionRatio;
        
        if (visibilityRatio >= 0.5) {
            // 50%+ visible
            if (!viewabilityTimer) {
                // Start 2-second timer
                viewabilityTimer = setTimeout(() => {
                    // Ad was 50%+ visible for 2+ seconds
                    trackViewableImpression();
                }, 2000);
            }
        } else {
            // Less than 50% visible
            if (viewabilityTimer) {
                // Reset timer
                clearTimeout(viewabilityTimer);
                viewabilityTimer = null;
            }
        }
    });
}, {
    threshold: [0, 0.25, 0.5, 0.75, 1.0]
});

// Observe the ad player
observer.observe(adPlayerElement);

const analytics = RewardedAd.getAnalytics();

console.log('Total Impressions:', analytics.impressions);
console.log('Viewable Impressions:', analytics.viewableImpressions);

// Calculate viewability rate
const viewabilityRate = analytics.impressions > 0
    ? (analytics.viewableImpressions / analytics.impressions * 100).toFixed(1)
    : 0;

console.log('Viewability Rate:', viewabilityRate + '%');

function displayViewabilityStats() {
    const analytics = RewardedAd.getAnalytics();
    
    const stats = {
        impressions: analytics.impressions,
        viewable: analytics.viewableImpressions,
        nonViewable: analytics.impressions - analytics.viewableImpressions,
        rate: analytics.impressions > 0 
            ? (analytics.viewableImpressions / analytics.impressions * 100).toFixed(1) 
            : 0
    };
    
    console.log('═══ Viewability Report ═══');
    console.log('Total Impressions:', stats.impressions);
    console.log('Viewable:', stats.viewable, `(${stats.rate}%)`);
    console.log('Non-Viewable:', stats.nonViewable);
    console.log('═══════════════════════════');
    
    return stats;
}

// The SDK automatically uses full-screen player
RewardedAd.showAd();
// → Opens in full-screen overlay
// → Guaranteed 100% viewability

RewardedAd.init({
    appId: "YOUR_APP_ID",
    apiKey: "YOUR_API_KEY",
    userId: "user_123",
    
    onAdShown: function() {
        // Pause game to keep focus on ad
        pauseGame();
        stopGameAudio();
    },
    
    onClose: function() {
        // Resume after ad closes
        resumeGame();
    }
});

// Optional: Detect visibility changes
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        console.log('⚠️ User switched tabs during ad');
        // Ad continues playing (SDK handles viewability tracking)
    } else {
        console.log('✅ User returned to tab');
    }
});

class ViewabilityMonitor {
    constructor() {
        this.startTime = Date.now();
        this.lastViewabilityRate = 0;
    }
    
    update() {
        const analytics = RewardedAd.getAnalytics();
        
        if (analytics.impressions === 0) {
            console.log('No impressions yet');
            return;
        }
        
        const rate = (analytics.viewableImpressions / analytics.impressions * 100).toFixed(1);
        
        // Check if rate changed
        if (rate !== this.lastViewabilityRate) {
            console.log(`📊 Viewability Rate: ${rate}% (${analytics.viewableImpressions}/${analytics.impressions})`);
            this.lastViewabilityRate = rate;
            
            // Alert if rate is low
            if (rate < 80 && analytics.impressions >= 5) {
                console.warn('⚠️ Low viewability rate detected!');
            }
        }
    }
    
    startMonitoring() {
        setInterval(() => this.update(), 5000); // Check every 5s
    }
}

// Usage (for development/testing)
const monitor = new ViewabilityMonitor();
monitor.startMonitoring();

// Enable debug mode to see viewability logs
RewardedAd.enableDebug();

RewardedAd.init({
    appId: "YOUR_APP_ID",
    apiKey: "YOUR_API_KEY",
    userId: "user_123"
});

// You'll see logs like:
// 👁️ [BZZE Ads] Ad visibility: 100%
// 👁️ [BZZE Ads] Viewability threshold met (50%+ for 2s)
// ✅ [BZZE Ads] Viewable impression tracked