Google Tag Manager quiz tracking

How to use Google Tag Manager quiz tracking

Are you using Google Tag Manager (GTM) to run all your marketing pixels, tags and scripts? You can track your entire quiz marketing funnel on Riddle – from quiz starts to responses, lead forms, and results.

And best of all? Even though Riddle quizzes run in an iFrame, you can still do all your quiz tracking with Google Tag Manager.

As we need to add your GTM code in our backend to your Riddle embed code, please contact us via chat and provide us the header and body script for your GTM implementation.

Google Tag Manager: included with Riddle Business & Enterprise

We include Google Tag Manager in both our Business and Enterprise plans:

Business (self-service GTM): choose this self-service option if you are already a Google Tag Manager veteran. We provide the tools, but you’ll need to be able to set this up on your side.
Enterprise (full support GTM): our turn-key, full-service option. Our team of developers will provide detailed training about Google Tag Manager and full support for your team to ensure your GTM set up is tracking your quiz events as you need.

This is similar to our support for our CSS editor.

Business is a self-service option. It gives you access to the tools – but requires you have in-house expertise.
Enterprise is our full-support, turn-key option – you provide the high-levels goals and our team will execute for you.

How GTM works with Riddle 1.0 (advanced option)

If we include your GTM script directly into the Riddle iFrame, you will be able to create your own events and event listeners using the various CSS classes and click elements of the Riddle. While this provides you with maximum flexibility, it will require a lot of setup work on your end.

We recommend a different method to use GTM with Riddle, where you can rely on Riddle sending standard events like “answer A) selected” or “Lead Form Submitted”. Unless you have very specific tracking needs that our standard events do not cover, please try out GTM using our JS Events first. You can find the complete guide to our event system to track certain pre-defined Riddle events with GTM – here.

If you are not yet familiar with Google Tag Manager, we highly recommend either watching the YouTube Videos from Measure School or subscribing to one of their free GTM classes.

Setting up Google Tag Manager

A quick heads up – Google doesn’t make it easy to track events in iFrames. So please bear with us on this rather long post – you’ll need to follow a number of precise steps outlined below for your first Google Tag Manager quiz tracking example. The good news is that it’s much easier going forward for quizzes #2, #3, and so on.

One note: GTM is very powerful but also technical – it can be a little 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 can 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’ll need to invoice you @ 150 euros an hour. <<

Note: Full Google Tag Manager quiz tracking requires features that are only available in our Team plan.

If you are on a different plan and want to test out GTM tracking works before you upgrade, please reach out to us via support chat or at hello@riddle.com – we will give you a free temporary upgrade to Riddle Teams to test this.

FAQ – using Riddle and Google Tag Manager

Can I track quiz events and lead conversions with Google Tag Manager?

Definitely – Google Tag Manager is super flexible, and lets you collect quiz information from tracking pixels, ad servers (like DoubleClick), and other tools.

You’ll be able to track and measure everything quiz start to lead form completions and social sharing. Optimize your marketing spend by seeing which ads or traffic sources are driving the best traffic to your online quiz.

What type of quiz events can I track in Google Tag Manager?

You can track any quiz event with our standard quiz events with all of our quiz maker plans – such as quiz starts, completes, lead form submissions, and so on.

You can also set up your own custom events as part of our Team plan – allowing you to track events based around Riddle CSS classes or HTML IDs. It’s much more flexible – but does require advanced Google Tag Manager experience.

Check out our handy guide for our quiz events and getting started with Google Tag Manager: https://www.riddle.com/help/riddle-v1/creators/google-tag-manager-quiz-tracking/

Can I track quiz events in Google Analytics?

Yes – you can track most quiz events for any Riddle quiz you embed on your site. Simply add an event listener for the different steps of your quiz – such as clicking the ‘next’ button.

Google Tag Manager – iFrame tracking setup

If you are not familiar with iFrames and how to track them with GTM, I highly recommend watching this video on the principles of tracking events in iFrames with Google Tag Manager:

