@bigz-app/booking-widget 1.3.1 → 1.3.2

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") {
-        return;
-    }
-    // Skip if gtag already exists
-    if (isGtagAvailable()) {
+    if (typeof window === "undefined" || 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,
                         });
                     }
                 }
@@ -15449,6 +15469,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 +15559,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 +15582,14 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
             setIsLoadingVoucherConfig(false);
         }
     };
+    // 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 () => {
@@ -15767,6 +15803,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 onWidgetLanguage?.(wl);
                 onTimezone?.(wl.timezone);
             }
+            extractGoogleAdsConfig(data);
             setEventTypes(data.eventTypes);
             if (isSingleEventTypeMode && data.eventTypes.length === 1) {
                 setSelectedEventType(data.eventTypes[0]);
@@ -15803,6 +15840,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 onWidgetLanguage?.(wl);
                 onTimezone?.(wl.timezone);
             }
+            extractGoogleAdsConfig(data);
             setUpcomingEvents(data.upcomingEvents || []);
         }
         else {
@@ -15838,6 +15876,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     onWidgetLanguage?.(wl);
                     onTimezone?.(wl.timezone);
                 }
+                extractGoogleAdsConfig(data);
                 setSpecials(data.specials || []);
             }
             else {
@@ -15864,6 +15903,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                 onWidgetLanguage?.(wl);
                 onTimezone?.(wl.timezone);
             }
+            extractGoogleAdsConfig(data);
             setEventInstances(data.eventInstances);
             if (data.paymentProvider) {
                 setSystemConfig({
@@ -15924,6 +15964,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     onWidgetLanguage?.(wl);
                     onTimezone?.(wl.timezone);
                 }
+                extractGoogleAdsConfig(data);
                 setEventDetails(data.eventDetails);
                 setSystemConfig({
                     paymentProvider: data.paymentProvider,
@@ -15993,6 +16034,7 @@ function UniversalBookingWidgetInner({ config: baseConfig, onWidgetLanguage, onT
                     onWidgetLanguage?.(wl);
                     onTimezone?.(wl.timezone);
                 }
+                extractGoogleAdsConfig(data);
                 return data.upsells || [];
             }
             else {
@@ -16406,7 +16448,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 +16473,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 +16496,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 +16542,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 +16598,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);