@keak/sdk 1.0.1

package/src/cli/conversion-detector.js

@@ -0,0 +1,716 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import SafeTransformer from './safe-transformer.js';
+
+class ConversionDetector {
+  constructor() {
+    this.codeTransformer = new SafeTransformer();
+    this.conversionSelectors = [
+      // Button elements
+      'button',
+      'input[type="button"]',
+      'input[type="submit"]',
+      '[role="button"]',
+      
+      // Link elements
+      'a[href]',
+      
+      // Common CTA patterns
+      '[class*="cta"]',
+      '[class*="button"]',
+      '[class*="btn"]',
+      '[id*="cta"]',
+      '[id*="button"]',
+      '[id*="btn"]',
+      
+      // Form submit elements
+      'form button',
+      'form input[type="submit"]',
+      
+      // Common conversion text patterns
+      '[class*="buy"]',
+      '[class*="purchase"]',
+      '[class*="checkout"]',
+      '[class*="sign-up"]',
+      '[class*="signup"]',
+      '[class*="subscribe"]',
+      '[class*="download"]',
+      '[class*="get-started"]',
+      '[class*="learn-more"]',
+      '[class*="contact"]',
+      '[class*="demo"]',
+      '[class*="trial"]',
+      
+      // E-commerce specific
+      '[class*="add-to-cart"]',
+      '[class*="add-cart"]',
+      '[class*="cart"]',
+      '[class*="wishlist"]',
+      
+      // Navigation that might lead to conversions
+      'nav a',
+      'header a',
+      '.navigation a',
+      '.menu a'
+    ];
+    
+    this.conversionTextPatterns = [
+      /buy\s+now/i,
+      /get\s+started/i,
+      /sign\s+up/i,
+      /subscribe/i,
+      /download/i,
+      /try\s+free/i,
+      /free\s+trial/i,
+      /learn\s+more/i,
+      /contact\s+us/i,
+      /request\s+demo/i,
+      /book\s+demo/i,
+      /add\s+to\s+cart/i,
+      /checkout/i,
+      /purchase/i,
+      /order\s+now/i,
+      /join\s+now/i,
+      /register/i,
+      /apply\s+now/i,
+      /get\s+quote/i,
+      /call\s+now/i,
+      /schedule/i,
+      /book\s+now/i
+    ];
+  }
+
+  generateConversionScript() {
+    return `
+// Keak Conversion Tracking - Auto-generated
+(function() {
+  'use strict';
+  
+  // Configuration
+  const CONVERSION_SELECTORS = ${JSON.stringify(this.conversionSelectors, null, 2)};
+  const CONVERSION_TEXT_PATTERNS = [
+    ${this.conversionTextPatterns.map(pattern =`/${pattern.source}/${pattern.flags}`).join(',\n    ')}
+  ];
+  
+  // Conversion tracking state
+  let trackedElements = new Set();
+  let conversionGoals = new Map();
+  
+  // Initialize conversion tracking
+  function initConversionTracking() {
+    console.log('🎯 Keak Conversion Tracking initialized');
+    
+    // Tag existing elements
+    tagConversionElements();
+    
+    // Set up mutation observer for dynamic content
+    observeNewElements();
+    
+    // Set up periodic re-scanning
+    setInterval(tagConversionElements, 5000);
+    
+    console.log(\`📊 Tagged \${trackedElements.size} conversion elements\`);
+  }
+  
+  // Main function to detect and tag conversion elements
+  function tagConversionElements() {
+    const newElements = new Set();
+    
+    // Find elements by selectors
+    CONVERSION_SELECTORS.forEach(selector ={
+      try {
+        const elements = document.querySelectorAll(selector);
+        elements.forEach(element ={
+          if (!trackedElements.has(element) && isConversionElement(element)) {
+            tagElement(element);
+            newElements.add(element);
+            trackedElements.add(element);
+          }
+        });
+      } catch (e) {
+        console.warn('Invalid selector:', selector, e);
+      }
+    });
+    
+    // Find elements by text content
+    const allClickableElements = document.querySelectorAll('a, button, [onclick], [role="button"], input[type="button"], input[type="submit"]');
+    allClickableElements.forEach(element ={
+      if (!trackedElements.has(element) && hasConversionText(element)) {
+        tagElement(element);
+        newElements.add(element);
+        trackedElements.add(element);
+      }
+    });
+    
+    if (newElements.size 0) {
+      console.log(\`🔍 Found \${newElements.size} new conversion elements\`);
+      
+      // Show visual indicators
+      showConversionIndicators();
+    }
+  }
+  
+  // Check if element is likely a conversion element
+  function isConversionElement(element) {
+    // Skip if already tracked
+    if (trackedElements.has(element)) return false;
+    
+    // Skip hidden elements
+    if (!isElementVisible(element)) return false;
+    
+    // Check if it's clickable
+    if (!isClickable(element)) return false;
+    
+    // Check text content
+    if (hasConversionText(element)) return true;
+    
+    // Check classes and IDs
+    const className = element.className || '';
+    const id = element.id || '';
+    const combined = (className + ' ' + id).toLowerCase();
+    
+    const conversionKeywords = [
+      'cta', 'button', 'btn', 'buy', 'purchase', 'checkout', 
+      'signup', 'sign-up', 'subscribe', 'download', 'trial',
+      'demo', 'contact', 'get-started', 'learn-more', 'cart'
+    ];
+    
+    return conversionKeywords.some(keyword =combined.includes(keyword));
+  }
+  
+  // Check if element has conversion-related text
+  function hasConversionText(element) {
+    const text = (element.textContent || element.value || element.alt || element.title || '').toLowerCase();
+    return CONVERSION_TEXT_PATTERNS.some(pattern =pattern.test(text));
+  }
+  
+  // Check if element is visible
+  function isElementVisible(element) {
+    const style = window.getComputedStyle(element);
+    return style.display !== 'none' && 
+           style.visibility !== 'hidden' && 
+           style.opacity !== '0' &&
+           element.offsetWidth 0 && 
+           element.offsetHeight 0;
+  }
+  
+  // Check if element is clickable
+  function isClickable(element) {
+    const clickableTypes = ['a', 'button', 'input'];
+    const hasClickableRole = element.getAttribute('role') === 'button';
+    const hasClickHandler = element.onclick || element.getAttribute('onclick');
+    const isClickableInput = element.type === 'button' || element.type === 'submit';
+    
+    return clickableTypes.includes(element.tagName.toLowerCase()) || 
+           hasClickableRole || 
+           hasClickHandler ||
+           isClickableInput;
+  }
+  
+  // Tag an element for conversion tracking
+  function tagElement(element) {
+    // Add data attributes
+    element.setAttribute('data-keak-conversion', 'true');
+    element.setAttribute('data-keak-conversion-id', generateConversionId());
+    element.setAttribute('data-keak-conversion-type', getConversionType(element));
+    
+    // Add event listener for tracking
+    element.addEventListener('click', handleConversionClick, { passive: true });
+    
+    // Add visual indicator class
+    element.classList.add('keak-conversion-element');
+  }
+  
+  // Generate unique conversion ID
+  function generateConversionId() {
+    return 'conv_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+  }
+  
+  // Determine conversion type based on element
+  function getConversionType(element) {
+    const text = (element.textContent || element.value || '').toLowerCase();
+    const className = (element.className || '').toLowerCase();
+    const id = (element.id || '').toLowerCase();
+    const combined = text + ' ' + className + ' ' + id;
+    
+    if (/buy|purchase|checkout|order/.test(combined)) return 'purchase';
+    if (/sign.?up|register|join/.test(combined)) return 'signup';
+    if (/subscribe/.test(combined)) return 'subscription';
+    if (/download/.test(combined)) return 'download';
+    if (/demo|trial/.test(combined)) return 'demo';
+    if (/contact|call|phone/.test(combined)) return 'contact';
+    if (/cart/.test(combined)) return 'add-to-cart';
+    if (/learn.?more|read.?more/.test(combined)) return 'engagement';
+    
+    return 'click';
+  }
+  
+  // Handle conversion click events
+  function handleConversionClick(event) {
+    const element = event.currentTarget;
+    const conversionId = element.getAttribute('data-keak-conversion-id');
+    const conversionType = element.getAttribute('data-keak-conversion-type');
+    
+    // Track the conversion event
+    if (window.keak && window.keak.trackEvent) {
+      window.keak.trackEvent('conversion', {
+        conversionId,
+        conversionType,
+        elementTag: element.tagName.toLowerCase(),
+        elementText: (element.textContent || element.value || '').substring(0, 100),
+        elementClass: element.className,
+        elementId: element.id,
+        href: element.href,
+        timestamp: new Date().toISOString(),
+        url: window.location.href,
+        referrer: document.referrer
+      });
+      
+      console.log(\`🎯 Conversion tracked: \${conversionType}\`, {
+        id: conversionId,
+        element: element.tagName.toLowerCase(),
+        text: element.textContent?.substring(0, 50)
+      });
+    }
+    
+    // Visual feedback
+    showConversionFeedback(element);
+  }
+  
+  // Show visual feedback for conversion
+  function showConversionFeedback(element) {
+    const feedback = document.createElement('div');
+    feedback.innerHTML = '🎯';
+    feedback.style.cssText = \`
+      position: fixed;
+      z-index: 999999;
+      pointer-events: none;
+      font-size: 24px;
+      animation: keakConversionPing 0.8s ease-out;
+    \`;
+    
+    const rect = element.getBoundingClientRect();
+    feedback.style.left = (rect.left + rect.width / 2) + 'px';
+    feedback.style.top = (rect.top + rect.height / 2) + 'px';
+    
+    document.body.appendChild(feedback);
+    
+    setTimeout(() => {
+      feedback.remove();
+    }, 800);
+  }
+  
+  // Show visual indicators for all conversion elements
+  function showConversionIndicators() {
+    // Add CSS for conversion indicators
+    if (!document.getElementById('keak-conversion-styles')) {
+      const style = document.createElement('style');
+      style.id = 'keak-conversion-styles';
+      style.textContent = \`
+        .keak-conversion-element {
+          position: relative !important;
+        }
+        
+        .keak-conversion-element::after {
+          content: '🎯';
+          position: absolute !important;
+          top: -8px !important;
+          right: -8px !important;
+          width: 20px !important;
+          height: 20px !important;
+          background: #ff6b35 !important;
+          border-radius: 50% !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          font-size: 10px !important;
+          z-index: 999998 !important;
+          animation: keakConversionBadge 2s infinite !important;
+          pointer-events: none !important;
+          border: 2px solid white !important;
+          box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
+        }
+        
+        .keak-conversion-element:hover::after {
+          animation: keakConversionHover 0.3s ease !important;
+        }
+        
+        @keyframes keakConversionBadge {
+          0% { transform: scale(1); opacity: 1; }
+          50% { transform: scale(1.1); opacity: 0.8; }
+          100% { transform: scale(1); opacity: 1; }
+        }
+        
+        @keyframes keakConversionHover {
+          0% { transform: scale(1); }
+          50% { transform: scale(1.3); }
+          100% { transform: scale(1.1); }
+        }
+        
+        @keyframes keakConversionPing {
+          0% { 
+            transform: scale(1) translate(-50%, -50%); 
+            opacity: 1; 
+          }
+          100% { 
+            transform: scale(2) translate(-50%, -50%); 
+            opacity: 0; 
+          }
+        }
+        
+        .keak-conversion-summary {
+          position: fixed !important;
+          top: 20px !important;
+          right: 20px !important;
+          background: #2d3748 !important;
+          color: white !important;
+          padding: 12px 16px !important;
+          border-radius: 8px !important;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+          font-size: 14px !important;
+          z-index: 999999 !important;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
+          border: 1px solid #4a5568 !important;
+        }
+        
+        .keak-conversion-summary h4 {
+          margin: 0 0 8px 0 !important;
+          font-size: 16px !important;
+          font-weight: 600 !important;
+        }
+        
+        .keak-conversion-summary ul {
+          margin: 0 !important;
+          padding: 0 !important;
+          list-style: none !important;
+        }
+        
+        .keak-conversion-summary li {
+          margin: 4px 0 !important;
+          font-size: 12px !important;
+          opacity: 0.9 !important;
+        }
+      \`;
+      document.head.appendChild(style);
+    }
+    
+    // Show summary
+    showConversionSummary();
+  }
+  
+  // Show conversion tracking summary
+  function showConversionSummary() {
+    const existingSummary = document.getElementById('keak-conversion-summary');
+    if (existingSummary) {
+      existingSummary.remove();
+    }
+    
+    const typeCount = {};
+    trackedElements.forEach(element ={
+      const type = element.getAttribute('data-keak-conversion-type');
+      typeCount[type] = (typeCount[type] || 0) + 1;
+    });
+    
+    const summary = document.createElement('div');
+    summary.id = 'keak-conversion-summary';
+    summary.className = 'keak-conversion-summary';
+    summary.innerHTML = \`
+      <h4🎯 Conversion Tracking Active</h4<div\${trackedElements.size} elements tagged</div<ul\${Object.entries(typeCount).map(([type, count]) =\`<li\${type}: \${count}</li\`
+        ).join('')}
+      </ul\`;
+    
+    document.body.appendChild(summary);
+    
+    // Auto-hide after 10 seconds
+    setTimeout(() => {
+      if (summary.parentNode) {
+        summary.style.transition = 'opacity 0.5s';
+        summary.style.opacity = '0';
+        setTimeout(() =summary.remove(), 500);
+      }
+    }, 10000);
+  }
+  
+  // Observe for new elements (dynamic content)
+  function observeNewElements() {
+    const observer = new MutationObserver((mutations) => {
+      let hasNewElements = false;
+      
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              hasNewElements = true;
+            }
+          });
+        }
+      });
+      
+      if (hasNewElements) {
+        // Debounce the tagging
+        clearTimeout(window.keakTaggingTimeout);
+        window.keakTaggingTimeout = setTimeout(tagConversionElements, 1000);
+      }
+    });
+    
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  
+  // Public API for manual control
+  window.keakConversions = {
+    scan: tagConversionElements,
+    show: showConversionIndicators,
+    hide: () => {
+      document.querySelectorAll('.keak-conversion-element').forEach(el ={
+        el.classList.remove('keak-conversion-element');
+      });
+      const summary = document.getElementById('keak-conversion-summary');
+      if (summary) summary.remove();
+    },
+    getTracked: () =Array.from(trackedElements),
+    getStats: () => {
+      const typeCount = {};
+      trackedElements.forEach(element ={
+        const type = element.getAttribute('data-keak-conversion-type');
+        typeCount[type] = (typeCount[type] || 0) + 1;
+      });
+      return { total: trackedElements.size, byType: typeCount };
+    }
+  };
+  
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initConversionTracking);
+  } else {
+    initConversionTracking();
+  }
+  
+  // Also initialize after a short delay to catch any late-loading content
+  setTimeout(initConversionTracking, 2000);
+  
+})();
+`;
+  }
+
+  generateResultsHTML(report, results) {
+    const modifiedFiles = results.filter(r => r.success && r.modified);
+    const errors = results.filter(r => !r.success);
+    
+    return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Keak Conversion Tracking Setup Complete</title><style>body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #333;
+            min-height: 100vh;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 12px;
+            padding: 40px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        
+        .logo {
+            font-size: 48px;
+            margin-bottom: 16px;
+        }
+        
+        h1 {
+            color: #2d3748;
+            margin-bottom: 8px;
+            font-size: 28px;
+        }
+        
+        .subtitle {
+            color: #718096;
+            font-size: 18px;
+        }
+        
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin: 40px 0;
+        }
+        
+        .feature {
+            padding: 20px;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            background: #f7fafc;
+        }
+        
+        .feature h3 {
+            color: #2d3748;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .instructions {
+            background: #edf2f7;
+            padding: 24px;
+            border-radius: 8px;
+            margin: 20px 0;
+        }
+        
+        .code {
+            background: #2d3748;
+            color: #e2e8f0;
+            padding: 16px;
+            border-radius: 8px;
+            font-family: 'SF Mono', Monaco, monospace;
+            margin: 16px 0;
+            overflow-x: auto;
+        }
+        
+        .success {
+            background: #f0fff4;
+            border: 1px solid #9ae6b4;
+            color: #22543d;
+            padding: 16px;
+            border-radius: 8px;
+            margin: 20px 0;
+        }
+        
+        .button {
+            background: #4299e1;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        
+        .button:hover {
+            background: #3182ce;
+        }
+        
+        .status {
+            font-weight: 600;
+            color: #38a169;
+        }
+        
+        .stats, .modified-files, .errors {
+            background: #f7fafc;
+            padding: 20px;
+            border-radius: 8px;
+            margin: 20px 0;
+            border-left: 4px solid #4299e1;
+        }
+        
+        .errors {
+            border-left-color: #f56565;
+            background: #fed7d7;
+        }
+        
+        .stats ul, .modified-files ul, .errors ul {
+            margin: 8px 0;
+            padding-left: 20px;
+        }
+        
+        .stats li, .modified-files li, .errors li {
+            margin: 4px 0;
+        }
+        
+        .backup {
+            color: #718096;
+            font-size: 12px;
+        }
+    </style></head><body><div class="container"><div class="header"><div class="logo">🎯</div><h1>Conversion Tracking Setup Complete</h1><p class="subtitle">Your React components have been automatically wrapped with conversion tracking</p></div><div class="success"><strong>✅ Success!</strong>Conversion tracking has been integrated into your codebase. 
+            All clickable elements are now wrapped with &lt;Conversion&gt; components for automatic telemetry.
+        </div><div class="stats"><h3>📊 Transformation Results</h3><ul><li><strong>Files processed:</strong> ${report.stats.filesProcessed}</li><li><strong>Files modified:</strong> ${report.stats.filesModified}</li><li><strong>Elements wrapped:</strong> ${report.stats.elementsWrapped}</li></ul></div>${modifiedFiles.length > 0 ? `
+        <div class="modified-files"><h3>📝 Modified Files</h3><ul>${modifiedFiles.map(file => `
+                    <li><code>${path.basename(file.filePath)}</code>${file.backup ? ` <span class="backup">(backup: ${path.basename(file.backup)})</span>` : ''}
+                    </li>`).join('')}
+            </ul></div>` : ''}
+        
+        ${errors.length > 0 ? `
+        <div class="errors"><h3>⚠️ Issues Found</h3><ul>${errors.map(error => `
+                    <li><code>${path.basename(error.filePath)}</code>: ${error.error}</li>`).join('')}
+            </ul></div>` : ''}
+        
+        <div class="feature-grid"><div class="feature"><h3>🔍 Auto-Detection</h3><p>Automatically finds buttons, CTAs, forms, and links that could be conversion points</p></div><div class="feature"><h3>🎯 Smart Tagging</h3><p>Uses AI-powered patterns to identify conversion-worthy elements based on text and context</p></div><div class="feature"><h3>📊 Real-time Tracking</h3><p>Tracks conversion events in real-time and sends data to your Keak dashboard</p></div><div class="feature"><h3>👁️ Visual Indicators</h3><p>Shows small badges on tracked elements so you can see what's being monitored</p></div></div><div class="instructions"><h3>How to use:</h3><ol><li><strong>Automatic:</strong> The tracking script is already running and detecting elements</li><li><strong>Manual control:</strong> Use the browser console commands for manual control</li><li><strong>View tracked elements:</strong> Look for 🎯 badges on your conversion elements</li><li><strong>Analytics:</strong> Check your Keak dashboard for conversion data</li></ol></div><div class="instructions"><h3>Browser Console Commands:</h3><div class="code">// View tracking statistics
+keakConversions.getStats()
+
+// Manually scan for new elements  
+keakConversions.scan()
+
+// Show/hide visual indicators
+keakConversions.show()
+keakConversions.hide()
+
+// Get all tracked elements
+keakConversions.getTracked()
+            </div></div><div style="text-align: center; margin-top: 40px;"><p class="status">Conversion tracking is now active! 🚀</p><p>Visit your website to see the conversion elements highlighted with 🎯 badges.</p></div></div></body></html>`;
+  }
+
+  createConversionFiles(targetDir) {
+    try {
+      console.log(`🔍 Scanning for React files in ${targetDir}...`);
+      
+      // Use code transformer to automatically wrap elements
+      const results = this.codeTransformer.processDirectory(targetDir);
+      const report = this.codeTransformer.generateReport();
+      
+      // Create a success page with results
+      const htmlPath = path.join(targetDir, 'conversion-setup-complete.html');
+      fs.writeFileSync(htmlPath, this.generateResultsHTML(report, results));
+      
+      // Show any errors
+      const errors = results.filter(r => !r.success);
+      
+      return {
+        htmlPath,
+        success: true,
+        results,
+        report,
+        errors
+      };
+    } catch (error) {
+      console.error('Error setting up conversion tracking:', error);
+      return { success: false, error: error.message };
+    }
+  }
+}
+
+export default ConversionDetector;
+
+// CLI execution
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const detector = new ConversionDetector();
+  const targetDir = process.argv[2] || process.cwd();
+  
+  console.log('🎯 Setting up conversion tracking...');
+  
+  const result = detector.createConversionFiles(targetDir);
+  
+  if (result.success) {
+    console.log('✅ Conversion tracking files created successfully!');
+    console.log('📄 Script:', result.scriptPath);
+    console.log('🌐 Setup page:', result.htmlPath);
+    console.log('\n🔧 Next steps:');
+    console.log('1. Add the script to your website');
+    console.log('2. The system will automatically detect conversion elements');
+    console.log('3. Check the setup page for more details');
+  } else {
+    console.error('❌ Failed to create conversion files:', result.error);
+    process.exit(1);
+  }
+}