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 quiz events – so you can trigger things like firing a cookie.

The good news? If you are using Google Tag Manager for all your tracking needs, you can also use the Riddle events in your tags.

(For advanced users, a more flexible way of implementing Google Tag Manager is described in detail here. 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. We recommend this for anyone use tracking pixels or monitoring their online advertising campaigns with tags/scripts. But the default Riddle events described below will be sufficient for many basic tracking needs.)

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

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. We suggest you might also want to log 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.

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

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

  1. Google Tag manager set up on the site where you embed the Riddle
  2. GTM connected to your analytics account

Google Tag Manager quiz events – event listener tag

  • 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.

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.
  • 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 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.

  • 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.

GA events from Riddle

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. If you have questions or if this does not work for you as expected, 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!