@bigz-app/booking-widget 1.3.1 → 1.3.3

package/dist/index.esm.js

@@ -12008,121 +12008,145 @@ function BookingForm({ config, eventDetails, stripePromise, onSuccess, onError,
 }
 
 /**
- * Google Ads Conversion Tracking Utility
+ * Google Ads Tracking Utility
  *
- * Simplified utility that waits 1500ms, checks/initializes gtag, and sends conversion.
- */
-/**
- * Check if gtag is available in current or parent window
+ * Handles pageview tracking (widget load) and conversion tracking (successful booking).
+ * Supports both direct gtag.js and GTM dataLayer setups.
  */
 function isGtagAvailable() {
-    if (typeof window === "undefined") {
+    if (typeof window === "undefined")
         return false;
-    }
-    // Check current window
-    if (typeof window.gtag === "function") {
+    if (typeof window.gtag === "function")
         return true;
-    }
-    // Check parent window (for iframe/widget scenarios)
     if (window !== window.parent) {
         try {
-            if (typeof window.parent?.gtag === "function") {
+            if (typeof window.parent?.gtag === "function")
                 return true;
-            }
         }
         catch {
-            // Cannot access parent window (cross-origin)
+            // Cross-origin
         }
     }
     return false;
 }
-/**
- * Initialize gtag if not already available
- */
 function initializeGtag(tagId) {
-    if (typeof window === "undefined") {
+    if (typeof window === "undefined" || isGtagAvailable())
         return;
-    }
-    // Skip if gtag already exists
-    if (isGtagAvailable()) {
-        return;
-    }
-    // Initialize dataLayer and gtag function
     window.dataLayer = window.dataLayer || [];
     window.gtag = (...args) => {
         window.dataLayer.push(args);
     };
-    // Set current timestamp
     window.gtag("js", new Date());
-    // Load gtag script
     const script = document.createElement("script");
     script.async = true;
     script.src = `https://www.googletagmanager.com/gtag/js?id=${tagId}`;
     document.head.appendChild(script);
-    // Configure the tag
     window.gtag("config", tagId, {
         anonymize_ip: true,
         allow_google_signals: false,
         allow_ad_personalization_signals: false,
     });
 }
-/**
- * Send conversion event using available gtag
- */
-function sendConversion(config) {
-    if (typeof window === "undefined") {
-        return;
+function getGtag() {
+    if (typeof window === "undefined")
+        return null;
+    if (typeof window.gtag === "function") {
+        return window.gtag;
     }
-    let gtag = window.gtag;
-    // Try parent window gtag if current window doesn't have it
-    if (typeof gtag !== "function" && window !== window.parent) {
+    if (window !== window.parent) {
         try {
-            gtag = window.parent?.gtag;
+            const parentGtag = window.parent?.gtag;
+            if (typeof parentGtag === "function")
+                return parentGtag;
         }
         catch {
-            // Cannot access parent window (cross-origin)
+            // Cross-origin
         }
     }
-    if (typeof gtag !== "function") {
+    return null;
+}
+/**
+ * Push an event to the dataLayer for GTM visibility,
+ * then also fire via gtag for direct Google Ads tracking.
+ */
+function sendEvent(eventName, params) {
+    if (typeof window === "undefined")
         return;
+    // GTM dataLayer push (object format — visible in Tag Assistant)
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+        event: eventName,
+        ...params,
+    });
+    // gtag call (array format — processed by gtag.js for Google Ads)
+    const gtag = getGtag();
+    if (gtag) {
+        gtag("event", eventName, params);
     }
-    // Build conversion data
-    const conversionData = {
+}
+function sendConversion(config) {
+    const params = {
         send_to: `${config.tagId}/${config.conversionId}`,
     };
-    // Add optional parameters
     if (config.conversionValue !== undefined) {
-        conversionData.value = config.conversionValue;
+        params.value = config.conversionValue;
     }
     if (config.conversionCurrency) {
-        conversionData.currency = config.conversionCurrency;
+        params.currency = config.conversionCurrency;
     }
     if (config.transactionId) {
-        conversionData.transaction_id = config.transactionId;
+        params.transaction_id = config.transactionId;
     }
-    // Send conversion event
-    gtag("event", "conversion", conversionData);
+    sendEvent("conversion", params);
 }
 /**
- * Main function to handle Google Ads conversion tracking
- * Waits 1500ms, checks/initializes gtag, then sends conversion
+ * Track widget pageview (fired once on widget mount).
  */
-function handleGoogleAdsConversion(config) {
-    // Validate required config
-    if (!config.tagId || !config.conversionId) {
+function handleGoogleAdsPageview(tagId, consent) {
+    if (!tagId || false || typeof window === "undefined")
         return;
+    if (!isGtagAvailable()) {
+        initializeGtag(tagId);
     }
-    // Wait 1500ms before proceeding
+    const fire = () => sendEvent("widget_pageview", {
+        send_to: tagId,
+        page_location: window.location.href,
+        page_title: document.title,
+    });
+    if (isGtagAvailable()) {
+        fire();
+        return;
+    }
+    const script = document.querySelector(`script[src*="googletagmanager.com/gtag/js?id=${tagId}"]`);
+    if (script) {
+        script.addEventListener("load", fire, { once: true });
+    }
+}
+/**
+ * Handle Google Ads conversion tracking.
+ * Waits 1500ms for the success page to settle, then fires.
+ */
+function handleGoogleAdsConversion(config) {
+    if (!config.tagId || !config.conversionId)
+        return;
     setTimeout(() => {
-        // Check if gtag is available, initialize if not
-        if (!isGtagAvailable()) {
-            initializeGtag(config.tagId);
+        if (isGtagAvailable()) {
+            sendConversion(config);
+            return;
+        }
+        initializeGtag(config.tagId);
+        const script = document.querySelector(`script[src*="googletagmanager.com/gtag/js?id=${config.tagId}"]`);
+        if (script) {
+            script.addEventListener("load", () => sendConversion(config));
+            script.addEventListener("error", () => sendConversion(config));
+        }
+        else {
+            sendConversion(config);
         }
-        sendConversion(config);
     }, 1500);
 }
 
-const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
+const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, googleAdsConfig: googleAdsConfigProp, }) => {
     const t = useTranslations();
     const { locale } = useLocale();
     const timezone = useTimezone();
@@ -12171,20 +12195,16 @@ const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId
                     });
                     setPaymentStatus(data.stripePaymentIntent?.status || data.order.status);
                     const finalPaymentStatus = data.stripePaymentIntent?.status || data.order.status;
+                    const adsConfig = googleAdsConfigProp ?? data.googleAdsConfig;
                     if (finalPaymentStatus === "succeeded" &&
-                        config.googleAds?.tagId &&
-                        config.googleAds?.conversionId &&
-                        config.googleAds?.consent !== false) {
-                        // Prepare conversion tracking data
-                        const conversionValue = data.order.total / 100;
-                        const transactionId = data.order.id;
-                        // Track the conversion
+                        adsConfig?.tagId &&
+                        adsConfig?.conversionId) {
                         handleGoogleAdsConversion({
-                            tagId: config.googleAds.tagId,
-                            conversionId: config.googleAds.conversionId,
-                            conversionValue,
-                            conversionCurrency: config.googleAds.conversionCurrency || "EUR",
-                            transactionId,
+                            tagId: adsConfig.tagId,
+                            conversionId: adsConfig.conversionId,
+                            conversionValue: data.order.total / 100,
+                            conversionCurrency: adsConfig.conversionCurrency || "EUR",
+                            transactionId: data.order.id,
                         });
                     }
                 }
@@ -15370,6 +15390,88 @@ function UpsellsStep({ upsells, selectedUpsells, participantCount, isLoading, is
     return (jsx(Sidebar, { isOpen: isOpen, onClose: onClose, title: t("upsells.title"), footer: footerContent, children: jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", padding: "16px 16px" }, children: [isLoading && (jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", padding: "40px 20px", ...textStyles.muted }, children: [spinner(), jsx("span", { children: t("upsells.loading") })] })), !isLoading && upsells.length === 0 && (jsx("div", { style: { textAlign: "center", padding: "40px 20px", ...textStyles.muted }, children: jsx("p", { children: t("upsells.noExtras") }) })), !isLoading && upsells.length > 0 && (jsx("div", { style: { display: "flex", flexDirection: "column", gap: "12px", flex: 1, overflowY: "auto", paddingBottom: "16px" }, children: upsells.map((upsell) => (jsx(UpsellCard, { upsell: upsell, isSelected: isSelected(upsell.id), participantCount: participantCount, onSelect: () => selectUpsell(upsell.id) }, upsell.id))) })), selectedCount > 0 && (jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "16px", paddingBottom: "16px", paddingTop: "16px", borderTop: "1px solid var(--bw-border-color)", fontSize: "14px" }, children: [jsx("span", { style: textStyles.muted, children: selectedCount === 1 ? t("upsells.selected", { count: selectedCount }) : t("upsells.selectedPlural", { count: selectedCount }) }), jsxs("span", { style: { fontWeight: 600, color: "var(--bw-highlight-color)", fontFamily: "var(--bw-font-family)" }, children: ["+", formatCurrency(selectedTotal)] })] }))] }) }));
 }
 
