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:

Ticketing Triggers available

1. Suggested Method

Step 1: 👉 How to pass each successful purchase to Google Analytics
Step 2: 👉 Identifying from which widget the data comes from2.

2. Alternative Method

Alternative method (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.)

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-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.
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.