Google Analytics Tracking with Riddle 1.0
Please note that tracking Riddle events with Google Analytics is a fairly advanced feature. You will need to have:
- basic skills in Javascript
- access to your server to upload a PHP file
- access to your HTML code to add Javascript
If you are using a Website builder like WIX, the method below will most likely not work, as you do not have the ability to upload PHP files.
Recommended: Google Tag Manager
The best (and easier) alternative to the method below, is to use Google Tag Manager with Riddle and Google Analytics. This requires far less coding, no PHP file upload and it should work with all website builders that allow you to add Google Tag Manager tracking scripts (which should be quite standard).
Here are our instructions on how to set up GTM with Riddle.
Google Analytics – tracking quiz events
The main difficulty of tracking Riddle events in your Google Analytics account is, that Riddles are running in iFrames on your website. This makes tracking events inside that Riddle iFrame a bit tricky. Especially for Google Analytics, which cannot be set up to track events on a domain like riddle.com, which does not belong to you.
If you want to track page views or events from your embedded Riddle, you need to listen to events sent out by the Riddle iFrame and then trigger Google Analytics events accordingly.
Here are the key components needed for this. All the steps below are needed, do not skip one of them please as this example will not work in Google Analytics otherwise.
a) a Riddle embedded on your own website
b) an empty iFrame added manually below the Riddle embed
c) JavaScript on the page where the Riddle is embedded (there are 2 variations of that JavaScript below depending on what you want to track). Make sure to check for the correct event name, when tracking things like “result page loaded”. Our JS Events and the corresponding event name are listed here. Change this part in the script accordingly: riddleData.action == ‘view-quiz-result’
d) a PHP file hosted on your servers on a https:// secured domain
e) the JQuery library loaded before you load the Riddle script. You can load JQuery from a CDN here. If you do not want to use JQuery please alter the script below and convert it to classic Java Script.
The iFrame
Add this iFrame code right below the Riddle embed. Make sure to keep the ID as is or if you need to change the ID, alter the JavaScript accordingly. The JavaScript below will load the external PHP file into this iFrame and pass it the necessary parameters that Google Analytics needs.
<iframe style="display:none;" src="" id="ga-iframe"></iframe>
JavaScript on Page
There are 2 variations of this script.
Variation 1:
This version only fires the Google Analytics tracking on the result page of your Riddle and is probably the preferred method. This way you do not count each and every Riddle slide as an individual page view. If you would rather trigger Analytics for every new Riddle page, use variation 2 please.
<script>
function onMessage(event) {
if (event.data && event.data.riddleEvent) {
var riddleData = event.data.riddleEvent;
if ('object' === typeof(riddleData)) {
if (riddleData.action == 'view-quiz-result') { //note: this ensures that only the result page fires Analytics.
$('#ga-iframe').attr(
'src',
'google-analytics-iframe.php' + //make sure to change this to the location of the PHP file
'?action=' + riddleData.action +
'&category=' + riddleData.category
);
}
}
}
}
window.addEventListener("message", onMessage, true);
</script>
Variation 2:
This version fires Analytics every single time, the Riddle advances to a news slide
<script>
function onMessage(event) {
if (event.data && event.data.riddleEvent) {
console.log("Riddle event received:", event.data.riddleEvent)
var riddleData = event.data.riddleEvent;
if ('object' === typeof (riddleData)) {
$('#ga-iframe').attr(
'src',
'google-analytics-iframe.php' +
'?action=' + riddleData.action +
'&category=' + riddleData.category
);
}
}
}
window.addEventListener("message", onMessage, true);
</script>
Google Analytics: external PHP File
Create a PHP file and name it google-analytics-iframe.php and add the code listed below.
Upload this file to your server.
If you want to give it a different name or place it in a directory outside of the directory where the page with your riddle is located, make sure to adjust the JavaScript line 10 accordingly
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-ID']);//Replace this with your analytics ID
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'RiddleCategory', '<?php echo $_GET['category']; ?>']);
_gaq.push(['_trackEvent', 'RiddleAction', '<?php echo $_GET['action']; ?>']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
See full example here: https://examples.riddle.com/google-analytics.php
If you follow the steps above, you will see the event in Google Analytics as follows:
