This overview will explain how to get data on a quiz session and run code on quiz completion using the octane.quiz.completed custom event.
💡 What you'll learn
💡 Prerequisites
Custom events are available on Octane Plus or higher plans.
How the event works
When someone reaches the end of a published quiz, the octane.quiz.completed custom event is fired by Octane AI.
This Javascript event contains extensive data about the quiz session as well as results page content.
document.addEventListener("octane.quiz.completed", function (event) {
console.log("Quiz completion event", event.detail);
}, false);
The addEventListener() method will allow you to execute code on quiz completion, i.e. reaching the results page inside of the event listener's callback function.
The event object's detail property will include the following data about the current quiz session:
Quiz answers
Email / phone number
Recommended products
Content blocks on current results page
Current quiz taker ID
This provides a method of building code that runs at the end of a quiz personalized to each quiz session.
octane.quiz.completed data structure
The detail property of the event object returned by octane.quiz.completed will always follow the same data structure. Below are explanations of what each part of the event represents.
📕 octane.quiz.completed example output
📕 octane.quiz.completed example output
{
"answers": {
"Octane: Question 1": "Answer 2",
"Octane: Question 2": "Answer 1",
"quiz results URL": "https://mystore.myshopify.com/pages/quiz#r=..."
},
"email": "[email protected]",
"email_consent": "null",
"phone": "555-123-4567",
"phone_consent": true,
"product_blocks": [
[
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$20",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
},
{
"id": "variant2 id"
}
]
}
],
[
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$10",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
}
]
}
]
],
"quiz_results_url": "https://mystore.myshopify.com/pages/quiz#r=...",
"sections": [
{
"id": "content block id",
"name": "content block name",
"products": [
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$20",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
},
{
"id": "variant2 id"
}
]
}
]
},
{
"id": "content block id",
"name": "content block name",
"products": [
{
"description": "product description",
"id": "product id",
"image": "https://cdn.shopify.com/s/files/...",
"link": "https://mystore.myshopify.com/products/...",
"price_formatted": "$10",
"product_block_id": "dynamic",
"tags": [
"tag 1",
"tag 2"
],
"title": "product title",
"type": "product type",
"variants": [
{
"id": "variant1 id"
}
]
}
]
}
],
"user": "user id",
"quiz_wrapper_element": {}
}
1. detail.answers
💡 How it works
answers: an object of key / value pairs representing answers selected during the current quiz session.
Each key / value pair in the answers object represents the custom properties[?] of the questions & answers in a quiz.
To view or edit custom properties, follow these steps:
In Octane AI's dashboard, go to Quizzes.
Next to the quiz you're targeting, click on the Edit button.
In the quiz editor, click on Connect in the top bar.
2. detail.email_consent / details.sms_consent
💡 How it works
email_consent/sms_consent: the value of the marketing checkbox[?].
email_consent and sms_consent can have one of 3 values:
true: boolean that indicates the checkbox was selected.false: boolean that indicates the opt-in was skipped, or an opt-in was submitted without selecting the checkbox.null: null value that indicates the checkbox has not been enabled.
3. detail.product_blocks
💡 How it works
product_blocks: An array of all visible product blocks in the current results page.
Each index in the product_blocks array is also an array that contains objects representing individual products.
Empty arrays are content blocks that are visible but contain no products, such as content blocks being used only for text / image content.
product_blocks is ideal for iterating through recommended products, especially if your results page uses advanced logic[?] to dynamically display different blocks.
4. detail.quiz_wrapper_element
💡 How it works
quiz_wrapper_element is an HTML DOM element object for the top level div of the current quiz content - in this case, the results page.
This can be used to manipulate HTML inside of, or around the top level containing div of the quiz.
Reference this document for a list of properties & methods that can be used with an HTML DOM element object.
5. detail.sections
💡 How it works
sections: an array of all possible content blocks in the current results page.
Each index in the sections array is an object representing content blocks in the current results page - including content blocks that are hidden through advanced logic[?].
Each content block object includes:
id: a unique ID for the content block.name: the internal name value for the content block.products: an array of objects, where each object is an individual product.
6. detail.user
💡 How it works
user: a string identifying the current quiz taker by cookie.
This value will stay the same as long as the quiz taker's Octane AI cookie is not refreshed or deleted, including across different quizzes.
Code examples
Here are some examples of ways that the octane.quiz.completed event can be used to create dynamic, personalized code.
Displaying quiz session data in the console
Console logging the detail property of the event object will display each quiz session's data in your browser console.
Inserting a quiz answer dynamically into the results page
Any answer value can be grabbed through the detail.answers object and inserted into a results page.
This code example replaces the results page title with dynamic text but only if an answer is present for the question "What's your name?"
Redirecting to another webpage based on recommended hero product
This code block assumes that the quiz recommends one hero product in the 1st content block. After assigning the title of the product to a variable, an if...else if statement is used to automatically redirect customers to a custom landing page based on the product.
This method can use any data in the event object to create custom redirect logic.