Advanced Feature: This feature is recommended for advanced users and requires coding.
Widget Callbacks are useful if you're selling tickets on your website with the Universe widget and would like to set custom actions (e.g. redirect to a certain page) once someone purchases a ticket. Widget Callbacks are useful for tracking your conversions from advertising. Please note that due to different factors (script blockers, ad blockers, etc.) not all events can be tracked and this data is provided to you with no guarantees.
A simple widget callback feature that is most commonly used is the automatic redirect to any webpage URL.
For example, Widget Callbacks can be used to direct your buyers to a thank you page or any webpage URL, after the buyer purchases a ticket from your website. To do so, you must have jQuery loaded on your site. To use jQuery from Google, add the following script to your page’s header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
To set up automatic redirects, the following piece of code needs to be pasted into the source of the registration page or under the jQuery script in the header:
<script type="text/javascript">
document.addEventListener('unii:ticket:purchased', function (event) {
setTimeout(function() {
window.location.assign('THANK_YOU_PAGE_URL');
}, 10000);
}, false);
</script>
document.addEventListener('unii:ticket:purchased', function (event) {
setTimeout(function() {
window.location.assign('THANK_YOU_PAGE_URL');
}, 10000);
}, false);
</script>
Note: Replace 'THANK_YOU_PAGE_URL' with any webpage URL you would like to redirect to.
Note: The '10000' in the code above is the time it will take to redirect people from the Universe booking confirmation screen to your thank you page. You can adjust this to be shorter or longer. This number is in milliseconds so 10000 is 10 seconds, 5000 is 5 seconds, etc.
For more advanced users you can customize the widget callback feature to perform more specific actions.
Events
The following JS events will fire on a page where embed.js is included with our widget:
unii:closed
Dispatched to document when the pop-over widget is closed. Does not assume anything about the state of the pop-over, or the user's transaction.
unii:ticket:purchased
Dispatched to document immediately once transaction is successful. Does not assume that the window has been closed.
unii:opened
Dispatched to document when the pop-over widget is opened. This event will re-trigger in the event that the pop-over is closed and re-opened.
Dispatched to document when the pop-over widget is closed. Does not assume anything about the state of the pop-over, or the user's transaction.
unii:ticket:purchased
Dispatched to document immediately once transaction is successful. Does not assume that the window has been closed.
unii:opened
Dispatched to document when the pop-over widget is opened. This event will re-trigger in the event that the pop-over is closed and re-opened.
Tip: These events can be listened to. For example:
document.addEventListener('unii:closed', function (event) { console.log('Window was closed'); }, false);
document.addEventListener('unii:ticket:purchased', function (event) {
console.log('Ticket was purchased');
}, false);
If using jQuery, the following would work in versions >= 1.7:
$(document).on('unii:closed', function(event) {
console.log('Window was closed');
});
To go even deeper, advanced users can customize their widget callbacks by including additional information after the ticket is purchased and pop-over window is closed to gather more data.
Event Details
unii:ticket:purchased is a special case where we provide additional information. The event argument has a detail property which contains the following data:
$(document).on('unii:ticket:purchased', function(event) {
console.log(event.detail);
});
The event.detail object has the following structure:
$(document).on('unii:ticket:purchased', function(event) {
console.log(event.detail);
});
The event.detail object has the following structure:
{
"commission": Number,
"credits_applied": Number,
"discount": Number,
"fee": Number,
"fulfillment": Number,
"subtotal": Number,
"payment": Number,
"price": Number,
"ticket_id": String,
"cost_items": [
{
"id": String,
"commission": Number,
"currency": Number,
"discount": Number,
"description": String,
"fee": Number,
"price": Number,
"rate_id": String
}
]
}
Note: This allows you to hook up custom analytics reporting regarding conversions per ticket type, or a custom receipt page, etc...
Examples
If you'd like to call a function once both a ticket has been purchased, and the pop-over has been closed, you could first listen for the ticket purchase event - and then add an event listener for the close event. In this way, you can execute a function only when both have occurred:
document.addEventListener('unii:ticket:purchased', function (event) {
document.addEventListener('unii:closed', function (event) {
console.log("Ticket was purchased and window was closed")
}, false);
}, false);
}, false);
Another example is tracking ticket purchases through Google Analytics, after setting up a custom metric with a "currency" format you could use the following code to track ticket purchases:
document.addEventListener('unii:ticket:purchased', function(event) {
if (ga) {
ga('send', 'event', 'category', 'action', {
// Replace `metric1` with the ID of the metric you created to track ticket purchases
'metric1': event.detail.fulfillment
});
}
}, false);
if (ga) {
ga('send', 'event', 'category', 'action', {
// Replace `metric1` with the ID of the metric you created to track ticket purchases
'metric1': event.detail.fulfillment
});
}
}, false);