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.

JSfiddle example

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.

Did this answer your question?