@bigz-app/booking-widget 1.3.1 → 1.3.2

package/dist/booking-widget.js

@@ -12134,121 +12134,145 @@
   }
 
   /**
-   * 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();
@@ -12297,20 +12321,16 @@
                       });
                       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,
                           });
                       }
                   }
@@ -15575,6 +15595,13 @@
       const [shouldRenderInstanceSelection, setShouldRenderInstanceSelection] = d$1(false);
       const [shouldRenderUpsells, setShouldRenderUpsells] = d$1(false);
       const [shouldRenderBookingForm, setShouldRenderBookingForm] = d$1(false);
+      // Google Ads config (received from API, set once from the first API response)
+      const [googleAdsConfig, setGoogleAdsConfig] = d$1(null);
+      const extractGoogleAdsConfig = (data) => {
+          if (!googleAdsConfig && data?.googleAdsConfig?.tagId) {
+              setGoogleAdsConfig(data.googleAdsConfig);
+          }
+      };
       // Promo dialog state
       const [showPromoDialog, setShowPromoDialog] = d$1(false);
       const [widgetContainerRef, setWidgetContainerRef] = d$1(null);
@@ -15658,6 +15685,7 @@
                       image: resolvedImage,
                   };
                   setVoucherConfig(mergedConfig);
+                  extractGoogleAdsConfig(data);
                   setVoucherEventTypes(data.eventTypes || []);
                   // Set system config for payment processing
                   if (data.paymentProvider) {
@@ -15680,6 +15708,14 @@
               setIsLoadingVoucherConfig(false);
           }
       };
+      // Fire widget pageview once when Google Ads config is received from API
+      const pageviewFiredRef = A$2(false);
+      y$1(() => {
+          if (!pageviewFiredRef.current && googleAdsConfig?.tagId) {
+              pageviewFiredRef.current = true;
+              handleGoogleAdsPageview(googleAdsConfig.tagId);
+          }
+      }, [googleAdsConfig]);
       // Determine initial step and load data
       y$1(() => {
           const initializeWidget = async () => {
@@ -15893,6 +15929,7 @@
                   onWidgetLanguage?.(wl);
                   onTimezone?.(wl.timezone);
               }
+              extractGoogleAdsConfig(data);
               setEventTypes(data.eventTypes);
               if (isSingleEventTypeMode && data.eventTypes.length === 1) {
                   setSelectedEventType(data.eventTypes[0]);
@@ -15929,6 +15966,7 @@
                   onWidgetLanguage?.(wl);
                   onTimezone?.(wl.timezone);
               }
+              extractGoogleAdsConfig(data);
               setUpcomingEvents(data.upcomingEvents || []);
           }
           else {
@@ -15964,6 +16002,7 @@
                       onWidgetLanguage?.(wl);
                       onTimezone?.(wl.timezone);
                   }
+                  extractGoogleAdsConfig(data);
                   setSpecials(data.specials || []);
               }
               else {
@@ -15990,6 +16029,7 @@
                   onWidgetLanguage?.(wl);
                   onTimezone?.(wl.timezone);
               }
+              extractGoogleAdsConfig(data);
               setEventInstances(data.eventInstances);
               if (data.paymentProvider) {
                   setSystemConfig({
@@ -16050,6 +16090,7 @@
                       onWidgetLanguage?.(wl);
                       onTimezone?.(wl.timezone);
                   }
+                  extractGoogleAdsConfig(data);
                   setEventDetails(data.eventDetails);
                   setSystemConfig({
                       paymentProvider: data.paymentProvider,
@@ -16119,6 +16160,7 @@
                       onWidgetLanguage?.(wl);
                       onTimezone?.(wl.timezone);
                   }
+                  extractGoogleAdsConfig(data);
                   return data.upsells || [];
               }
               else {
@@ -16532,7 +16574,7 @@
                                   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 && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "specials" && showingPreview) {
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [u$2(SpecialsView, { specials: specials, onEventSelect: handleUpcomingEventSelect, isLoading: isLoadingSpecials, showSavingsAmount: config.specialsSettings?.showSavingsAmount ?? true, showSavingsPercent: config.specialsSettings?.showSavingsPercent ?? false, emptyStateText: config.specialsSettings?.emptyStateText }), shouldRenderBookingForm && eventDetails && (u$2(BookingForm, { config: config, eventDetails: eventDetails, stripePromise: stripePromise, onSuccess: handleBookingSuccess, onError: handleBookingError, onBackToEventInstances: () => {
@@ -16557,7 +16599,7 @@
                                   setShouldRenderBookingForm(false);
                                   setSelectedUpsells([]);
                                   setUpsells([]);
-                              }, config: config, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "next-events" && !showingPreview && currentStep === "eventInstances") {
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, children: [shouldRenderInstanceSelection && (u$2(EventInstanceSelection, { eventInstances: eventInstances, selectedEventType: selectedEventType, onEventInstanceSelect: handleEventInstanceSelect, onBackToEventTypes: () => {
@@ -16580,7 +16622,7 @@
                                   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 && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       if (viewMode === "button" && (isSingleEventTypeMode || isDirectInstanceMode)) {
           return (u$2(StyleProvider, { config: config, children: [u$2("div", { ref: setWidgetContainerRef, style: {
@@ -16626,7 +16668,7 @@
                                   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 && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
+                              }, config: config, googleAdsConfig: googleAdsConfig, onError: setError, paymentIntentId: successPaymentId })] }), showPromoDialog && config.promo && (u$2(PromoDialog, { config: config.promo, onClose: handlePromoDialogClose, onCtaClick: handlePromoCtaClick }))] }));
       }
       // Cards mode (default) - show event type selection with optional voucher card
       const cardsView = (u$2(k$3, { children: [hasEventSelection && (u$2(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 && (u$2(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 && (u$2("div", { style: { padding: "24px", textAlign: "center" }, children: u$2("div", { style: {
@@ -16682,7 +16724,7 @@
                               url.searchParams.delete("mollie_payment_id");
                               url.searchParams.delete("mollie_status");
                               window.history.replaceState({}, "", url.toString());
-                          }, config: config, onError: setError, paymentIntentId: successPaymentId }), u$2(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 }), u$2(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);