Ad refresh inside the Riddle embed

You can refresh the ad slot / ad block inside the Riddle embed based on the questions answered in the Riddle. In this example, we reload the ad block inside the Riddle embed when an answer is submitted.

How it works

You can listen to the JS events as you can read here: Event logger. For each answer that is submitted by the quiz player, you can write some code to refresh your ad.

What you can do

You can implement ad refresh functionality in several ways. For example, if you have Google Ads running inside your iframe, you can refresh them dynamically when a Riddle answer is submitted. This allows you to show new ads for each question, potentially increasing your ad revenue and engagement. You can either refresh individual ad slots by recreating the ad elements and calling the Google AdSense API again, or simply reload the entire iframe content for a simpler implementation.

<!DOCTYPE html>
<html>
<head>
    <title>Ad Refresh Example</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        
        #adContainer {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            min-height: 250px;
            border: 1px dashed #ccc;
            align-items: center;
        }
        
        .ad-placeholder {
            text-align: center;
            color: #666;
            padding: 20px;
        }
        
        .refresh-info {
            background: #f0f8ff;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="refresh-info">
        <strong>Ad Refresh Demo:</strong> Ads will refresh when you answer questions in the Riddle
    </div>
    
    <div id="adContainer">
        <div class="ad-placeholder">
            <div>📺 Your Google Ad Here</div>
            <div style="font-size: 12px; margin-top: 10px;">
                Ad ID: <span id="adId">1</span> | Refreshed: <span id="refreshCount">0</span> times
            </div>
        </div>
    </div>

    <script>
        let refreshCounter = 0;
        let adCounter = 1;

        function refreshAd() {
            refreshCounter++;
            adCounter++;
            
            // Update the ad placeholder (in a real scenario, this would refresh actual Google Ads)
            document.getElementById('adId').textContent = adCounter;
            document.getElementById('refreshCount').textContent = refreshCounter;
            
            console.log('Ad refreshed! Count:', refreshCounter);
            
            // Example: Real Google AdSense refresh code would look like this:
            /*
            // Remove old ad
            const oldAd = document.querySelector('.adsbygoogle');
            if (oldAd) {
                oldAd.remove();
            }
            
            // Create new ad
            const newAd = document.createElement('ins');
            newAd.className = 'adsbygoogle';
            newAd.style.display = 'block';
            newAd.setAttribute('data-ad-client', 'ca-pub-XXXXXXXXX');
            newAd.setAttribute('data-ad-slot', 'YYYYYYYYY');
            newAd.setAttribute('data-ad-format', 'auto');
            
            document.getElementById('adContainer').appendChild(newAd);
            (adsbygoogle = window.adsbygoogle || []).push({});
            */
        }

        function sendHeightMessage() {
            window.parent.postMessage({
                "ad-iframe-height": document.body.offsetHeight,
            }, "*");
        }

        function onRiddleMessage(event) {
            const eventData = event.data;

            // Only process Riddle events
            if (eventData.isRiddle2Event !== true) {
                return;
            }

            // Refresh ad when a block is submitted (answer given)
            if (eventData.action === "Block_Submit") {
                refreshAd();
                
                // Notify parent about height change after ad refresh
                setTimeout(sendHeightMessage, 100);
            }
        }

        // Listen for Riddle events
        window.addEventListener("message", onRiddleMessage);
        
        // Send initial height
        sendHeightMessage();
        
        // Monitor height changes
        let currentHeight = document.body.offsetHeight;
        setInterval(function() {
            if (currentHeight !== document.body.offsetHeight) {
                sendHeightMessage();
                currentHeight = document.body.offsetHeight;
            }
        }, 100);
    </script>
</body>
</html>