Custom Thank You Page for Eventbrite Embedded Checkout

• Contents
  • Why a Thank You Page?
  • Eventbrite’s Embedded Checkout
  • The Solution

Why a Thank You Page?

Thank you pages are underrated. A lot of modern forms show a simple confirmation message without reloading the page but, in doing so, completely miss the main benefits a thank you page brings.

Sure, a thank you page requires an additional page load but if someone has taken the time to complete your lead capture form then what's an extra half-second? ⏱️

These are just some of the benefits a custom thank you page can bring:

• Reinforce your primary message and value proposition. Instead of a quick "thank you" message that pops-up, a thank you page gives you more room to reassure prospects they are making a good decision.

• Provide an opportunity for a second conversion. Obviously, we don't recommend you ask for someone's details all over again but a thank you page could be an opportunity for a prospect to download additional resources, share content via social media or schedule a time to talk with you.

• Simplified tracking. There's nothing easier to track than a destination landing page. In Google Analytics it's one of the easiest goals you can create and because only one goal will get recorded per session it's fairly robust in filtering out duplicate submissions. In contrast, forms that show a confirmation message are typically more complex to track and require some form of customised event tracking.

Eventbrite's Embedded Checkout

Embedded checkout is one of the newer Eventbrite integrations and allows customers to select and purchase tickets to your event, via Eventbrite, without ever leaving your website.

While you can get by with the standard installation you'll not only miss out on the benefits of a bespoke thank you page, you'll also have some tracking differences to consider.

• The standard Eventbrite Google Analytics tracking integration gives you the option to track All Events or Individual Events. If you track All Events, however, be aware that you won't be able to distinguish which Eventbrite form led to a successful submission, assuming you have multiple forms.

• You'll also be tracking all visitors to the event page both on Eventbrite directly and anywhere the event has been embedded on your website. You may want this but we recommend using a separate Google Analytics property to avoid adding noise to your existing website tracking.

The Solution

Our goal is to keep all of the utility of being able to embed an Eventbrite checkout directly on your website but enhance it with a custom thank you page and simplified Google Analytics tracking.

To implement Eventbrite's embedded checkout you'll be given some code that looks like this:

<div id="example-widget-trigger"></div>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
  var exampleCallback = function() {
    console.log("Order complete!");
  };

  window.EBWidgets.createWidget({
    widgetType: "checkout",
    eventId: "52766401728",
    iframeContainerId: "example-widget-trigger",
    iframeContainerHeight: 425,
    onOrderComplete: exampleCallback
  });
</script>

We just need to add one line to the exampleCallback function. This line of JavaScript will wait for half a second and then redirect the customer to our thank you page (or any page we specify) in the same window.

setTimeout(function() {window.open("https://example.com/thank-you/","_self")}, 500);

All together now, with some extra comments:

<div id="example-widget-trigger"></div>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
  var exampleCallback = function() {
    console.log("Order complete!");
    // Update the thank you page URL with your own custom thank you page URL
    setTimeout(function() {window.open("https://example.com/thank-you/","_self")}, 500);
  };

  // Update the eventId with your own Eventbrite event id
  window.EBWidgets.createWidget({
    widgetType: "checkout",
    eventId: "52766401728",
    iframeContainerId: "example-widget-trigger",
    iframeContainerHeight: 425,
    onOrderComplete: exampleCallback
  });
</script>

Copy and paste this code into the relevant page on your website and you're good to go. Make sure to update the eventId and thank you page URL with your own details.

If you want to track successful form submissions in Google Analytics, you'll also want to create a destination goal using your custom thank you page URL.