@cascayd/experiment 0.3.16 → 0.3.19

package/dist/shopify-handler-browser.js

@@ -57,9 +57,15 @@
   // Try to get API key from window (if SDK was initialized)
   function getAPIKey() {
     if (typeof window !== 'undefined' && window._cascaydAPIKey) {
+      console.log('[cascayd-shopify] ✅ Found API key from window._cascaydAPIKey');
       return window._cascaydAPIKey;
     }
-    return API_KEY;
+    if (API_KEY) {
+      console.log('[cascayd-shopify] ✅ Found API key from local variable');
+      return API_KEY;
+    }
+    console.warn('[cascayd-shopify] ⚠️ No API key found! window._cascaydAPIKey =', typeof window !== 'undefined' ? window._cascaydAPIKey : 'N/A');
+    return '';
   }
 
   // Direct API call functions (same logic as SDK)
@@ -151,6 +157,8 @@
       const variantId = opts.variantId || fromCookie;
       if (variantId) {
         body.variant_id = variantId;
+      } else {
+        console.warn('[cascayd-shopify] ⚠️ No variant_id available for experiment:', opts.experimentId);
       }
     }
 
@@ -158,22 +166,51 @@
       body.value = opts.value;
     }
 
+    // Auto-capture route if not provided
+    if (opts.route) {
+      body.route = opts.route;
+    } else if (typeof window !== 'undefined' && window.location) {
+      body.route = window.location.pathname;
+    }
+
+    // Validate required fields
+    if (!body.experiment_id || !body.variant_id) {
+      const error = new Error('Missing required fields: experiment_id=' + body.experiment_id + ', variant_id=' + body.variant_id);
+      console.error('[cascayd-shopify] ❌', error.message, 'Body:', body);
+      throw error;
+    }
+
     const headers = {
       'Content-Type': 'application/json'
     };
     const apiKey = getAPIKey();
     if (apiKey) {
       headers.Authorization = 'Bearer ' + apiKey;
+    } else {
+      console.warn('[cascayd-shopify] ⚠️ No API key found! Check window._cascaydAPIKey');
     }
 
-    const res = await fetch(BASE_URL + '/events', {
-      method: 'POST',
-      headers: headers,
-      body: JSON.stringify(body)
-    });
+    console.log('[cascayd-shopify] 📤 Sending event:', { type: type, body: body, hasApiKey: !!apiKey });
 
-    if (!res.ok) {
-      throw new Error('Record failed: ' + res.status);
+    try {
+      const res = await fetch(BASE_URL + '/events', {
+        method: 'POST',
+        headers: headers,
+        body: JSON.stringify(body)
+      });
+
+      if (!res.ok) {
+        const errorText = await res.text();
+        console.error('[cascayd-shopify] ❌ API error response:', res.status, errorText);
+        throw new Error('Record failed: ' + res.status + ' - ' + errorText);
+      }
+
+      const result = await res.json();
+      console.log('[cascayd-shopify] ✅ Event recorded successfully:', result);
+      return result;
+    } catch (error) {
+      console.error('[cascayd-shopify] ❌ Fetch error:', error);
+      throw error;
     }
   }
 
@@ -267,6 +304,92 @@
     }
   }
 
