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? We got you covered when making quizzes with Riddle as well. And best of all? Even though Riddle quizzes run in an iFrame, you can still do all your quiz tracking with Google Tag Manager. 

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.

 

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. 

Note: Full Google Tag Manager quiz tracking requires features that are only available in our Enterprise 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 Enterprise to test this (plus help with the geeky stuff). 

Alternatively use our event system to track certain pre-defined Riddle events with GTM – read more about that here.

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

Please note: Google Tag Manager will only work for new content created after we added the GTM script for you. Unfortunately, tracking old Riddles is not possible – so please keep this in mind, when implementing GTM tracking.

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

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

  1. Download, unzip and then import this file into your iframe-account.
    • Make sure to choose “merge” as the import method.
  2. Choosing overwrite will delete everything you have set up in your GTM account previously.
  3. 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).
  4. You will now see one new trigger “Riddle – Start Button Click” and a new Tag “Sender – Riddle Start Button Clicks” in your account.
  5. Open and edit the Tag “Sender – Riddle Start Button Clicks”.
  6. 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:


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:


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

GTM 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.Google Analytics event from iFrame button click

 

Google Tag Manager – video walkthrough

 

Google Tag Manager – 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:

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

  • 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

GTM parent trigger

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

GTM setup for GA lead form submission

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

GTM Events in GA

 

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.

google tag manager quiz tracking

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.

Any questions? We know this a lot to take in – so please let us know on support chat or via email (hello@riddle.com). Our entire team of quiz geeks love helping out – we race each other to answer any message first. ๐Ÿ™‚