@bigz-app/booking-widget 0.3.0 → 0.3.2

package/README.md

@@ -10,7 +10,7 @@ pnpm install @bigz-app/booking-widget
 
 ## Quick Start
 
-Import the widget and provide the necessary configuration. The widget handles the entire booking flow, from event selection to payment.
+Import the widget and provide the necessary configuration. The widget handles the entire booking flow, from event selection to payment, with optional Google Ads conversion tracking.
 
 ```tsx
 import { UniversalBookingWidget } from '@bigz-app/booking-widget';
@@ -100,4 +100,30 @@ The widget can be configured dynamically using URL query parameters. These will
 | `instanceId`     | `eventInstanceId`| `?instanceId=123`     |
 | `categoryId`     | `categoryId`     | `?categoryId=1`       |
 | `eventTypeId`    | `eventTypeId`    | `?eventTypeId=5`      |
-| `eventTypeIds`   | `eventTypeIds`   | `?eventTypeIds=1,3,5` |
+| `eventTypeIds`   | `eventTypeIds`   | `?eventTypeIds=1,3,5` |
+
+## Google Ads Conversion Tracking
+
+The widget supports automatic Google Ads conversion tracking when payments are successful. This feature requires Google Consent Mode to be implemented on your website.
+
+```tsx
+const config = {
+  // ... your existing config
+  googleAds: {
+    tagId: 'AW-XXXXXXX',           // Your Google Ads Tag ID (required)
+    conversionId: 'booking_conversion', // Your conversion label (required)
+    conversionCurrency: 'EUR',     // Optional, defaults to 'EUR'
+    includeValue: true             // Optional, defaults to true
+  }
+};
+```
+
+**Key Features:**
+- ✅ Uses Google Consent Mode for proper consent management
+- ✅ Prevents duplicate gtag initialization 
+- ✅ Includes booking value and transaction ID
+- ✅ Automatic error handling and fallbacks
+
+**Required:** You must implement [Google Consent Mode](https://developers.google.com/tag-platform/security/consent) on your website for tracking to work.
+
+For detailed setup instructions, see [Google Ads Tracking Documentation](./docs/google-ads-tracking.md).

package/dist/booking-widget.js

@@ -295,9 +295,9 @@
   const themes = {
       // --- Light Themes ---
       "light-fresh": {
-          highlight: "oklch(0.65 0.2 190)", // accent-strong
-          background: "oklch(0.99 0.005 220)", // neutral-strong (background)
-          surface: "oklch(1 0 0)", // card (pure white)
+          highlight: "#00a8a1", // accent-strong
+          background: "#f8fdfe", // neutral-strong (background)
+          surface: "#ffffff", // card (pure white)
           text: "#0e7490", // Turquoise 800
           border: "#bae6fd", // Blue 200
           success: "#38bdf8", // Blue 400
@@ -9349,6 +9349,64 @@
       const [paymentIntentId, setPaymentIntentId] = d$1(null);
       const [isCreatingPaymentIntent, setIsCreatingPaymentIntent] = d$1(false);
       const [paymentError, setPaymentError] = d$1(null);
+      // LocalStorage persistence (scoped by organization + event) for paymentIntentId only
+      const storageKey = typeof window !== "undefined"
+          ? `bw_pi_${config?.organizationId}_${config?.eventInstanceId || eventDetails?.id}`
+          : "";
+      const PAYMENT_INTENT_TTL = 24 * 60 * 60 * 1000; // 24 hours
+      function loadPersistedPaymentIntent() {
+          if (typeof window === "undefined" || !storageKey)
+              return null;
+          try {
+              const raw = window.localStorage.getItem(storageKey);
+              if (!raw)
+                  return null;
+              const parsed = JSON.parse(raw);
+              if (!parsed?.id || !parsed?.ts)
+                  return null;
+              if (Date.now() - parsed.ts > PAYMENT_INTENT_TTL) {
+                  window.localStorage.removeItem(storageKey);
+                  return null;
+              }
+              return parsed.id;
+          }
+          catch {
+              return null;
+          }
+      }
+      function persistPaymentIntent(id) {
+          if (typeof window === "undefined" || !storageKey || !id)
+              return;
+          try {
+              const payload = { id, ts: Date.now() };
+              window.localStorage.setItem(storageKey, JSON.stringify(payload));
+          }
+          catch { }
+      }
+      function clearPersistedPaymentIntent() {
+          if (typeof window === "undefined" || !storageKey)
+              return;
+          try {
+              window.localStorage.removeItem(storageKey);
+          }
+          catch { }
+      }
+      // On mount (and when scope changes), restore persisted paymentIntentId
+      y$1(() => {
+          if (!paymentIntentId) {
+              const restored = loadPersistedPaymentIntent();
+              if (restored) {
+                  setPaymentIntentId(restored);
+              }
+          }
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [storageKey]);
+      // Persist whenever paymentIntentId changes
+      y$1(() => {
+          if (paymentIntentId) {
+              persistPaymentIntent(paymentIntentId);
+          }
+      }, [paymentIntentId]);
       // Create payment intent when component mounts or when relevant data changes
       y$1(() => {
           const createPaymentIntent = async () => {
@@ -9478,7 +9536,13 @@
               clientSecret,
               appearance: stripeAppearance || { theme: "stripe" },
               locale: config.locale || "de",
-          }, children: u$2(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: onSuccess, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
+          }, children: u$2(PaymentFormInner, { config: config, eventDetails: eventDetails, formData: formData, totalAmount: totalAmount, discountCode: discountCode, onSuccess: (result) => {
+                  // Clear persisted PI data on successful payment
+                  clearPersistedPaymentIntent();
+                  setPaymentIntentId(null);
+                  setClientSecret(null);
+                  onSuccess(result);
+              }, onError: onError, systemConfig: systemConfig, clientSecret: clientSecret }) }));
   }
 
   function Sidebar({ isOpen, onClose, title, children, width = "450px" }) {
@@ -10293,6 +10357,317 @@
                 ` })] }) }));
   }
 
