Using Octane AI's quiz completed custom event, you can manually create & pass custom properties into Klaviyo upon quiz completion.
💡 What you'll learn about
Developer tools you'll need (jump to section)
Template for passing custom properties with JS (jump to section)
Listening to the quiz completed event (jump to section)
💡 Prerequisites
Developer tools are available on the Octane Plus plan.
Using these features will require you to create custom code on your website that targets with your desired developer tool. This document serves as a starting point for those with the technical proficiency to build the next steps.
Developer tools you'll need
Redirecting to a custom URL at the end of a quiz will use:
Quiz completed custom event
Klaviyo.js should be installed
The quiz completed event is a custom event fired at the end of a quiz that can be used to execute custom code when listened to.
Klaviyo.js will also need to be running on the store. This can be done through the default Shopify app embed option for Klaviyo or by manually installing Klaviyo.js on the website.
Template for passing custom properties with JS
The example below shows how to pass custom properties into Klaviyo by listening to the quiz completed custom event that fires at the end of a quiz.
document.addEventListener('octane.quiz.completed', function (e) {
const email = e.detail?.email;
if (email) {
klaviyo.identify({
'$email': email,
'my custom property': "test value"
});
}
});
As long as Klaviyo.js is running on the website, custom properties can be manually defined and passed through the Klaviyo object.
You can find documentation on this method here:
Listening to the quiz completed event
Below is an example of how to use the method addEventListener() with an Octane AI custom event.
document.addEventListener('octane.quiz.completed', function (e) {
console.log('completed'); console.log(e.detail);
}, false);
Redirecting to a custom URL can be done by replacing the console.log() in the example with your own code for redirects.
Octane AI events are configured for bubbling up and information about each item can be accessed through the detail object property. In the example above, e.detail.answers would contain all quiz answers chosen in a session.
A more detailed explanation of addEventListener() including descriptions of all valid parameters can be found in this MDN web document.