+/**
+ * Widget analytics — server-side PostHog tracking via batched sendBeacon.
+ *
+ * Events are buffered locally and flushed every few seconds (or on page
+ * unload) as a single POST to `/api/booking/track`.  This avoids extra
+ * network requests on every click while still capturing a complete funnel.
+ */
+let buffer = [];
+let flushTimer = null;
+let currentApiBaseUrl = "";
+let currentOrganizationId = "";
+const FLUSH_INTERVAL_MS = 3000;
+function flush() {
+    if (buffer.length === 0)
+        return;
+    const payload = JSON.stringify({
+        organizationId: currentOrganizationId,
+        events: buffer,
+    });
+    buffer = [];
+    const url = getApiUrl(currentApiBaseUrl, "/booking/track");
+    // Use fetch with keepalive as primary — works cross-origin with CORS.
+    // sendBeacon silently fails cross-origin with application/json because
+    // it can't do CORS preflight, so we only use it as a text/plain fallback
+    // on page unload when fetch may be aborted.
+    try {
+        void fetch(url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: payload,
+            keepalive: true,
+        });
+    }
+    catch {
+        // fetch failed (e.g. during page unload) — try sendBeacon with text/plain
+        if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+            const blob = new Blob([payload], { type: "text/plain" });
+            navigator.sendBeacon(url, blob);
+        }
+    }
+}
+function scheduleFlush() {
+    if (flushTimer)
+        return;
+    flushTimer = setTimeout(() => {
+        flushTimer = null;
+        flush();
+    }, FLUSH_INTERVAL_MS);
+}
+/**
+ * Initialise the analytics module. Must be called once before `trackEvent`.
+ */
+function initAnalytics(apiBaseUrl, organizationId) {
+    currentApiBaseUrl = apiBaseUrl;
+    currentOrganizationId = organizationId;
+    if (typeof window !== "undefined") {
+        window.addEventListener("pagehide", flush);
+        window.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === "hidden")
+                flush();
+        });
+    }
+}
+/**
+ * Queue a widget event. Non-blocking, fire-and-forget.
+ */
+function trackEvent(event, properties = {}) {
+    if (typeof window === "undefined")
+        return;
+    if (!currentOrganizationId)
+        return;
+    buffer.push({
+        event,
+        properties,
+        domain: window.location.hostname,
+        url: window.location.href,
+        referrer: document.referrer,
+        timestamp: new Date().toISOString(),
+    });
+    scheduleFlush();
+}
+
 // Main widget component
 function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onTimezone, }) {
     const t = useTranslations();
@@ -15449,6 +15551,13 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = useState(false);
     const [shouldRenderUpsells, setShouldRenderUpsells] = useState(false);
     const [shouldRenderBookingForm, setShouldRenderBookingForm] = useState(false);
+    // Google Ads config (received from API, set once from the first API response)
+    const [googleAdsConfig, setGoogleAdsConfig] = useState(null);
+    const extractGoogleAdsConfig = (data) => {
+        if (!googleAdsConfig && data?.googleAdsConfig?.tagId) {
+            setGoogleAdsConfig(data.googleAdsConfig);
+        }
+    };
     // Promo dialog state
     const [showPromoDialog, setShowPromoDialog] = useState(false);
     const [widgetContainerRef, setWidgetContainerRef] = useState(null);
@@ -15532,6 +15641,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     image: resolvedImage,
                 };
                 setVoucherConfig(mergedConfig);