+  /**
+   * Google Ads Conversion Tracking Utility
+   *
+   * This utility handles Google Ads conversion tracking for the booking widget.
+   * It includes consent checking, gtag initialization, and conversion tracking.
+   */
+  /**
+   * Check if Google Consent Mode has granted the necessary permissions for ads tracking
+   * This checks multiple sources of consent state in order of preference
+   */
+  function checkGoogleConsent() {
+      console.log("[Google Ads Tracking] 🔍 Checking Google consent...");
+      if (typeof window === "undefined") {
+          console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
+          return false;
+      }
+      console.log("[Google Ads Tracking] ✅ Window object available");
+      // Method 1: Check dataLayer for consent_update events (most reliable)
+      if (window.dataLayer && Array.isArray(window.dataLayer)) {
+          console.log("[Google Ads Tracking] 🔍 Checking dataLayer for consent events...");
+          const dataLayer = window.dataLayer;
+          // Debug: Show the entire dataLayer contents
+          console.log("[Google Ads Tracking] 🗂️ Complete dataLayer contents:", JSON.stringify(dataLayer, null, 2));
+          console.log("[Google Ads Tracking] 📊 dataLayer length:", dataLayer.length);
+          // Look for the most recent consent update in dataLayer
+          let latestConsentState = null;
+          const foundEvents = [];
+          // Search backwards through dataLayer for most recent consent state
+          for (let i = dataLayer.length - 1; i >= 0; i--) {
+              const event = dataLayer[i];
+              console.log(`[Google Ads Tracking] 🔍 Checking dataLayer[${i}]:`, event);
+              if (event && typeof event === "object") {
+                  // Check for various consent event patterns
+                  if (event.event === "consent_update" || event.event === "default_consent") {
+                      console.log("[Google Ads Tracking] 📋 Found consent event:", event);
+                      foundEvents.push(event);
+                      if (event.consent_mode) {
+                          latestConsentState = event.consent_mode;
+                          break;
+                      }
+                  }
+                  // Also check for direct consent_mode properties
+                  if (event.consent_mode) {
+                      console.log("[Google Ads Tracking] 📋 Found consent_mode property:", event);
+                      foundEvents.push(event);
+                      latestConsentState = event.consent_mode;
+                      break;
+                  }
+              }
+          }
+          console.log("[Google Ads Tracking] 📋 All found consent events:", foundEvents);
+          if (latestConsentState) {
+              const adStorageGranted = latestConsentState.ad_storage === "granted";
+              console.log("[Google Ads Tracking] 🔐 ad_storage from dataLayer:", latestConsentState.ad_storage);
+              console.log("[Google Ads Tracking] 🎯 Consent result from dataLayer:", adStorageGranted);
+              return adStorageGranted;
+          }
+          console.log("[Google Ads Tracking] ❌ No consent events found in dataLayer");
+      }
+      console.log("[Google Ads Tracking] ❌ dataLayer not found or not an array");
+      // Method 2: Check for cookie-based consent (fallback for host implementation)
+      console.log("[Google Ads Tracking] 🔍 Checking cookie-based consent...");
+      try {
+          // Debug: Show all cookies
+          console.log("[Google Ads Tracking] 🍪 All cookies:", document.cookie);
+          const allCookies = document.cookie.split(";").map((cookie) => cookie.trim());
+          console.log("[Google Ads Tracking] 🍪 Parsed cookies:", allCookies);
+          // Check for the host page's conversion tracking consent cookie
+          const conversionTrackingCookie = document.cookie
+              .split(";")
+              .find((cookie) => cookie.trim().startsWith("conversionTrackingConsent="));
+          if (conversionTrackingCookie) {
+              const cookieValue = conversionTrackingCookie.split("=")[1];
+              const isGranted = cookieValue === "true";
+              console.log("[Google Ads Tracking] 🍪 Found conversionTrackingConsent cookie:", cookieValue);
+              console.log("[Google Ads Tracking] 🎯 Consent result from cookie:", isGranted);
+              return isGranted;
+          }
+          console.log("[Google Ads Tracking] ❌ conversionTrackingConsent cookie not found");
+          // Also check for other potential cookie names
+          const alternativeCookieNames = ["analyticsConsent", "ads_consent", "ad_storage"];
+          for (const cookieName of alternativeCookieNames) {
+              const alternativeCookie = allCookies.find((cookie) => cookie.startsWith(`${cookieName}=`));
+              if (alternativeCookie) {
+                  console.log(`[Google Ads Tracking] 🍪 Found alternative cookie ${cookieName}:`, alternativeCookie);
+              }
+          }
+      }
+      catch (error) {
+          console.warn("[Google Ads Tracking] ⚠️ Error checking cookies:", error);
+      }
+      // Method 3: Check if gtag exists but no consent state found
+      if (typeof window.gtag === "function") {
+          console.log("[Google Ads Tracking] ⚠️ gtag function exists but no consent state found");
+          console.log("[Google Ads Tracking] 💡 This might indicate consent hasn't been set yet");
+      }
+      else {
+          console.log("[Google Ads Tracking] ❌ gtag function not found");
+      }
+      // If no consent mechanism is found, assume consent is not granted
+      console.log("[Google Ads Tracking] 🚫 No valid consent state found, returning false");
+      return false;
+  }
+  /**
+   * Check if gtag is already initialized on the host page
+   */
+  function isGtagInitialized() {
+      console.log("[Google Ads Tracking] 🔍 Checking if gtag is initialized...");
+      if (typeof window === "undefined") {
+          console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
+          return false;
+      }
+      console.log("[Google Ads Tracking] ✅ Window object available");
+      // Check if gtag function exists
+      if (typeof window.gtag === "function") {
+          console.log("[Google Ads Tracking] ✅ gtag function exists");
+          return true;
+      }
+      console.log("[Google Ads Tracking] ❌ gtag function not found, checking for scripts...");
+      // Check if Google Analytics or Google Ads scripts are already loaded
+      const scripts = document.querySelectorAll('script[src*="googletagmanager.com"]');
+      console.log("[Google Ads Tracking] 📜 Found", scripts.length, "Google Tag Manager scripts");
+      const isInitialized = scripts.length > 0;
+      console.log("[Google Ads Tracking] 🎯 gtag initialization status:", isInitialized);
+      return isInitialized;
+  }
+  /**
+   * Initialize Google Tag (gtag) if not already present
+   */
+  function initializeGtag(tagId) {
+      console.log("[Google Ads Tracking] 🚀 Starting gtag initialization with tagId:", tagId);
+      return new Promise((resolve, reject) => {
+          if (typeof window === "undefined") {
+              console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
+              reject(new Error("Window object not available"));
+              return;
+          }
+          console.log("[Google Ads Tracking] ✅ Window object available");
+          // If gtag is already initialized, just resolve
+          if (isGtagInitialized()) {
+              console.log("[Google Ads Tracking] ⚡ gtag already initialized, skipping setup");
+              resolve();
+              return;
+          }
+          console.log("[Google Ads Tracking] 📦 gtag not found, creating new script element...");
+          try {
+              // Create the gtag script
+              const script = document.createElement("script");
+              script.async = true;
+              script.src = `https://www.googletagmanager.com/gtag/js?id=${tagId}`;
+              console.log("[Google Ads Tracking] 🌐 Script src set to:", script.src);
+              script.onload = () => {
+                  console.log("[Google Ads Tracking] 📥 Script loaded successfully, initializing gtag...");
+                  // Initialize gtag
+                  window.dataLayer = window.dataLayer || [];
+                  console.log("[Google Ads Tracking] 📊 dataLayer initialized");
+                  window.gtag = (...args) => {
+                      window.dataLayer.push(args);
+                  };
+                  console.log("[Google Ads Tracking] 🔧 gtag function created");
+                  // Configure gtag
+                  console.log("[Google Ads Tracking] ⚙️ Configuring gtag with privacy settings...");
+                  window.gtag("js", new Date());
+                  window.gtag("config", tagId, {
+                      // Respect consent settings
+                      anonymize_ip: true,
+                      allow_google_signals: false,
+                      allow_ad_personalization_signals: false,
+                  });
+                  console.log("[Google Ads Tracking] ✅ gtag initialized successfully with tagId:", tagId);
+                  resolve();
+              };
+              script.onerror = (error) => {
+                  console.error("[Google Ads Tracking] ❌ Failed to load Google Tag script:", error);
+                  reject(new Error("Failed to load Google Tag script"));
+              };
+              console.log("[Google Ads Tracking] 📑 Adding script to document head...");
+              // Add script to head
+              document.head.appendChild(script);
+              console.log("[Google Ads Tracking] ✅ Script element appended to head");
+          }
+          catch (error) {
+              console.error("[Google Ads Tracking] ❌ Error during gtag initialization:", error);
+              reject(error);
+          }
+      });
+  }
+  /**
+   * Track a Google Ads conversion
+   */
+  function trackConversion(config) {
+      console.log("[Google Ads Tracking] 🎯 Starting conversion tracking with config:", config);
+      if (typeof window === "undefined") {
+          console.warn("[Google Ads Tracking] ❌ Window object not available");
+          return;
+      }
+      console.log("[Google Ads Tracking] ✅ Window object available");
+      if (!config.tagId || !config.conversionId) {
+          console.warn("[Google Ads Tracking] ❌ Missing tagId or conversionId", {
+              tagId: config.tagId,
+              conversionId: config.conversionId,
+          });
+          return;
+      }
+      console.log("[Google Ads Tracking] ✅ Required config fields present:", {
+          tagId: config.tagId,
+          conversionId: config.conversionId,
+      });
+      if (typeof window.gtag !== "function") {
+          console.warn("[Google Ads Tracking] ❌ gtag function not available");
+          return;
+      }
+      console.log("[Google Ads Tracking] ✅ gtag function is available");
+      try {
+          console.log("[Google Ads Tracking] 🔧 Building conversion data...");
+          const conversionData = {
+              send_to: `${config.tagId}/${config.conversionId}`,
+          };
+          console.log("[Google Ads Tracking] 📋 Base conversion data:", conversionData);
+          // Add optional parameters
+          if (config.conversionValue !== undefined) {
+              conversionData.value = config.conversionValue;
+              console.log("[Google Ads Tracking] 💰 Added conversion value:", config.conversionValue);
+          }
+          if (config.conversionCurrency) {
+              conversionData.currency = config.conversionCurrency;
+              console.log("[Google Ads Tracking] 💱 Added currency:", config.conversionCurrency);
+          }
+          if (config.transactionId) {
+              conversionData.transaction_id = config.transactionId;
+              console.log("[Google Ads Tracking] 🔖 Added transaction ID:", config.transactionId);
+          }
+          console.log("[Google Ads Tracking] 📦 Final conversion data:", conversionData);
+          // Track the conversion
+          console.log("[Google Ads Tracking] 🚀 Sending conversion event to gtag...");
+          window.gtag("event", "conversion", conversionData);
+          console.log("[Google Ads Tracking] ✅ Conversion tracked successfully:", conversionData);
+      }
+      catch (error) {
+          console.error("[Google Ads Tracking] ❌ Error tracking conversion:", error);
+      }
+  }
+  /**
+   * Main function to handle Google Ads conversion tracking
+   * This function checks consent, initializes gtag if needed, and tracks the conversion
+   */
+  async function handleGoogleAdsConversion(config) {
+      console.log("[Google Ads Tracking] 🎬 Starting handleGoogleAdsConversion with config:", config);
+      // Validate config
+      if (!config.tagId || !config.conversionId) {
+          console.log("[Google Ads Tracking] ❌ No tagId or conversionId provided, skipping conversion tracking", { tagId: config.tagId, conversionId: config.conversionId });
+          return;
+      }
+      console.log("[Google Ads Tracking] ✅ Config validation passed");
+      // Check consent first
+      console.log("[Google Ads Tracking] 🔐 Checking consent...");
+      if (!checkGoogleConsent()) {
+          console.log("[Google Ads Tracking] 🚫 Google consent not granted, skipping conversion tracking");
+          return;
+      }
+      console.log("[Google Ads Tracking] ✅ Consent check passed");
+      try {
+          // Initialize gtag if not already present
+          console.log("[Google Ads Tracking] 🔍 Checking if gtag needs initialization...");
+          if (!isGtagInitialized()) {
+              console.log("[Google Ads Tracking] 🚀 Initializing gtag...");
+              await initializeGtag(config.tagId);
+              console.log("[Google Ads Tracking] ✅ gtag initialization completed");
+          }
+          else {
+              console.log("[Google Ads Tracking] ⚡ gtag already initialized, proceeding...");
+          }
+          // Small delay to ensure gtag is ready
+          console.log("[Google Ads Tracking] ⏱️ Adding 100ms delay to ensure gtag is ready...");
+          setTimeout(() => {
+              console.log("[Google Ads Tracking] 🎯 Delay completed, tracking conversion...");
+              trackConversion(config);
+          }, 100);
+      }
+      catch (error) {
+          console.error("[Google Ads Tracking] ❌ Error handling conversion:", error);
+      }
+  }
+  /**
+   * Utility function to get conversion value from booking data
+   */
+  function getConversionValueFromBooking(bookingData) {
+      console.log("[Google Ads Tracking] 💰 Extracting conversion value from booking data:", bookingData);
+      // Try to get the total amount from various possible structures
+      const possiblePaths = [
+          { path: "order.total", value: bookingData?.order?.total },
+          { path: "booking.total", value: bookingData?.booking?.total },
+          { path: "total", value: bookingData?.total },
+          { path: "amount", value: bookingData?.amount },
+          { path: "payment.amount", value: bookingData?.payment?.amount },
+          { path: "stripePaymentIntent.amount", value: bookingData?.stripePaymentIntent?.amount },
+      ];
+      console.log("[Google Ads Tracking] 🔍 Checking possible value paths:", possiblePaths);
+      for (const { path, value } of possiblePaths) {
+          console.log(`[Google Ads Tracking] 📋 Checking path '${path}':`, value);
+          if (typeof value === "number" && value > 0) {
+              // Convert from cents to euros
+              const convertedValue = value / 100;
+              console.log(`[Google Ads Tracking] ✅ Found valid value at '${path}': ${value} cents = ${convertedValue} euros`);
+              return convertedValue;
+          }
+      }
+      console.log("[Google Ads Tracking] ❌ No valid conversion value found in booking data");
+      return undefined;
+  }
+
   const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
       const [bookingData, setBookingData] = d$1(null);
       const [eventDetails, setEventDetails] = d$1(null);
