Why you should refresh quiz ad units
Quizzes are brilliant at getting your users to spend more time on site – with users spending an average of 3 minutes 17 seconds per ten question quiz. Now you can monetize that traffic by telling your site to refresh quiz ad units after every question. That will give you 10X the ad views for a typical quiz – neat, right?
The tech story: Each quiz you create and embed is an isolated iFrame on your site. Normally, clicking ‘next’ after each question has no effect on the surrounding page.
We also recommend against telling your site to do a full page reload. This would reload the entire Riddle quiz at the same time and lose your user’s progress.
Our solution? We have a script you can adapt that will tell your site to ‘listen’ for Riddle events, then use these events to refresh ad units after each question
The tech details
Ready to dive into the cool geeky details?
- We put the ad unit (in this case a Google AdSense ad) inside an iFrame.
- The iFrame has a unique ID called “google-ads-iframe”.
- The iFrame loads an external file containing the ad code.
- The Javascript code listed below listens for a Riddle event – in this case, each time the Riddle goes to the next screen. If you want to learn more about Riddle events (there are a ton of these), check out our developer documentation.
- Every time this event occurs, it tells the ad iFrame to reload.
Pro tips
This solution isn’t perfect for every site. For example, if you monetize your traffic using ads that pay per click, this might not be a good idea – a fresh ad is not really going to get you more clicks.
However, if you are being paid by CPM (for every thousand ad views), this little script can make quite a difference in your monthly payouts.
Have more than one ad unit in each quiz? Time-saver:
Instead of adding the refresh line for all the different ad IDs, just give your ad frames a unique class. Then you just refresh all iFrames in that class – instead of telling your site to refresh quiz ad units by individual ad ID.
Here’s our ready-to-use code
Here some sample code you can use – just make sure to:
- Replace Google_Ad_Unit in the code below with the ID of your iFrame containing the ads
- Make sure to put your ad code into an iFrame. (If it is not in an iFrame, this method won’t work.)
<script>
function onMessage(event) {
if (event.data && event.data.riddleEvent) {
var riddleData = event.data.riddleEvent;
if ('object' === typeof (riddleData)) {
// important: replace the ID Google_Ad_Unit with the actual ID of your ads iFrame
document.getElementById('Google_Ad_Unit').contentWindow.location.reload(true);
}
}
}
window.addEventListener("message", onMessage, true);
</script>Refresh ad units after each question in WordPress
This example works really well when you embed your quiz in WordPress. Just a couple things to remember:
- The ad unit needs to run inside an iFrame.
- To make this work, create a new html file with the ad code in it.
- Save this in a new sub directory below your document root on your web server.
- (You will need FTP access to your server for this.)
Now insert an iFrame into your site (in the Gutenberg editor use the custom HTML block to do that)
<!-- replace the src below with the path to the external file that containst the ad code-->
<iframe id="Google_Ad_Unit" src="/riddle/googleAdUnit.html" width="600px" height="800px">
</iframe>- Now, switch to the text editor of the post or page where you got your Riddle.
- Place that ad iFrame code where you want to load the ad.
- At the bottom of your page, place our handy refresh quiz ads script from above.
The other side
Instead of loading other company’s ad units below your quiz, you can also distribute your Riddle in ad units. Interactive content performs much better then static content
Can we help?
Don’t worry if trying to refresh quiz ad units sounds a little technical. Use our support chat on Riddle or email us at hello@riddle.com – we’re big customer service geeks, and race each other to answer customer questions. 🙂
