Data layer

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. You can use the data layer as part of our Business and Full-service plans.

You can pass data to the Riddle data layer using either UTM tags or JavaScript.

Set up data layer variables

  1. Edit your Riddle and go to PUBLISH.
  2. Click on Data layer.
  3. Click on ADD ITEM.
  4. Enter an item key into the Key field.
    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".
  5. Enter an item title into the Title field.
    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.

Use 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 don't need to do anything else - other than test your setup at least once before running your campaign.

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

Push the key and value to the riddleDataLayer object.

This has to happen on the same page where you embedded the Riddle.

If 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>

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: Use 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.

Table of Contents