You're Being Tracked Right Now (Here's How)

// Test all engagement level toasts in sequence
WithSeismicTracker.testToasts();

// Or trigger individual toasts
WithSeismicTracker.showToast("Custom message!", "warm", 5000);
WithSeismicTracker.showToast("You're on fire!", "hot", 5000);
WithSeismicTracker.showToast("Welcome aboard!", "qualified", 5000);

// See all available achievements and your progress
WithSeismicTracker.showAllAchievements();

// Test an achievement notification
WithSeismicTracker.testAchievement("deep_diver");

// Check what you've unlocked so far
WithSeismicTracker.getUnlockedAchievements();

// Initialize visitor profile with unique ID and session tracking
const initVisitorProfile = () => {
  const stored = localStorage.getItem("visitor_profile");
  if (stored) return JSON.parse(stored);

  return {
    visitorId: `visitor_${Math.random().toString(36).substring(2)}`,
    firstVisit: new Date().toISOString(),
    behavior: {
      pages: {}, // Page-specific data
      totalPageViews: 0,
      uniquePagesViewed: 0,
      totalTimeSpent: 0,
      toolsUsed: [],
      contentCategories: [],
    },
    engagement: {
      score: 0,
      level: "cold",
      signals: [],
    },
    currentSession: {
      sessionId: generateSessionId(),
      startTime: Date.now(),
      currentPage: window.location.pathname,
    },
  };
};

const profile = initVisitorProfile();
localStorage.setItem("visitor_profile", JSON.stringify(profile));

class PageTracker {
  constructor() {
    this.pagePath = window.location.pathname;
    this.startTime = Date.now();
    this.scrollDepth = 0;
    this.initializePage();
  }

  initializePage() {
    const profile = getVisitorProfile();

    // Create or update page data
    if (!profile.behavior.pages[this.pagePath]) {
      profile.behavior.pages[this.pagePath] = {
        path: this.pagePath,
        firstVisit: new Date().toISOString(),
        visitCount: 1,
        totalTimeSpent: 0,
        maxScrollDepth: 0,
        sessions: [],
      };
      profile.behavior.uniquePagesViewed++;
    } else {
      profile.behavior.pages[this.pagePath].visitCount++;
    }

    profile.behavior.totalPageViews++;
    this.updateEngagement("pageView", 5);
    saveProfile(profile);
  }
}

// Listen for SPA navigation
let currentPath = window.location.pathname;
setInterval(() => {
  if (window.location.pathname !== currentPath) {
    currentPath = window.location.pathname;
    new PageTracker();
  }
}, 500);

const trackScrollDepth = () => {
  let maxScroll = 0;
  let ticking = false;

  const updateScroll = () => {
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    const scrollTop = window.pageYOffset;
    const scrollPercent = Math.round(
      (scrollTop / (documentHeight - windowHeight)) * 100
    );

    if (scrollPercent > maxScroll) {
      maxScroll = scrollPercent;

      // Award points at milestones
      [25, 50, 75, 100].forEach((milestone) => {
        if (scrollPercent >= milestone && maxScroll < milestone + 25) {
          const points = { 25: 2, 50: 3, 75: 5, 100: 7 };
          updateEngagement(`scroll${milestone}`, points[milestone]);
        }
      });
    }
    ticking = false;
  };

  window.addEventListener(
    "scroll",
    () => {
      if (!ticking) {
        window.requestAnimationFrame(updateScroll);
        ticking = true;
      }
    },
    { passive: true }
  );
};

class TimeTracker {
  constructor() {
    this.startTime = Date.now();
    this.totalTime = 0;
    this.isActive = true;
    this.setupTracking();
  }

  setupTracking() {
    // Track when tab loses/gains focus
    document.addEventListener("visibilitychange", () => {
      if (document.hidden) {
        this.pause();
      } else {
        this.resume();
      }
    });

    // Set up time milestones
    [30, 60, 120].forEach((seconds) => {
      setTimeout(() => {
        if (this.isActive) {
          const points = { 30: 3, 60: 5, 120: 10 };
          updateEngagement(`time${seconds}s`, points[seconds]);
        }
      }, seconds * 1000);
    });

    // Update time every 10 seconds
    setInterval(() => {
      if (this.isActive) {
        this.updateTimeSpent();
      }
    }, 10000);
  }