Google Tag Manager – container setup

Containers are pretty fundamental to GTM, so we’re assuming that you already have a GTM container setup for your main site.

If so, you should follow the lead from the video above and set up a new account for the iFrame.
We will call your main account “parent-account” and the container used for the Riddle “iframe-account”
Visit the “All accounts” page on GTM and click on “create account” at the top right.
Once you have the new account created, please copy the body and head tag for your new GTM container.
Send the body/head tag to our support team (hello@riddle.com) requesting to add this to your account as a custom script for all new Riddles.
We’ll quickly get back to you (after all, from our CEO down, we’re big customer service geeks at Riddle).

Once your Google Tag Manager code is added to your account – you’ll be able to create your first Riddle quiz to test the implementation.

Google Tag Manager – importing GTM container tags => iframe-account

Download, unzip and then import this file into your iframe-account.
- Make sure to choose “merge” as the import method.
Choosing overwrite will delete everything you have set up in your GTM account previously.
After importing, you need to configure the built-in variables and activate all the click variables.
- (Don’t know how to do this? We’ve got a help video at the bottom of this post and follow along).
You will now see one new trigger “Riddle – Start Button Click” and a new Tag “Sender – Riddle Start Button Clicks” in your account.
Open and edit the Tag “Sender – Riddle Start Button Clicks”.
Go to line 7 and swap out https://pastafun.com with the exact URL of the site, where your Riddle is embedded.
- IMPT: Google is picky – so it has to be the exact URL.
- If you are using www.yoursite.com for example, make sure to include the www. part as well.
- Hint: if you later on want to track different events, play with line 4 and 5. But for now, please leave these as is.

In case you do not want to import containers for your Google Tag Manager quiz tracking, please create a new custom HTML Tag with this script:

<script>
  try {
      var postObject = JSON.stringify({
        event: 'btnclick', 
        data: 'startbutton'
      });
      parent.postMessage(postObject, 'https://pastafun.com');//replace this with the URL where the Riddle is actually embedded. Pastafun.com is the Riddle Sample site.
} catch(e) {
  window.console && window.console.log(e);
}
  </script>

and then create a new Trigger:

Type: Click – All Elements
Fires on: Some Clicks
Click classes contains start-btn

You are now all set with your iFrame container and you can switch on preview or publish the tag:

We recommend using Google Chrome so that you can monitor your GTM events using the nifty GTM preview function.
Open your Riddle quiz and check if the GTM tags are properly loaded.
When you click on the start button, you should be able to see that event in the GTM console.

Google Tag Manager – container setup => parent-account

Next up? Switch to your main GTM account and create a new tag, naming it “Listener – postMessages”

Add this as a custom HTML tag:

<script type="text/javascript">
(function(window) {

    addEvent(window, 'message', function(message) {
      try{
      var data = JSON.parse(message.data);
      var dataLayer = window.dataLayer || (window.dataLayer = []);
      if (data.event) {
        dataLayer.push({
          'event': data.event,
          'postMessageData': data
        });
      }
      }catch(e){}
    });

    // Cross-browser event listener
    function addEvent(el, evt, fn) {
      if (el.addEventListener) {
        el.addEventListener(evt, fn);
      } else if (el.attachEvent) {
        el.attachEvent('on' + evt, function(evt) {
          fn.call(el, evt);
        });
      } else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
        el['on' + evt] = function(evt) {
          fn.call(el, evt);
        };
      }
    }

  })(window);
</script>

You do not need to make any changes to this code.

As a trigger, you can either choose “all page views” or add a new page view trigger to this tag.

For a new page view tag:

Name it “pv – iframe” and set the page path to the page where your Riddle quiz is embedded.
Trigger Type: page views
Some Page Views
Page path contains myquizpage (note: myquizpage is just a placeholder. Replace that with the URL where your quiz is embedded.)

