Custom tracking with Riddle 2.0
Tracking Riddle events such as the submission of a lead form or when a user answers a quiz question is very easy. Just enable your desired tracking tools on the publish step of your Riddle.
Riddle offers tracking for Facebook / Meta Pixel (Pro Plan and higher) as well as Google Analytics, Google Tag Manager, Matomo Analytics, Matomo Tag Manager and even custom tracking scrips (Business or Enterprise Plans only).
We have dedicated instructions for:
- Facebook / Meta pixel tracking
- Google Analytics
- Google Tag Manager
- Matomo Analytics and Matomo Tag Manager
If you use any of the tools listed above, we suggest to follow the instructions on the respective pages to implement these trackers. While you can use the custom tracking for these tools as well, our default setup should save you valuable time.
When using our custom tracking option, Riddle will execute the custom tracking code you add to the custom events section on the publish step. This will allow you to use any kind of tracker, not just the popular default ones we offer.
In technical terms: the Riddle embed is sending an event to your tracking script that is placed outside the Riddle iFrame. You can find an overview of all tracked events here.
Background on Riddle Events
A Riddle event is constructed out of 3 properties:
- Category
- Action
- Name
Event Category
The event category for each Riddle is constructed as follows:
"RiddleTrackEvent_" + RiddleId // Example: "RiddleTrackEvent_YdmTBmWr"
Event Action / Name
Event Actions are sent as strings and the string we send is dependent on which Riddle element is triggering the event.
Forms and single form field blocks
Action: “Form_Submit”
Name: We are not sending a name
Action: “Form_Skip”
Name: We are not sending a name
Blocks
A block is anything that makes up the main part of a Riddle such as questions, interstitials, title blocks etc.
Action: “Block_Submit”
Name: We are sending the answer ID as the name value
Action: “Block_Skip”
Name: We are not sending a name
Action: “Block_View”
Name: We are sending the title of the block as a string
Social
Any social sharing interaction will fire a “social” event.
Action: “Social”
Name: We are sending the social network which triggered the event as a string
CTA
All call-to-action buttons clicked will trigger this event
Action: “Cta”
Name: We are sending the CTA button text as a string.Tracking with Riddle 1.0
Core Metrics
These are events that you will also see listed on your Analytics dashboard in the Riddle creator
Action: “CoreMetrics”
Name: We send either “View”, “Start” or “Finish”
Lead Settings
When you make use of our extra privacy features that you can find in our consent/privacy block, the following events will be triggered:
Action: “LeadSettings”
Names:
- “UseCookies: enabled”
- “UseCookies: disabled”
- “AddRiddleData: enabled”
- “AddRiddleData: disabled”
- “UseTracking: enabled”
- “UseTracking: disabled”
Custom Tracking
If you want to create your own tracking script, just add a script to Riddle which contains your own function and uses the parameter “riddleEvent”. Here is a sample tracking script you can use as a template to create your own. The script is added on the Publish -> Tracking -> Custom Tracking step (see screenshot below)
Enter your own tracking code into the code editor in the “Event function” section. You can either use our default function “riddleEvent) =>” or even create your very own function as long as you write the function as an arrow-function as shown in our examples.
This function will be called every time a trackable event happens in your Riddle. You can either leave as is and it will fire for almost everything the quiz taker does or you can select specific events. In the screenshot above, the function is set to fire only when a new block is viewed.
We suggest to start out by enabling all events, leaving our default function in place, which logs all events to the browser console.
Next, play around with the code below in a Riddle that has a form block. Make sure to either have all events enabled or at least have the Form Submit event enabled.
If you are tracking multiple events, but only want to execute a particular piece of code if a form is submitted, you can add an if-statement to the tracking code as shown below. This example code will log all events into the console and also write the message “form submitted” if a form block is submitted.
(riddleEvent) => {
console.log("Riddle Event: ", riddleEvent)
if (riddleEvent.action == "Form_Submit"){console.log("form submitted")}
};This is very useful if you are tracking more than just one event and want to perform different actions based on these events. For example, if a form block is submitted, maybe you want to send an event to your CRM and update the user whereas a simple block view is only tracked in Google Analytics.
Also check out our complete list of Events we send with every Riddle.
If you find the option to add your tracking code directly to the Riddle too limiting, you can also add your own even listener to the page where the Riddle is embedded.
In this case enable custom tracking and select the events you want to send. Then add a script to the page where you have the Riddle embedded to listen for Riddle events.
The script examples above and the default script in the custom tracking setup in Riddle log all events to the browser console. While that is great to get started learning about the Riddle events, it won’t be what you need for a production environment, where you need to capture the event data on the page where the Riddle iFrame is embedded.
To capture events on the parent page, please replace the default event tracker script in the Riddle with this code sample:
(riddleEvent) => {
// Create a message object with the event data
const message = {
type: "riddleEvent",
data: riddleEvent
};
// Send the message to the parent page
window.parent.postMessage(message, "*");
};
In this code, we create a message object that contains the event data in its data property. We also specify a type property to identify the message as a “riddleEvent” message. Finally, we use the postMessage method to send the message to the parent page, using "*" as the target origin to allow the message to be sent to any origin.
On the parent page, you can listen for this message using the message event:
<script>
window.addEventListener("message", (event) => {
// Check that the message is from the iframe
// Check that the message is a riddleEvent message
if (event.data.type !== "riddleEvent") {
return;
}
// Log the event data received from the iframe
console.log("Riddle Event (from iframe): ", event.data.data);
});
</script>The listener code also logs the event data to the console but unlike the default Riddle setup, this time the console.log message is initiated from the parent page and not from within the iFrame. You can now replace the console.log with your own code to process the event data.
Tracking with Riddle 1.0
Can I use Facebook, DFP, and other tracking pixels in my Riddle quizzes?
Absolutely – you can now fire a Facebook or other tracking pixels when your readers interact with your Riddle or fill in your lead forms.
(We support DFP and other tracking pixels as well. Just skip the next paragraph and continue on below to learn about lead tracking.)
- Go beyond mere clicks – find out which ads result in actual quiz or lead forms completions
- Each user’s answers – segment them based on their quiz responses for future marketing
- Build up Facebook custom audiences – FB will use the data from your ads to suggest similar people. More effective, targeted marketing!
Read our Facebook pixel post
Now, this is too long to cover in a help topic – so please click here to ready more in our blog post.
It’s absolutely worth it if you’re using ads to drive people to your quizzes.
You’ll save money – and get more new customers.
You’ll be able to find out which ads and marketing channels are working best. Tracking clicks on ads doesn’t mean anything – you’ll want to know which ad brought me the greatest numbers of lead form completions.
Tracking pixels example
Imagine you’re running two ads – group A that gets a clickthrough rate of 1% and group B that gets .5%.
- Group A converts at 10%. At $1 a click, that equals $100 spent for 100 clicks – for only 10 leads.
- Group B’s ads convert twice as well. For the same cost ($100 for 100 clicks), you’d have 20 leads.
Using Facebook or other tracking pixels, you’d be able to turn off Group A, and send all that money to Group B.
More conversions for the same amount of money… boom!
Riddle supports Google Tag Manager
If you’re not advertising on Facebook, Riddle also supports Google Tag Manager – a very robust tracking option for non-Facebook ads.
We recommend you check our in-depth tutorial – you’ll be able to track every step from:
- Clicking on your ad
- Starting a quiz
- Answering your quiz questions
- Filling in (or skipping) your lead form
- Seeing quiz results
- Social sharing – did they share on Facebook, Twitter, etc.?