Using the Riddle Data Layer ⋆ Riddle.com Documentation

The Riddle Data Layer allows you to enrich the data collected from your Riddle with external data provided by you and transmitted into the Riddle.

Please look at our blog post to understand the basic concept of using the Riddle Data Layer (part of our Business and Enterprise plans) to collect rich, first-party data.

Imagine you have campaign tracking data or data from logged-in users that you want to add to the data you collect from a Riddle quiz. By sending your data to the Riddle Data Layer, you can combine data you possess already with data you collect from your quiz, poll or survey.

There are two ways to pass data to the Riddle Data Layer:

Use UTM tags (for example, add ?id=3434 to the URL of the page where you embedded the riddle
Send data via JavaScript to the Riddle Data Layer object

To get started, you first need to set up Data Layer variables for your riddle. Edit your Riddle and open the “Publish” settings.

Click “Data Layer” in the left menu and add a Data Layer item.

Adding new Data Layer items to a Riddle Quiz

Item Key: This is the name of the variable that you are sending to Riddle. If you are trying to catch a UTM tag with the name “id”, then the item key needs to be “id”.

Item Title: The title helps you identify the Data Layer variable in your data exports and serves as the column header under which the values for the key are saved. If your UTM tag “id” has a value of “3434”, you will see a column in your leads download with the item title in the column header and “3434” as the associated value.

Naming conventions for Riddle Data Layer items

Step-by-Step instructions

UTM URL variables

A UTM variable is a variable you add to the URL. The most common use cases for UTM variables are:

Identifying a marketing campaign
Identifying a user who clicked on a link from an email marketing campaign

A URL containing a UTM variable could look like this:

https://www.riddle.com/?campaign_ID=googleads

The UTM variable name is “campaign_ID”, and the value is “googleads”

To add the campaign to the Riddle data from the user taking your quiz, you can add a Data Layer variable with the key “campaign_ID” and a title of your choice. When Riddle saves the user data from the quiz taker, the value for the campaign_ID will be saved along with all the other riddle data.

As long as the Data Layer item key is exactly the same as the name of your URL variable, all data will be captured automatically. You need to do nothing else- other than test your setup at least once before running your campaign.

JavaScript

Using JavaScript is a more advanced technique to send data to the Data Layer. With JS you can pass any value to the Riddle in real time.

Let’s say you placed your riddle quiz after a user login screen. In this case, you already have all the user info like name and email, and there would be no point in asking for this information again in a Riddle form. By passing a user ID to the Riddle Data Layer you can combine the quiz data and your stored user data using the ID.

This way, you won’t need to transfer any personally identifiable information to Riddle. But of course, you could also send the user’s name and email and use that to pre-fill a form, allowing the user to change that data if needed.

The Riddle Data layer is an array you can fill with your values.

To send data to the object, you must push the key and value to the riddleDataLayer object. This has to happen on the same page where you embedded the Riddle.

There are two different approaches to this method:

a) You have data stored already and want to send it to the Riddle when the Riddle loads.

Add your script after the Riddle iFrame is loaded and send the data to the Riddle Data Layer as follows:

window.riddleDataLayer = [];
window.riddleDataLayer.push({key:"mykey", value: "myvalue"});

You can also update more than one variable with JavaScript using this notation:

<script>
window.riddleDataLayer = [
    { key: "source", value: "mysource" },
    { key: "medium", value: "mymedium" },
];
</script>

b) You are using an iFrame inside a Riddle and want to update the Data Layer while the user clicks through the riddle. In this case, you need to push data to the Data Layer from within the Riddle iFrame, which requires a small manipulation of the sample code above.

Example: Using JavaScript to load your form in your Riddle

You do not want to use the Riddle forms to collect name and email, as you must use a self-made form. In this case, you can host your form on your server and load it into the Riddle via iFrame using our “Ads Block”.

Suppose you still want to combine the user data entered into the form with the data collected from the riddle. In that case, you can send the form data to Riddle via the Data Layer, allowing Riddle to store it alongside the other data captured.

<p>Enter some text</p>
   <div class="row">
	  <div class="col-md-12">
	   <input class="form-control" id="userInput" type="text" placeholder="Enter something"><br>
    </div><br><br>
	   <div class="col-md-12"> <button class="btn-primary btn" onclick="storeText()">Store this for the Riddle</button></div>
	   </div>
	<script>
	function storeText(){
	        let input = document.getElementById("userInput").value;
		window.parent.postMessage({dataLayerItem: {key: 'userinput', value: (input)}}, '*')
     	window.parent.postMessage({'ad-iframe-complete': true}, '*');		
		
	}
	</script>

But you can also use this method to serve other ads using the “Ad Block” like a video ad or a full-screen banner, and store information in the Data Layer that a user has seen the ad.

Please note the last line in the script: window.parent.postMessage({‘ad-iframe-complete’:true},’*’)

This script tells Riddle to advance to the next block once the form is submitted. This method allows you to remove the skip option from the “Ad block” in the riddle, forcing the user to fill out the form to advance to the next question.

Here is an example of an external form embedded in a Riddle.

Any data you enter into the form will be displayed on the next block to showcase how the Data Layer works together with the Riddle variables.

Example: Sending your Riddle’s responses to logged-in users

Imagine you will have logged in users on your site taking your Riddles.

You want to collect their responses and results to all of your Riddles.
However, they’re already logged in on your site – so you don’t want to make them fill out a lead form on Riddle.

Instead, you could use JavaScript to send their user ID to the Riddle Data Layer and then once the Riddle is completed, pass the user ID back to your CRM along with the questions, answers and results from the Riddle.

For example, you could pass an anonymized ID (e.g. sdFAfdfd23412D!#$) to Riddle via the Data Layer for each logged-in Riddle taker.
Riddle would send their Riddle responses back to you along with the value of the Data Layer variable.
You could add this information to their data profile to segment them – to help suggest special offers or content around their tastes, and more.
The best part? Riddle won’t ever need to collect personal data (like Bob’s name or email) – making it even easier to stay GDPR/CCPA-compliant.
Instead, you would match the anonymized ID on your side (sdFAfdfd23412D!#$ = Bob) and save the data on your system.

Any questions about Riddle’s Data Layer?

Let us know how you are using the Data Layer.

We would love to see some example use cases – reach out to us via hello@riddle.com. If you run into issues using the Data Layer, please use our on-site chat to get help.

Using the Riddle Data Layer