WARNING: JS events is a feature currently being tested by Qzzr. The events and attributes may change which could result in a broken experience on your implementation of JS events. At this time, use at your own risk. We will communicate large changes to this feature as they happen. Once officially available, JS events will be available on upgraded Qzzr plans.
When embedding Qzzr content on your website you can use Javascript events to perform actions on the page on people's interactions with the Qzzr content. Here is a live example of this feature in action.
For example, you can:
- Refresh the advertisements on the page when someone answers a question.
- Trigger a special message based on the result of the person taking the quiz.
- Automatically send people to a custom results page based on their outcome.
Overview
Copy the embed code.
Add “data-on-ready” attribute to the widget element and provide it the name of the function you will use, so it will look like this: <div class="mv-widget" data-widget="poll" data-id="FCyufdrgtj7izn80Im4t1BoSefP" data-width="100%" data-height="auto" data-on-ready="[fnName]"></div>
<script src="//d6launbk5pe1s.cloudfront.net/widget.js" async></script>
The function must be available when the content is rendering, usually that means inside a script tag on the body where your widget will live.
List events
list:vote
Fires when a list item is voted on {
"action" : "up" || "down" || "remove",
"date" : ISO date string,
"item_id" : ID of the item voted on,
"item_title" : title of the item voted on,
"list_id" : ID for your list,
"list_title" : title of your list,
"previous_value": Previous action value (null || "up" || "down")
}
list:close_readers_list
Fires when a user closes the reader’s list {
"list_id": ID for your list,
"date" : ISO date string
}
list:view_readers_list
Fires when users view the reader’s list {
"list_id": ID for your list,
"date" : ISO date string
}
list:share
Fires when a user clicks a share button in the list {
"date" : ISO Date string,
"list_id": ID of the list,
"network": name of the network that was clicked
}
Poll events
poll:vote
Fires when a poll is voted on {
"date": ISO date string,
"poll_id": ID of the poll,
"poll_title": Title of the poll,
"selection_id": ID of option selected,
"selection_title": Title of option selected
}
poll:demographic
Fires when demographic info has been submitted {
"age": Only a number,
"date": ISO Date string,
"gender": "male" || "female",
"poll_id": ID of the poll
}
poll:view_maps
Fires when breakdown is viewed “By Region” {
"date": ISO Date string,
"poll_id": ID of the poll
}
poll:view_country_region
Fires when a country is viewed in the breakdown {
"country": Name of the country viewed,
"date": ISO Date string,
"poll_id": ID of the poll
}
poll:view_world_region
Fires when viewing the world in the breakdown {
"date": ISO Date string,
"poll_id": ID of the poll
}
poll:view_ages
Fires when viewing demographic “By Age” {
"date": ISO Date string,
"poll_id": ID of the poll
}
poll:view_genders
Fires when viewing demographic “By Gender” {
"date": ISO Date string,
"poll_id": ID of the poll
}
poll:share
Fires when a user clicks a share button in the poll {
"date" : ISO Date string,
"poll_id": ID of the poll,
"network": name of the network that was clicked
}
Quiz events
route-change
Fires when any quiz route changes
content-loaded
Fires after content has finished loading on each new page
index:enter
Fires when quiz cover is loaded
index:exit
Fires when user is leaving quiz cover view
question:enter
Fires when any question starts rendering
question:exit
Fires when user is leaving any question view
result:enter
Fires when a user views a result {
"title": Title of the result,
"date": ISO Date string
}
result:exit
Fires when a user is leaving a result {
"date": ISO Date string
}
offer:impression
Fires when an offer is viewed {
"result_id": ID of result,
"date": ISO Date string
}
offer:conversion
Fires when an offer produces a conversion
Link/Facebook/App event data: {
"result_id": ID of the result viewed,
"date": ISO Date string
}
Lead Form event data: {
"result_id": ID of the result viewed,
"offer_id": ID of the offer,
"quiz_id": ID of the quiz,
"date": ISO Date string
}
Lead forms with custom fields will also be added to the data returned. When editing your lead form, if “maps_to” is specified, that will be the key in the event data. Otherwise, it defaults to the field label, converted to lower case and spaces are replaced with an underscore.
I.E. A field that has the name “First Name” would have the key “first_name” in the event data.
quiz:share
Fires when a user clicks a share button in the quiz {
"date" : ISO Date string,
"quiz_id": ID of the quiz,
"network": name of the network that was clicked
}
If you need any additional assistance getting this feature up and running on your website, please contact Qzzr support and we would love to work with you and your web developers to get this feature set up.
This feature is only available on Qzzr Custom plans, to learn more about Javascript events or Qzzr plans send us a message.