Using Facebook Pixel tracking with Riddle requires you to embed the Riddle on a ‘verified domain’. As Riddle events are sent to Facebook as Custom Events, they require a verified domain to be recognized by Facebook.
You can read more on the background of why you need to verify your domain here.
Why track quiz events with the Meta Pixel?
Frankly – using the Facebook Pixel supercharges your marketing spend. But you need to have verified domains.
If you want to maximize your marketing spend, you need to run ads on Facebook to the right audience and measure which ads convert into leads.
This lets you use the data captured by your Facebook conversion pixel to find additional users that are similar to your successful conversion – so this pool of users will also convert more often, saving you money.
Compare this to just running ads without tracking – and you’re essentially spending money in the dark.
Verified domains – initial setup on Facebook
Facebook requires you to verify each domain on which you want to fire the Facebook pixel for tracking. We recommend that you start by verifying your domains now if you have not done so.
You can verify them in the Facebook Business Manager – Business settings in the “Brand Safety” section (see screenshot). Please consult the Facebook guide for more information.
Once your domain is verified, create a Facebook Pixel or grab the existing Pixel code from the Business Settings “Data Sources” section in the Facebook Business Manager.
Facebook Pixel in Riddle 1.0 creator
1st step – remove the Facebook Pixel in your Riddle quiz
For users of Riddle’s Facebook Pixel integration, if you’re using this workaround for Facebook’s verified domains, you will want to remove the Pixel from your Riddle quiz.
Verified domains – why place the Pixel code outside the iFrame?
As mentioned above, Facebook’s verified domains policy means you won’t be able to install your Facebook Pixel code inside any iFrame embed like a Riddle quiz anymore – since you cannot verify riddle.com as a domain.
The solution? You need to place the pixel code on the page where you embed the Riddle quiz – outside the iFrame.
Since the quiz will be one of your verified domains, tracking will now be possible.
To track events that happen inside the Riddle iFrame, you will be using the Riddle Javascript Events. We developed these events to let the page outside the Riddle iFrame know, what is happening inside the iFrame.
You can read all about our JavaScript quiz events here.
Setting up Facebook Pixel tracking for Riddle’s quiz events
To set up your Facebook Pixel tracking for Riddle events you will need to:
- add the default FB tracking code to the header of your webpage (you probably already have set that up)
- add an event listener Javascript to the page where the Riddle is embedded
- add your own events to the event listener Javascript
Use this sample code to get started:
Pay the most attention to lines 15 and 16 as well as 19 and 20.
In line 15, the script is waiting for the “form-submit” event from the Riddle. This event is sent, when a lead form is submitted (probably one of the most important events to track with Facebook as it shows significant interest in what you are offering.
Once this even is fired, the Facebook pixel is told to register a new custom event. This happens in line 16. The “fbq” function is called with a custom event (‘trackCustom’) and the custom event is given the name ‘riddle-form-submit’. You can change the event name to anything you like.
Alternatively, you can use pre-set Facebook pixel events as outlined in the Facebook developer guide for pixels.
Note: You need the Facebook Pixel code installed in the <head> section of the page where you embedded the Riddle and where you placed the custom tracking script.
This is the code you need to have in your <head> section, just make sure to replace the words YOURPIXELID with the actual ID of your pixel in lines 11 and 15 below.
Advanced tracking
Creating highly customized audiences of like-minded users is a huge reason verified domains are so important for quiz marketers.
Facebook allows you to send additional custom parameters along with a custom pixel. You can use these parameters to capture the ID of the Riddle that was started and even how an individual question was answered.
Imagine the possibilities to create audiences based on specific answers given in your quizzes or personality tests.
To do that, you can send custom parameters when you create the tracking event.
Ideally you first capture the required value from the Riddle event in a variable. For example, get the Riddle ID from the “category” of the Riddle Start Event with this code:
Below is a screenshot of the corresponding JavaScript Event that Riddle sends out when a quiz is started.
Next, alter the code to send “quiz-ID” along with the start event as follows:
You can add multiple custom parameters in the { }.
Below is a screenshot of how the Facebook Pixel Helper Plugin will capture this event.
If you don’t have the Facebook Pixel helper installed, we highly recommend to do that as it will allow real time debugging of your pixel setup.
The Google Tag Manager option
Lastly, you can also run this entire setup through Google Tag Manager.
You will need to follow our guide on using GTM with Riddle events, which describes the setup to send events to Google Analytics and merely change the Google Analytics part with the corresponding Facebook Pixel setup.
Learn how to fire Facebook Pixels with Google Tag Manager is this great video from the Measure School below:
Any questions about verified domains and quiz tracking?
Just ask us on support chat – we’re more than happy happy to help about everything from crafting the perfect quiz to helping you with verified domains and Facebook tracking.
One note though – Facebook makes this a little complicated, so you’ll need to be a coder.
We can help with the basics – but as a lean team, we won’t be able to provide detailed coder-level support for this.