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

set up data layer variable

  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". If your URL variable is mypage.html?source=xzy, then enter "source" as the key.
  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 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 Riddle data and your stored user data using the ID.

This means you don'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>

If you are using an iframe inside a Riddle and want to update the data layer while the user clicks through the Riddle, you need to push data to the data layer from within the Riddle iframe. This requires minor manipulation of the sample code:

function storeText(){
            let input = document.getElementById("userInput").value;
        window.parent.postMessage({dataLayerItem: {key: 'userinput', value: (input)}}, '*')
        window.parent.postMessage({'ad-iframe-complete': true}, '*');       
        
    }
Table of Contents