Google Tag Manager – variable set up => parent-account

The final setup step for your Google Tag Manager quiz tracking? You’ll need to capture the data sent from the iframe-account in a new variable (or in multiple variables if you are sending lots of data).

Remember, the iframe-container is sending data to the Data Layer of the parent container.

In our example, the data sent is:

event: ‘btnclick’, data: ‘startbutton’ using the JavaScript method “postMessageData”

To catch that data in the parent container, set up a new Data Layer Variable and name it DLV- RiddleButton Click.

Set it up as follows:

Data Layer Variable Name: postMessageData.data
IMPT: Please note the dot (.) notation – after the postMessageData, add the word ‘data’, as that is what the event we set up in the iframe-account will be sending.
(If you named your event data differently, make sure to alter this postMessageData.data name to match your setting.)

Google Tag Manager – use case #1: track button clicks

With all the containers set up, let’s build a common Google Tag Manager use case with quizzes.

Many marketing folks want to track the click of the ‘start’ button of their Riddle quiz as a Google Analytics event.
The key step is to create a custom trigger that listens to the event that the iFrame container sends.
The event we created was called “btnclick” (see line 4 of the iframe-container tag).
Create a new Trigger – choosing ‘Custom Event’.
Enter ‘btnclick’ as the event name – then fire it on ‘All Custom Events’.

Google Tag Manager Custom Event Button Click

Now, we want to send those click button events to Google Analytics.
Create a new tag, choosing the Google Analytics – Universal Analytics type and select ‘Event’ as the Track Type.
Name your category and action. For the label, choose the new ‘DLV – RiddleButton Click’ variable we created.
Make sure to publish both containers and start testing.

GTM – video walkthrough

GTM – use case #2: track lead form submission

Another common use case is tracking the clicks on the submit button of your lead form.

You can easily do that by adding a few more tags to your Google Tag Manager quiz tracking setup.
On your iFrame-account create a new tag to send data to the data layer when the lead button is clicked.
The Riddle lead button has the class – btn-submit

Track Lead Form Submissions with Google Tag Manager

Want to save a step? You can copy our handy script below:

<script>
  try {
      var postObject = JSON.stringify({
        event: 'lead', 
        data: 'riddleleadformsubmit'
      });
      parent.postMessage(postObject, 'https://pastafun.com');//replace this with the URL where the Riddle is actually embedded. Pastafun.com is the Riddle Sample site.
} catch(e) {
  window.console && window.console.log(e);
}
  </script>

Create a new trigger to listen for the click class: btn-submit – then fire the new tag on that trigger.

Lead Form Submission Trigger for Google Tag Manager

In the parent-frame account, set up a new trigger to listen for lead form submissions.
- Note that we named that event “lead” when setting up the iframe-account tag

Last, set up a Google Analytics tag to fire on your lead form submission, triggering on the lead form submit trigger and using the data layer variable we created previously to populate the Label in Google Analytics with the proper value.
In this case I named it “riddleleadformsubmit” – but you can change it to whatever you want on the iFrame-account tag for lead form submission.

Here is what the events will look like in Google Analytics:

Google Tag Manager with Riddle – summary

Okay – so if you’ve made it this far, congratulations! Google sure doesn’t make it easy for first-timers to implement Google Tag Manager – but the good news?

It’s infinitely easier the second time around.

Plus you’ve got a powerful, customizable tool to monitor and track any event in your quiz marketing funnel.

Now you can optimize, improve each step, and use Riddle’s quiz maker to collect more and more qualified leads.

Can we help you with questions?

Any questions? We know this a lot to take in – so please let us know on support chat or via email (hello@riddle.com).

We can’t help with detailed ‘how to’ help on using Google Tag Manager – we’re a lean team, and that’s outside what we can support.

However, we can definitely answer questions if you think there might be a bug with GTM and Riddle.

Our entire team of quiz geeks love helping out – we race each other to answer any message first. 🙂