Google Tag Manager quiz events with Riddle

We know that having a great quiz is only part of the solution – our partners asked us to track all the different actions in a Riddle quiz – from starting the quiz, clicking on buttons, or sending data to Google Analytics.

We developed Riddle to fully support Google Tag Manager through our JavaScript quiz events – so you can trigger things on your end like firing a cookie or tracking Riddle events in Google Analytics.

Using the method described below you can easily track events like:

Riddle started
Riddle finished
Question answered
Lead Form filled out

Following the steps below should get you started tracking these events in no time if you are familiar with how GTM works.

One note: GTM is very powerful but also technical – it can be tricky for new folks.

Miss a step – or even misplace a comma, and it won’t work properly.

>> We’re a lean team, so unfortunately we can’t provide free support on actually setting up Google Tag Manager. We’re available to help fix bugs in how Riddle talks to Google Tag Manager of course – but any tips or advice on getting your GTM up and running, we’d need to invoice you @ 150 euros an hour. <<

The information below will help get up and running – but please follow the suggested steps exactly as outlined below using a quiz to start with.
Once you have a basic first example that provides the expected results, you can later adapt the scripts for other Riddle types.
Each Riddle type sends different JavaScript Events – we strongly recommend to initially set up a test using our quiz format to follow our set up guides below.

Option 1: Advanced Google Tag Managers only

We do offer a more flexible way of implementing Google Tag Manager is described in detail here – but it’s for serious GTM code ninjas only.

This full implementation allows you to track everything that happens in a Riddle based on the various Riddle CSS classes or HTML IDs – not just our pre-built events.

Our standard model works for 99.99% of our users.
This advanced option is designed for the .01% of users who need to track events that the default Riddle events do not cover.
Our standard events work for basically everyone – we highly recommend using the easier method described below for GTM tracking.
Note: you may have to ask us to add your GTM code to your Riddle embed codes if your server setup blocks JS events being published from our iFrame to the parent iFrame.
If this is the case, please reach out to us on support chat; we can help you with implementing your GTM tags into the Riddle iFrame embed.

Option 2: Google Tag Manager event tracking (recommended!)

Before diving into Google Tag Manager quiz events, please make sure to read our documentation on events first.

This is very (very!) important as the way this implementation works is based on the Riddle events.

Here’s the data flow:

Google Tag Manager listens for a Riddle JS event in your Riddle content.
When a Riddle event is fired, a custom Google Tag Manager script uses the event data to update the data layer.
This Riddle data in the data layer can now be used to trigger other events like Google Analytics.

Every one of Riddle’s 15 content types has different events and different event names.
You will need to adjust our sample script below to your needs and Riddle type.

Video tutorial: If you rather watch a video, scroll to the bottom of this article please.

(Oh, and grab a coffee. Caffeine is a big help when diving into event tracking.)

You need to have a basic understanding of our event system. If you are not sure if your server setup allows for the Riddle events to be sent to the parent iFrame, we suggest logging all the events from your Riddle to the console – this will let you identify the event names that you want to use for your tracking. A simple event logger script can be found here

Google Tag Manager quiz events – getting started

To send Riddle events to Google Analytics via Google Tag Manager (GTM) you need to set up:

A new tag that listens to the Riddle events
A new data layer variable that captures the event data
A Google Analytics event tag

IMPT: You probably already knew this but just in case, you’ll need to have:

Google Tag manager set up on the site where you embed the Riddle. It is kind of a given, but this setup will not work for Riddles on our riddle.com/showcase/riddleID page.
GTM connected to your analytics account.

Google Tag Manager quiz events – event listener tag

Create a sample quiz and embed it on your website where you are loading your GTM code.
In GTM create a new custom HTML tag and copy this code.
Name it Riddle Event Listener for now.
Trigger it for either all page views or for the page where your Riddle is embedded.

