Eventbrite embedded checkout - why are GA events and Ecommerce data not showing?

Question

I'm using embedded checkout for Eventbrite. This is a modal window with the checkout iframed into my site and it works perfectly fine for its checkout purpose. But no GA events nor ecommerce data are recorded. I can't see the Universal Analytics tag fire through the iframe, even though for the same event it fires and goals / data are recorded if the transaction happens for the same event on eventbrite.com. I can however see the Google Ads conversion tag fire (set in Eventbrite settings) on a successful embedded checkout. I've not started on the cross-domain instructions yet given I can't get this to work.

The basic embed code I'm using is:

<!-- Noscript content for added SEO -->
<noscript><a href="https://www.eventbrite.com/e/my-event-name-12345678" rel="noopener noreferrer" target="_blank"></noscript>
<!-- You can customize this button any way you like -->
<button id="eventbrite-widget-modal-trigger-12345678" type="button">Buy Tickets</button>
<noscript></a>Buy Tickets on Eventbrite</noscript>

<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: '12345678',
    modal: true,
    modalTriggerElementId: 'eventbrite-widget-modal-trigger-12345678',
    onOrderComplete: exampleCallback
});

Google Analytics events are supposed to fire as soon as the button is clicked and if tickets are selected, but nothing comes through. Either something is wrong Eventbrite's side - but their help doesn't think so or there's something weird with GA and the iframe.

I'm at a loss to find any documentation that helps.

Any pointers of where to look would be of great assistance.

score 0 · Answer 1 · answered Nov 09 '20 at 12:39

You need to add some extra code to the embed so that it sends the data to Google Analytics. Last year I had the following code which worked nicely:

<div id="eventbrite-widget-container-**EB-EVENT-ID**"></div>

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

<script type="text/javascript">
<!-- GA code -->
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', '**UA-XXXXXXX-1**', 'auto');
    ga('send', 'pageview');

<!-- EB code -->
    var exampleCallback = function() {
        console.log('Order complete!');
    };

<!-- Get the clientId from GA and then pass it into the createWidget call using the optional googleAnalyticsClientId parameter --> 
    ga(function(tracker){
        var clientId = tracker.get('clientId');
        window.EBWidgets.createWidget({
            // Required
            widgetType: 'checkout',
            eventId: '**EB-EVENT-ID**',
            googleAnalyticsClientId: clientId,
            iframeContainerId: 'eventbrite-widget-container-**EB-EVENT-ID**',
            // Optional
            iframeContainerHeight: 800,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
            onOrderComplete: exampleCallback  // Method called when an order has successfully completed
        });
    })
</script>

However I'm now having problems with it where only a handful of user's events are being recorded in GA hence how I found your question... Currently investigating why that may be but it would be interesting to see if my code work for you.

thanks - this doesn't fire any events that I can see and throws an error in Tag Assistant for the proper being tracked twice. — nycrefugee, Nov 13 '20 at 14:38

claebro · Answer 2 · 2022-08-13T13:16:21.260

I did this for GA4 and it works perfect. It will report this event as a conversion in your GA4 dashboard. I'm still trying to figure out how to pull the order value in dynamically and not set to a static value but that's for another day.

<script type="text/javascript">
var exampleCallback = function() {
    console.log('Order complete!'); 
    gtag('event','purchase', {currency: "USD", value: 20.00});
};

window.EBWidgets.createWidget({
    widgetType: 'checkout',
    eventId: '<?php echo $eventId; ?>',
    modal: true,
    modalTriggerElementId: 'eventbrite-widget-modal-trigger-<?php echo $eventId; ?>', 
    onOrderComplete: exampleCallback
});

I'm defining the event id via php echo

$eventId = 'xxxxxxxxxxx';

Eventbrite embedded checkout - why are GA events and Ecommerce data not showing?

2 Answers2