@@ -10337,6 +10712,27 @@
                       });
                       // Set payment status from Stripe data or order status
                       setPaymentStatus(data.stripePaymentIntent?.status || data.order.status);
+                      // Trigger Google Ads conversion tracking if payment is successful
+                      const finalPaymentStatus = data.stripePaymentIntent?.status || data.order.status;
+                      if (finalPaymentStatus === "succeeded" &&
+                          config.googleAds?.tagId &&
+                          config.googleAds?.conversionId) {
+                          // Prepare conversion tracking data
+                          const conversionValue = config.googleAds.includeValue !== false
+                              ? getConversionValueFromBooking(data)
+                              : undefined;
+                          const transactionId = data.order.id;
+                          // Track the conversion
+                          handleGoogleAdsConversion({
+                              tagId: config.googleAds.tagId,
+                              conversionId: config.googleAds.conversionId,
+                              conversionValue,
+                              conversionCurrency: config.googleAds.conversionCurrency || "EUR",
+                              transactionId,
+                          }).catch((error) => {
+                              console.warn("[BookingSuccessModal] Google Ads conversion tracking failed:", error);
+                          });
+                      }
                   }
                   else {
                       onError?.(data.error || "Fehler beim Abrufen der Buchungsdaten");
@@ -11933,7 +12329,6 @@
                   body: JSON.stringify(requestBody),
               });
               const data = await response.json();
-              console.log("Event details response:", { status: response.status, data }); // Debug log
               if (response.ok) {
                   setEventDetails(data.eventDetails);
                   // Store system configuration for PaymentForm