  updateTimeSpent() {
    const profile = getVisitorProfile();
    const delta = Math.floor((Date.now() - this.startTime) / 1000);

    profile.behavior.totalTimeSpent += delta;
    profile.behavior.pages[window.location.pathname].totalTimeSpent += delta;

    saveProfile(profile);
    this.startTime = Date.now();
  }
}

// Track tool usage
const trackToolUsage = (toolName, data = {}) => {
  const profile = getVisitorProfile();

  if (!profile.behavior.toolsUsed.includes(toolName)) {
    profile.behavior.toolsUsed.push(toolName);
  }

  updateEngagement("toolUsed", 15);

  // Store calculation results if applicable
  if (data.calculation) {
    profile.behavior.calculations = profile.behavior.calculations || [];
    profile.behavior.calculations.push({
      tool: toolName,
      result: data.result,
      timestamp: new Date().toISOString(),
    });
    updateEngagement("calculationPerformed", 20);
  }

  saveProfile(profile);
};

// Track code copying (high intent for developers)
document.addEventListener("copy", () => {
  const selection = window.getSelection();
  if (selection?.anchorNode?.parentElement?.closest("pre, code")) {
    updateEngagement("codeBlockCopy", 10);
    trackAction("code_copied", {
      snippet: selection.toString().substring(0, 100),
    });
  }
});

// Track contact page visits and form interactions
if (window.location.pathname.includes("/contact")) {
  updateEngagement("contactPageVisit", 50);

  // Track form field interactions
  document.querySelectorAll("input, textarea").forEach((field) => {
    field.addEventListener("focus", () => {
      updateEngagement("formInteraction", 5);
    });
  });
}

const SCORING_CONFIG = {
  events: {
    pageView: 5,
    scroll25: 2,
    scroll50: 3,
    scroll75: 5,
    scroll100: 7,
    time30s: 3,
    time60s: 5,
    time120s: 10,
    linkClick: 2,
    codeBlockCopy: 10,
    toolUsed: 15,
    calculationPerformed: 20,
    contactPageVisit: 50,
    formInteraction: 5,
    bookingInitiated: 100,
  },
  thresholds: {
    cold: 0,
    warm: 1000,
    hot: 2500,
    qualified: 5000,
  },
};

const updateEngagement = (eventType, customPoints = null) => {
  const profile = getVisitorProfile();
  const points = customPoints || SCORING_CONFIG.events[eventType] || 0;

  profile.engagement.score += points;

  // Update engagement level
  const { score } = profile.engagement;
  const previousLevel = profile.engagement.level;

  if (score >= SCORING_CONFIG.thresholds.qualified) {
    profile.engagement.level = "qualified";
  } else if (score >= SCORING_CONFIG.thresholds.hot) {
    profile.engagement.level = "hot";
  } else if (score >= SCORING_CONFIG.thresholds.warm) {
    profile.engagement.level = "warm";
  } else {
    profile.engagement.level = "cold";
  }

  // Trigger notifications on level change
  if (previousLevel !== profile.engagement.level) {
    onEngagementLevelChange(profile);
  }

  saveProfile(profile);
  return profile;
};