+  // Find variant ID from element (with DOM fallback)
+  function findVariantIdFromElement(el, experimentId) {
+    // First try cookie (most reliable)
+    const fromCookie = readVariantChoice(experimentId);
+    if (fromCookie) {
+      console.log('[cascayd-shopify] 📖 Found variant from cookie:', fromCookie);
+      return fromCookie;
+    }
+
+    // Fallback: traverse up DOM to find parent with data-cascayd-variant
+    console.log('[cascayd-shopify] 🔍 Cookie not found, traversing DOM for variant ID...');
+    let current = el;
+    while (current) {
+      const variantId = current.getAttribute('data-cascayd-variant');
+      if (variantId) {
+        console.log('[cascayd-shopify] ✅ Found variant ID in DOM:', variantId);
+        return variantId;
+      }
+
+      // Check if we're inside an experiment container
+      const experimentIdAttr = current.getAttribute('data-cascayd-experiment');
+      if (experimentIdAttr === experimentId) {
+        // We're in the right experiment container, continue up
+        current = current.parentElement;
+      } else {
+        // Move up to find experiment container
+        current = current.parentElement;
+      }
+    }
+
+    console.warn('[cascayd-shopify] ⚠️ No variant ID found for experiment:', experimentId);
+    return null;
+  }
+
+  // Setup conversion tracking for an experiment
+  function setupConversionTracking(experimentId, sdk) {
+    const selector = '[data-cascayd-experiment="' + experimentId + '"] [data-cascayd-conversion]';
+    const elements = document.querySelectorAll(selector);
+    console.log('[cascayd-shopify] 🎯 Setting up conversion tracking for experiment:', experimentId, 'found', elements.length, 'conversion elements', 'hasSDK:', !!sdk);
+
+    elements.forEach(function(el) {
+      // Skip if already tracked
+      if (el.hasAttribute('data-cascayd-tracked')) {
+        console.log('[cascayd-shopify] ⏭️ Element already tracked, skipping');
+        return;
+      }
+
+      el.setAttribute('data-cascayd-tracked', 'true');
+      console.log('[cascayd-shopify] ✅ Marked element as tracked:', el);
+
+      el.addEventListener('click', function(e) {
+        console.log('[cascayd-shopify] 🎯 Conversion click detected!');
+        const variantId = findVariantIdFromElement(el, experimentId);
+        if (variantId) {
+          console.log('[cascayd-shopify] 📊 Recording conversion:', { experimentId, variantId, hasSDK: !!sdk, hasRecordFn: !!(sdk && sdk.record) });
+          
+          // Use SDK's record function if available (same as impressions), otherwise fallback to direct API call
+          if (sdk && sdk.record) {
+            console.log('[cascayd-shopify] ✅ Using SDK record function for conversion');
+            sdk.record('conversion', {
+              experimentId: experimentId,
+              variantId: variantId
+            }).then(function() {
+              console.log('[cascayd-shopify] ✅ Conversion recorded successfully via SDK');
+            }).catch(function(error) {
+              console.error('[cascayd-shopify] ❌ Failed to record conversion via SDK:', error);
+            });
+          } else {
+            console.log('[cascayd-shopify] ⚠️ SDK record not available, using direct API call');
+            // Fallback to direct API call
+            recordDirect('conversion', {
+              experimentId: experimentId,
+              variantId: variantId
+            }).then(function() {
+              console.log('[cascayd-shopify] ✅ Conversion recorded successfully via direct API');
+            }).catch(function(error) {
+              console.error('[cascayd-shopify] ❌ Failed to record conversion via direct API:', error);
+            });
+          }
+        } else {
+          console.warn('[cascayd-shopify] ⚠️ No variant found for experiment', experimentId, 'when recording conversion');
+        }
+      });
+    });
+  }
+
   // Process a single experiment
   async function processExperiment(experimentId, variantElements, sdk) {
     console.log('[cascayd-shopify] 🔬 Processing experiment:', { experimentId, variantElementCount: variantElements.length, hasSDK: !!sdk });
@@ -340,6 +463,9 @@
         el.classList.remove('cascayd-visible', 'cascayd-visible-inline');
       }
     });
+
+    // Setup conversion tracking after variant is shown
+    setupConversionTracking(experimentId, sdk);
     console.log('[cascayd-shopify] ✅ Finished processing experiment:', experimentId);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascayd/experiment",
-  "version": "0.3.16",
+  "version": "0.3.19",
   "description": "A lightweight A/B testing SDK for React applications with server-side analytics integration",
   "keywords": [
     "ab-testing",