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

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.

Solution

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';