Brella's ticketing widget comes with a comprehensive tracking trigger system, which allows you to send all collected data to a data warehouse or analytics/ ad platform of your choice.
Note: This requires some technical knowledge to implement. Our tracking is not specific to a particular service like Google Analytics but works with almost any tool. Basically, we expose the data, you can transform and send it to any service.
What is a Ticketing trigger, and what are the three types of triggers?
Our ticketing widget supports capturing data and sending them to a data warehouse/ analytics tool/ CRM of your choice. The widget comes with a trigger system, which can expose specific data entered by the user at various action points (eg: Purchase modal opened, "Buy tickets" button clicked, purchase completed).
We offer 3 triggers in total:
ticket:opened : When the ticket modal is opened
ticket:formSubmitted : When the "Buy tickets" button is pressed after filling in the form, but before the person goes to Stripe
ticket:purchased : When the purchase is completed in Stripe
💡 If you use a custom page URL instead of the default "Thank you" modal that appears on ticket purchase, you will have to set up a Google Analytics/tracking implementation on the redirected page to capture data there (as the ticket-purchased trigger won't work); your mileage will vary in this case. This is not something the widget can support natively at present.
👉 A simple example with Google Analytics:
The following would pass each successful purchase to Google Analytics and replace the event_label with the purchaserId.
This implementation treats the widget as part of your own website, so you can get the regular event properties like UTM_source, referrer, etc. as you normally would:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-IDHERE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-IDHERE', { 'debug_mode': true });
</script>
<script>
function sendGAEvent(eventCategory, eventAction, eventLabel) {
// Send GA4 custom event with purchaseId as event_label
gtag('event', 'custom_event', {
'event_category': eventCategory,
'event_action': eventAction,
'event_label': eventLabel
});
}
// Event listener for ticket purchased
document.querySelector('.vip-tickets').addEventListener("ticket:purchased", (e) => {
console.log('Ticket purchased event triggered. vip');
const purchaserId = e.detail.purchaserId;
sendGAEvent('Ticketing', 'TicketPurchased', purchaserId);
});
</script>
What's happening here:
Set up Google Tag Manager on your website
Custom Event Tracking Script: This script captures and sends custom events to Google Analytics when a ticket is purchased. It should be placed after the elements it references are loaded on the page. If the
.vip-ticketselement exists in the initial page load, you can place this script in the<head>section as well. Otherwise, it's best to place it just before the closing</body>tag.Make sure to replace
'.vip-tickets'with the appropriate selector for the element that triggers theticket:purchasedevent on your website.Note: It's important that the custom event tracking script executes after the necessary elements are available on the page.
👉 Identifying from which widget the data comes from
Assume that a few instances of our ticketing widget (each with different tickets shown and other customizations) are inserted into a page on your website with the following widget embed code.
Note that we have added specific classes to each widget on the page, such as class="vip-tickets" to help with identifying which widget the data comes from:
<!-- Inject Brella Widget Here -->
<div id="brella-widget" class="vip-tickets">
<script type="text/props">
{
"joinCode": "testeventt",
"widgetType": "ticketing"
"ticketsToShow": [56]
}
</script>
</div>
<div id="brella-widget" class="basic-tickets">
<script type="text/props">
{
"joinCode": "testevent",
"widgetType": "ticketing"
"ticketsToShow": [80]
}
</script>
</div>
<script async src="[[BrellaWidgetScriptURL]]"></script>
<!-- Inject Brella Widget Here End -->
You could then use the following code to write specific data to the console, or in a real-world use-case, alter this example code to pass specific data from the e.datail object over to your data warehouse, CRM, or analytics tool. The e.detail object returned contains a variety of information about the purchaser and questions and answers for each ticket.
<script>
document.querySelector('.vip-tickets').addEventListener("ticket:opened", (e) => {
console.log(e.detail, 'vip-tickets:opened')
})
document.querySelector('.vip-tickets').addEventListener("ticket:purchased", (e) => {
console.log(e.detail, 'vip-tickets:purchased')
})
document.querySelector('.vip-tickets').addEventListener("ticket:formSubmitted", (e) => {
console.log(e.detail, 'vip-tickets:formSubmitted')
})
document.querySelector('.basic-tickets').addEventListener("ticket:opened", (e) => {
console.log(e.detail, 'basic-tickets:opened')
})
document.querySelector('.basic-tickets').addEventListener("ticket:purchased", (e) => {
console.log(e.detail, 'vip-tickets:purchased')
})
document.querySelector('.basic-tickets').addEventListener("ticket:formSubmitted", (e) => {
console.log(e.detail, 'basic-tickets:formSubmitted')
})
</script>
Alternative method:
Note: For accuracy and to collect data prior to the completion of a purchase, we recommend using method 01 (above). This alternative method can only track button clicks.
Our ticketing widget takes the form of a clickable button that opens a modal to enable the ticket purchase flow. Upon completing the purchase, a confirmation page will appear within the modal, and we will affix a parameter containing a unique ID and an identifier to your webpage’s URL. This parameter will be automatically removed when the modal is closed.
The ticketing widget behaves like a regular button for tracking purposes. This means that it can be tracked with tracking pixels from your martech / analytics provider and also using Google Analytics.
Some things to keep in mind when tracking with Google Analytics:
No additional configuration is required from your Brella Admin Panel.
Make sure that Google Analytics / a Google Tag that can inject Google Analytics code is loaded on the page that contains the ticketing widget.
For best results, enable enhanced tracking and set up conversion goals/events to track “button clicks”.
We have also added differentiating CSS classes to each button in order to make it easier to identify which button is in which step:
brella-get-tickets -> open the modal
ticketing-footer-checkout -> proceed to stripe checkout
ticketing-footer-proceed -> proceed from ticket selection to the registration form in the modal
This parameter will be added to your website’s URL (eg: www.yoursite.com/??status=succeeded&ticket_purchase_id=c17ed20f-dd38-4b5f-8138-e39a08e66223).To better track the conversion journey, the final step of the purchase process contains a specific parameter with a common keyword and a unique ID to make it easier to identify completed purchases in your analytics software.
The parameter will be automatically removed from the URL after the purchaser closes the purchase modal.