<script type="text/javascript">
        (function() {
            function onMessage(event) {
                if (event.data && event.data.riddleEvent) {
                    var riddleData = event.data.riddleEvent;
                    var gtmEvent = null;
                    var gtmPostMessageData = null;

                    if (riddleData.action === 'start-quiz') {
                        // btn start clicked OR no start page
                        gtmEvent = 'start-btn'; // or 'start-quiz'
                        gtmPostMessageData = riddleData.category; // or 'a string of your choice'

                        addgtmEvent(gtmEvent, gtmPostMessageData);
                    }

                    if (riddleData.action === 'answer-quiz') {
                        gtmEvent = 'answer-btn';
                        gtmPostMessageData = riddleData.label; // example: "1::Wie geht es dir?||1::super"

                        addgtmEvent(gtmEvent, gtmPostMessageData);
                    }
                }
            }
            window.addEventListener("message", onMessage, true);

            function addgtmEvent (gtmEvent, gtmPostMessageData) {
                
                try{
                    var dataLayer = window.dataLayer || (window.dataLayer = []);

                    dataLayer.push({
                        'event': gtmEvent,
                        'postMessageData': gtmPostMessageData
                    });
                }catch(e){}
            }
    
          })();
    </script>

IMPORTANT:

You need to alter line 9: if(riddleData.action === ‘start-quiz’) {

to listen to the correct event. The even name ‘start-quiz’ only works for the start button of a quiz. A personality test fires the start event ‘start-personality’. If you want to find out which events are fired by the various Riddle actions, please refer to this post:

This is a powerful way to use Google Tag Manager quiz events:

You can now already use GTM in preview mode to see data being pushed to the data layer by this tag.
This tag logs when the “Start” button of a quiz is clicked and also when a quiz question is answered.
The event names for these are: ‘start-btn’ and ‘answer-btn’.
The start button event will write the type and the ID of your Riddle (for example quiz-123445 for a quiz Riddle type with the ID 123445) into Google Analytics.
The value for the answer-btn will be the text of the selected answer. You could use this to track all answers given for your quiz as events labels in Google Analytics if you like.

Google Tag Manager quiz events – creating a new data layer variable

To capture the value of the event (for example the Riddle ID from the above example) you need to set up a new data layer variable – so Google Analytics knows where to log this data you’re tracking.

Create a new variable and choose “Data Layer Variable”.
Enter “postMessageData” in the Data Layer Variable Name field (see screenshot).
- Note – please make sure to write it exactly like this with all the lower and upper case letters unchanged.
This variable will now automatically capture all the event data from your Riddle. In addition to the event (question answered) it will also contain additional data on the event, such as how the question was answered.
Name your Data Layer Variable (For the example below I choose “DLV – RiddleEvent”). Remember the name, as you need it in the last step where you set up the Google Analytics tracking

Data Layer Variable for a Riddle Event - Google Tag Manager quiz events

Google Tag Manager quiz events – creating a trigger

Create a new custom event and use gtmEvent event name from the tag created in step 1.
In our example, the event name we want this trigger to fire upon is “start-btn”.

Event trigger for start button - Google Tag Manager quiz events

Google Tag Manager quiz events – sending data to Google Analytics

The last step in this Google Tag Manager quiz events setup? You’ll need to fire a tag to send data to Google Analytics. This step can be skipped obviously if you are not using Google Analytics. But for testing purposes, we recommend to just follow along as it helps to get a better understanding of how GTM works with Riddle.

Create a standard Google Analytics event tag,
Use the new data layer variable to send the event value to Google Analytics.
- (Please note: the screenshot below uses our pastafun.com sample site’s Google Analytics settings – you’ll need to use your own Analytics ID here.)

GA event tracking with GTM - Riddle ID - Google Tag Manager quiz events

IMPORTANT: Trigger the Google Analytics Event on the Custom Event created in the previous step (start-btn) and NOT on all page views.

Okay – so we’re almost there… When you follow these steps, you should see events like the ones from the screenshot below in Google Analytics.

The answer from my sample quiz on the Riddle sample sites start page of https://pastafun.com was tracked and the Quiz ID was submitted.

This is a common use case for Google Tag Manager quiz events – but there are dozens of possibilities.

We’re a lean team so can’t give detailed ‘how to’ help or guidance on setting Google Tag Manager – but our step by step guide should work for most use cases.

If you think there might be a bug in how Riddle works with Google Tag Manager, please just give us a shout via our support chat box on this page or by sending an email to hello@riddle.com.

We’re super fast at responding – and love to help out!