@bigz-app/booking-widget 0.3.2 → 0.3.4

package/README.md

@@ -113,7 +113,8 @@ const config = {
     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
+    includeValue: true,             // Optional, defaults to true
+    consent: true // send the users consent to the widget when initializing.
   }
 };
 ```

package/dist/booking-widget.js

@@ -295,7 +295,7 @@
   const themes = {
       // --- Light Themes ---
       "light-fresh": {
-          highlight: "#00a8a1", // accent-strong
+          highlight: "#00b1aa", // accent-strong
           background: "#f8fdfe", // neutral-strong (background)
           surface: "#ffffff", // card (pure white)
           text: "#0e7490", // Turquoise 800
@@ -6839,7 +6839,6 @@
                   }
                   catch (error) {
                       // Ignore removal errors - element may have already been removed
-                      console.debug("Portal cleanup: Element already removed");
                   }
               }
               document.body.style.overflow = "";
@@ -10360,312 +10359,116 @@
   /**
    * 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.
+   * Simplified utility that waits 1500ms, checks/initializes gtag, and sends conversion.
    */
   /**
-   * Check if Google Consent Mode has granted the necessary permissions for ads tracking
-   * This checks multiple sources of consent state in order of preference
+   * Check if gtag is available in current or parent window
    */
-  function checkGoogleConsent() {
-      console.log("[Google Ads Tracking] 🔍 Checking Google consent...");
+  function isGtagAvailable() {
       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;
-                  }
+      // Check current window
+      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") {
+                  return true;
               }
           }
-          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;
+          catch (e) {
+              // Cannot access parent window (cross-origin)
           }
-          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
+   * Initialize gtag if not already available
    */
-  function isGtagInitialized() {
-      console.log("[Google Ads Tracking] 🔍 Checking if gtag is initialized...");
+  function initializeGtag(tagId) {
       if (typeof window === "undefined") {
-          console.log("[Google Ads Tracking] ❌ Window object not available (SSR context)");
-          return false;
+          return;
       }
-      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;
+      // Skip if gtag already exists
+      if (isGtagAvailable()) {
+          return;
       }
-      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);
-          }
+      // 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,
       });
   }
   /**
-   * Track a Google Ads conversion
+   * Send conversion event using available gtag
    */
-  function trackConversion(config) {
-      console.log("[Google Ads Tracking] 🎯 Starting conversion tracking with config:", config);
+  function sendConversion(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;
+      let gtag = window.gtag;
+      // Try parent window gtag if current window doesn't have it
+      if (typeof gtag !== "function" && window !== window.parent) {
+          try {
+              gtag = window.parent?.gtag;
+          }
+          catch {
+              // Cannot access parent window (cross-origin)
+          }
       }
-      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");
+      if (typeof gtag !== "function") {
           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);
+      // Build conversion data
+      const conversionData = {
+          send_to: `${config.tagId}/${config.conversionId}`,
+      };
+      // Add optional parameters
+      if (config.conversionValue !== undefined) {
+          conversionData.value = config.conversionValue;
       }
-      catch (error) {
-          console.error("[Google Ads Tracking] ❌ Error tracking conversion:", error);
+      if (config.conversionCurrency) {
+          conversionData.currency = config.conversionCurrency;
       }
+      if (config.transactionId) {
+          conversionData.transaction_id = config.transactionId;
+      }
+      // Send conversion event
+      gtag("event", "conversion", conversionData);
   }
   /**
    * Main function to handle Google Ads conversion tracking
-   * This function checks consent, initializes gtag if needed, and tracks the conversion
+   * Waits 1500ms, checks/initializes gtag, then sends conversion
    */
-  async function handleGoogleAdsConversion(config) {
-      console.log("[Google Ads Tracking] 🎬 Starting handleGoogleAdsConversion with config:", config);
-      // Validate config
+  function handleGoogleAdsConversion(config) {
+      // Validate required 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");
+      // Wait 1500ms before proceeding
+      setTimeout(() => {
+          // Check if gtag is available, initialize if not
+          if (!isGtagAvailable()) {
+              initializeGtag(config.tagId);
           }
-          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;
+          sendConversion(config);
+      }, 1500);
   }
 
   const BookingSuccessModal = ({ isOpen, onClose, config, onError, paymentIntentId, }) => {
@@ -10716,11 +10519,10 @@
                       const finalPaymentStatus = data.stripePaymentIntent?.status || data.order.status;
                       if (finalPaymentStatus === "succeeded" &&
                           config.googleAds?.tagId &&
-                          config.googleAds?.conversionId) {
+                          config.googleAds?.conversionId &&
+                          config.googleAds?.consent !== false) {
                           // Prepare conversion tracking data
-                          const conversionValue = config.googleAds.includeValue !== false
-                              ? getConversionValueFromBooking(data)
-                              : undefined;
+                          const conversionValue = data.order.total;
                           const transactionId = data.order.id;
                           // Track the conversion
                           handleGoogleAdsConversion({
@@ -10729,8 +10531,6 @@
                               conversionValue,
                               conversionCurrency: config.googleAds.conversionCurrency || "EUR",
                               transactionId,
-                          }).catch((error) => {
-                              console.warn("[BookingSuccessModal] Google Ads conversion tracking failed:", error);
                           });
                       }
                   }
@@ -10812,7 +10612,7 @@
                                           fontWeight: "600",
                                           color: "var(--bw-highlight-color)",
                                           margin: "0px 10px",
-                                      }, children: "Buchung erfolgreich erstellt!" })] }), u$2("button", { onClick: handlePrint, style: {
+                                      }, children: "Reservierung erfolgreich!" })] }), u$2("button", { onClick: handlePrint, style: {
                                   backgroundColor: "transparent",
                                   border: `1px solid var(--bw-border-color)`,
                                   color: "var(--bw-text-color)",