+                extractGoogleAdsConfig(data);
                 setVoucherEventTypes(data.eventTypes || []);
                 // Set system config for payment processing
                 if (data.paymentProvider) {
@@ -15554,6 +15664,29 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             setIsLoadingVoucherConfig(false);
         }
     };
+    // Initialise analytics once on mount
+    const analyticsInitRef = useRef(false);
+    useEffect(() => {
+        if (!analyticsInitRef.current && config.organizationId) {
+            analyticsInitRef.current = true;
+            initAnalytics(config.apiBaseUrl, config.organizationId);
+            trackEvent("widget_loaded", {
+                viewMode,
+                eventTypeId: config.eventTypeId,
+                categoryId: config.categoryId,
+                eventInstanceId: config.eventInstanceId,
+                isStandaloneVoucherMode,
+            });
+        }
+    }, [config.organizationId, config.apiBaseUrl]);
+    // Fire widget pageview once when Google Ads config is received from API
+    const pageviewFiredRef = useRef(false);
+    useEffect(() => {
+        if (!pageviewFiredRef.current && googleAdsConfig?.tagId) {
+            pageviewFiredRef.current = true;
+            handleGoogleAdsPageview(googleAdsConfig.tagId);
+        }
+    }, [googleAdsConfig]);
     // Determine initial step and load data
     useEffect(() => {
         const initializeWidget = async () => {
@@ -15642,6 +15775,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                         });
                         const voucherData = await voucherResponse.json();
                         if (voucherResponse.ok && voucherData.voucherResult) {
+                            trackEvent("voucher_purchased", { voucherType: voucherData.voucherResult.voucherType, source: "stripe_redirect" });
                             setVoucherPurchaseResult(voucherData.voucherResult);
                             setIsSuccess(true);
                             setSuccessPaymentId(null);
@@ -15651,6 +15785,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     catch {
                         // Fall back to booking success flow if voucher lookup fails.
                     }
+                    trackEvent("booking_completed", { paymentIntentId: stripeReturn.paymentIntent, source: "stripe_redirect" });
                     setVoucherPurchaseResult(null);
                     setSuccessPaymentId(stripeReturn.paymentIntent);
                     setIsSuccess(true);
@@ -15688,6 +15823,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 });
                 const voucherData = await voucherResponse.json();
                 if (voucherResponse.ok && voucherData.voucherResult) {
+                    trackEvent("voucher_purchased", { voucherType: voucherData.voucherResult.voucherType, source: "mollie_redirect" });
                     setVoucherPurchaseResult(voucherData.voucherResult);
                     setIsSuccess(true);
                     setSuccessPaymentId(null);
@@ -15726,6 +15862,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         window[globalFlagKey] = true;
         const timer = setTimeout(() => {
             setShowPromoDialog(true);
+            trackEvent("promo_dialog_shown", { discountCode: config.promo?.discountCode });
         }, 1000);
         return () => clearTimeout(timer);
     }, [config.promo?.enabled, config.promo?.discountCode]);