const detectEngagementSignals = (profile) => {
  const signals = [];

  // Page engagement patterns
  if (profile.behavior.uniquePagesViewed >= 3) {
    signals.push("multi_page_visitor");
  }
  if (profile.behavior.uniquePagesViewed >= 5) {
    signals.push("deep_explorer");
  }

  // Time investment
  if (profile.behavior.totalTimeSpent >= 300) {
    signals.push("high_time_investment");
  }
  const avgTimePerPage =
    profile.behavior.totalTimeSpent / profile.behavior.totalPageViews;
  if (avgTimePerPage >= 60) {
    signals.push("engaged_reader");
  }

  // Content depth
  const deepPages = Object.values(profile.behavior.pages).filter(
    (page) => page.maxScrollDepth >= 75
  );
  if (deepPages.length >= 3) {
    signals.push("deep_content_consumer");
  }

  // Tool engagement
  if (profile.behavior.toolsUsed.length > 0) {
    signals.push("tool_user");
  }

  // High-intent pages
  const pageKeys = Object.keys(profile.behavior.pages);
  if (pageKeys.some((p) => p.includes("/pricing"))) {
    signals.push("price_aware");
  }
  if (pageKeys.some((p) => p.includes("/contact"))) {
    signals.push("contact_visitor");
  }
  if (pageKeys.some((p) => p.includes("/case-studies"))) {
    signals.push("case_study_reader");
  }

  profile.engagement.signals = [...new Set(signals)];
  return signals;
};

const notifyQualifiedLead = async (profile) => {
  // Get top pages by time spent
  const topPages = Object.values(profile.behavior.pages)
    .sort((a, b) => b.totalTimeSpent - a.totalTimeSpent)
    .slice(0, 5)
    .map((p) => ({
      path: p.path,
      time: p.totalTimeSpent,
      depth: p.maxScrollDepth,
    }));

  const leadData = {
    visitorId: profile.visitorId,
    score: profile.engagement.score,
    level: profile.engagement.level,
    signals: profile.engagement.signals,
    stats: {
      pagesViewed: profile.behavior.uniquePagesViewed,
      totalTime: Math.floor(profile.behavior.totalTimeSpent / 60),
      toolsUsed: profile.behavior.toolsUsed,
    },
    topPages,
    timestamp: new Date().toISOString(),
  };

  // Send to your webhook endpoint
  try {
    await fetch("/api/qualified-lead", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(leadData),
    });
  } catch (error) {
    console.error("Failed to notify about qualified lead:", error);
  }

  // Also track in Google Analytics if available
  if (window.gtag) {
    window.gtag("event", "qualified_lead", {
      value: profile.engagement.score,
      engagement_level: profile.engagement.level,
      signals: profile.engagement.signals.join(","),
    });
  }
};

// Expose API for debugging and testing
window.LeadTracker = {
  // Get current profile
  getProfile: () => getVisitorProfile(),

  // Get specific page data
  getPageData: (path) => {
    const profile = getVisitorProfile();
    return profile.behavior.pages[path || window.location.pathname];
  },

  // Manually track events
  trackEvent: (eventName, data) => {
    updateEngagement(eventName);
    console.log(`Event tracked: ${eventName}`, data);
  },

  // Reset tracking data
  reset: () => {
    localStorage.removeItem("visitor_profile");
    console.log("Tracking data reset");
    location.reload();
  },

  // Enable debug mode
  enableDebug: () => {
    window.LEAD_TRACKER_DEBUG = true;
    console.log("Debug mode enabled");
    console.log("Current profile:", getVisitorProfile());
  },

  // Test scoring
  testScoring: () => {
    const testEvents = ["pageView", "scroll50", "time60s", "toolUsed"];
    testEvents.forEach((event) => {
      updateEngagement(event);
      console.log(`Added ${SCORING_CONFIG.events[event]} points for ${event}`);
    });
    console.log("New score:", getVisitorProfile().engagement.score);
  },
};

// When a visitor becomes qualified
if (profile.engagement.score >= 5000) {
  // Trigger N8N webhook
  fetch("https://your-n8n.com/webhook/qualified-lead", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      visitorId: profile.visitorId,
      score: profile.engagement.score,
      behaviors: Array.from(profile.behaviors),
      topPages: profile.topPages,
      timestamp: new Date().toISOString(),
    }),
  });
}

// Use engagement velocity to predict conversion
const engagementVelocity = {
  calculate(profile) {
    const timeElapsed = Date.now() - new Date(profile.firstVisit);
    const velocityScore = profile.engagement.score / (timeElapsed / 1000 / 60);

    // High velocity = hot lead
    if (velocityScore > 10) return "high-intent";
    if (velocityScore > 5) return "exploring";
    return "browsing";
  },
};