πŸ“– Ticketing | Stage 1

Ticketing & Widget: Tracking & sending data to Google Analytics and other services

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.

To be covered:

1. Suggested Method

2. Alternative Method

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:

  1. Set-up Google Tag Manager on your website
  2. 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-tickets element 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.
  3. Make sure to replace '.vip-tickets' with the appropriate selector for the element that triggers the ticket:purchased event 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 which 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.