@@ -15735,6 +15872,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         localStorage.setItem(`bigz-promo-${promoId}-shown`, "true");
     };
     const handlePromoCtaClick = () => {
+        trackEvent("promo_cta_clicked", { discountCode: config.promo?.discountCode });
         setShowPromoDialog(false);
         const promoId = config.promo?.discountCode || "default";
         localStorage.setItem(`bigz-promo-${promoId}-shown`, "true");
@@ -15767,7 +15905,9 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 onWidgetLanguage?.(wl);
                 onTimezone?.(wl.timezone);
             }
+            extractGoogleAdsConfig(data);
             setEventTypes(data.eventTypes);
+            trackEvent("event_types_loaded", { count: data.eventTypes.length });
             if (isSingleEventTypeMode && data.eventTypes.length === 1) {
                 setSelectedEventType(data.eventTypes[0]);
                 await loadEventInstances(data.eventTypes[0].id);
@@ -15803,6 +15943,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 onWidgetLanguage?.(wl);
                 onTimezone?.(wl.timezone);
             }
+            extractGoogleAdsConfig(data);
             setUpcomingEvents(data.upcomingEvents || []);
         }
         else {
@@ -15838,6 +15979,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     onWidgetLanguage?.(wl);
                     onTimezone?.(wl.timezone);
                 }
+                extractGoogleAdsConfig(data);
                 setSpecials(data.specials || []);
             }
             else {
@@ -15864,6 +16006,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 onWidgetLanguage?.(wl);
                 onTimezone?.(wl.timezone);
             }
+            extractGoogleAdsConfig(data);
             setEventInstances(data.eventInstances);
             if (data.paymentProvider) {
                 setSystemConfig({
@@ -15924,6 +16067,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     onWidgetLanguage?.(wl);
                     onTimezone?.(wl.timezone);
                 }
+                extractGoogleAdsConfig(data);
                 setEventDetails(data.eventDetails);
                 setSystemConfig({
                     paymentProvider: data.paymentProvider,
@@ -15993,6 +16137,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     onWidgetLanguage?.(wl);
                     onTimezone?.(wl.timezone);
                 }
+                extractGoogleAdsConfig(data);
                 return data.upsells || [];
             }
             else {
@@ -16018,6 +16163,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     }
     // Event type selection handlers
     const handleEventTypeSelect = async (eventType) => {
+        trackEvent("event_type_selected", { eventTypeId: eventType.id, eventTypeName: eventType.name });
         setSelectedEventType(eventType);
         setCurrentStep("eventInstances");
         setShouldRenderInstanceSelection(true);
@@ -16031,6 +16177,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     };
     // Event instance selection handlers
     const handleEventInstanceSelect = async (eventInstance) => {
+        trackEvent("event_instance_selected", { eventInstanceId: eventInstance.id, eventInstanceName: eventInstance.name });
         setSelectedEventInstance(eventInstance);
         bookingReturnStep.current = "eventInstances";
         // Set default participant count for upsell calculations
@@ -16043,9 +16190,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             try {
                 const availableUpsells = await loadUpsells(selectedEventType.id, eventInstance.id, defaultParticipantCount);
                 if (availableUpsells.length > 0) {
-                    // Show upsells step
+                    trackEvent("upsell_step_viewed", { count: availableUpsells.length });
                     setUpsells(availableUpsells);
-                    // Pre-select default-checked upsells
                     const defaultSelections = availableUpsells
                         .filter((upsell) => upsell.defaultChecked && upsell.available)
                         .map((upsell) => ({
@@ -16055,7 +16201,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     setSelectedUpsells(defaultSelections);
                     setCurrentStep("upsells");
                     setIsLoadingUpsells(false);
-                    return; // Don't proceed to booking yet
+                    return;
                 }
             }
             catch (err) {
@@ -16065,7 +16211,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 setIsLoadingUpsells(false);
             }
         }
-        // No upsells available, go directly to booking
+        trackEvent("booking_form_opened", { fromUpsells: false });
         setCurrentStep("booking");
         setShouldRenderBookingForm(true);
         setIsLoadingEventDetails(true);
@@ -16088,6 +16234,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setEventDetails(null);
     };
     const handleBookingSuccess = (result) => {
+        trackEvent("booking_completed", { paymentIntentId: result.paymentIntent?.id });
         setIsSuccess(true);
         setSuccessPaymentId(result.paymentIntent.id);
         setSidebarOpen(false);
@@ -16103,7 +16250,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setSelectedUpsells(selections);
     };
     const handleUpsellsContinue = async () => {
-        // Move to booking step
+        trackEvent("booking_form_opened", { fromUpsells: true });
         setCurrentStep("booking");
         setShouldRenderBookingForm(true);
         setIsLoadingEventDetails(true);
@@ -16123,8 +16270,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
     };
     // Voucher purchase handlers
     const handleVoucherCardClick = async () => {
+        trackEvent("voucher_card_clicked");
         setPreselectedVoucherEventTypeId(null);
-        // Ensure voucher config and event types are loaded before opening the form
         if (!voucherConfig || voucherEventTypes.length === 0) {
             await loadVoucherConfig();
         }
@@ -16143,6 +16290,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
         setPreselectedVoucherEventTypeId(null);
     };
     const handleVoucherSuccess = (result) => {
+        trackEvent("voucher_purchased", { voucherType: result.voucherType });
         setVoucherPurchaseResult(result);
         setIsVoucherFormOpen(false);
         setIsSuccess(true);
@@ -16225,8 +16373,8 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             try {
                 const availableUpsells = await loadUpsells(eventTypeForUpsells.id, eventInstanceId, defaultParticipantCount);
                 if (availableUpsells.length > 0) {
+                    trackEvent("upsell_step_viewed", { count: availableUpsells.length });
                     setUpsells(availableUpsells);
-                    // Pre-select default-checked upsells
                     const defaultSelections = availableUpsells
                         .filter((upsell) => upsell.defaultChecked && upsell.available)
                         .map((upsell) => ({
@@ -16236,7 +16384,6 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     setSelectedUpsells(defaultSelections);
                     setCurrentStep("upsells");
                     setIsLoadingUpsells(false);
-                    // Load event details in background for when user continues past upsells
                     void loadEventDetails(eventInstanceId);
                     return;
                 }
@@ -16406,7 +16553,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                 url.searchParams.delete("mollie_payment_id");
                                 url.searchParams.delete("mollie_status");
                                 window.history.replaceState({}, "", url.toString());
-                            }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                            }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "specials" && showingPreview) {
         return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [jsx(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), shouldRenderBookingForm && eventDetails && (jsx(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
@@ -16431,7 +16578,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                 setShouldRenderBookingForm(false);
                                 setSelectedUpsells([]);
                                 setUpsells([]);
-                            }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                            }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
         return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (jsx(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
@@ -16454,7 +16601,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                 url.searchParams.delete("mollie_payment_id");
                                 url.searchParams.delete("mollie_status");
                                 window.history.replaceState({}, "", url.toString());
-                            }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                            }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
         return (jsxs(StyleProvider, { config: config, children: [jsxs("div", { ref: setWidgetContainerRef, style: {
@@ -16500,7 +16647,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                                 url.searchParams.delete("mollie_payment_id");
                                 url.searchParams.delete("mollie_status");
                                 window.history.replaceState({}, "", url.toString());
-                            }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                            }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (jsx(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
     }
     // Cards mode (default) - show event type selection with optional voucher card
     const cardsView = (jsxs(Fragment, { children: [hasEventSelection && (jsx(EventTypeSelection, { eventTypes: eventTypes, onEventTypeSelect: handleEventTypeSelect, onInstancePreview: (instanceId, eventTypeId) => void handleUpcomingEventSelect(instanceId, eventTypeId), isLoading: isLoading, skeletonCount: getSkeletonCount(), showVoucherAttachment: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled && !isStandaloneVoucherMode), onVoucherClick: handleVoucherAttachmentClick })), isStandaloneVoucherMode && (jsx(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, systemConfig: systemConfig, isFormOpen: false, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: null, voucherPurchaseResult: null, isSuccess: false, showStandaloneCard: Boolean(voucherConfig?.enabled && voucherCardIntegrationEnabled), onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => { } })), isStandaloneVoucherMode && isLoading && !voucherConfig && (jsx("div", { style: { padding: "24px", textAlign: "center" }, children: jsx("div", { style: {
@@ -16556,7 +16703,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                             url.searchParams.delete("mollie_payment_id");
                             url.searchParams.delete("mollie_status");
                             window.history.replaceState({}, "", url.toString());
-                        }, config: config, onError: setError, paymentIntentId: successPaymentId }), jsx(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, systemConfig: systemConfig, isFormOpen: isVoucherFormOpen, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: preselectedVoucherEventTypeId, voucherPurchaseResult: voucherPurchaseResult, isSuccess: isSuccess, showStandaloneCard: false, onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => {
+                        }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId }), jsx(VoucherIntegration, { config: config, voucherConfig: voucherConfig, eventTypes: voucherEventTypes, systemConfig: systemConfig, isFormOpen: isVoucherFormOpen, isLoadingConfig: isLoadingVoucherConfig, preselectedEventTypeId: preselectedVoucherEventTypeId, voucherPurchaseResult: voucherPurchaseResult, isSuccess: isSuccess, showStandaloneCard: false, onCardClick: handleVoucherCardClick, onFormClose: handleVoucherFormClose, onSuccess: handleVoucherSuccess, onError: handleVoucherError, onSuccessModalClose: () => {
                             setIsSuccess(false);
                             setVoucherPurchaseResult(null);
                             const url = new URL(window.location.href);