@metodokorexmk/tracking 1.0.0

package/dist/react/index.js

@@ -0,0 +1,862 @@
+import { useRef, useEffect, useState } from 'react';
+import ReactGA from 'react-ga4';
+
+// src/react/use-landing-tracking.ts
+var currentConfig = {};
+var cachedUserId = null;
+var cachedUserName = null;
+var captureUTMParams = () => {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  const utmParams = {};
+  let hasParams = false;
+  const utmKeys = ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"];
+  for (const key of utmKeys) {
+    const value = params.get(key);
+    if (value) {
+      utmParams[key] = value;
+      hasParams = true;
+    }
+  }
+  return hasParams ? utmParams : null;
+};
+var captureUserIdFromURL = () => {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  const userId = params.get("user_id") || params.get("userId");
+  if (userId) {
+    cachedUserId = userId;
+    try {
+      localStorage.setItem("tracking_user_id", userId);
+    } catch {
+    }
+  }
+  return userId;
+};
+var getUserName = () => {
+  if (typeof window === "undefined") return null;
+  const params = new URLSearchParams(window.location.search);
+  const fromUrl = params.get("user_name") || params.get("userName");
+  if (fromUrl) {
+    cachedUserName = fromUrl;
+    return fromUrl;
+  }
+  if (cachedUserName) return cachedUserName;
+  try {
+    const fromStorage = localStorage.getItem("tracking_user_name");
+    if (fromStorage) {
+      cachedUserName = fromStorage;
+      return fromStorage;
+    }
+    const userInfo = localStorage.getItem("userInfo");
+    if (userInfo) {
+      const parsed = JSON.parse(userInfo);
+      const name = parsed?.name || parsed?.userName || parsed?.fullName;
+      if (name) {
+        cachedUserName = name;
+        return name;
+      }
+    }
+  } catch {
+  }
+  return null;
+};
+var getUserId = () => {
+  if (cachedUserId) return cachedUserId;
+  if (typeof window === "undefined") return null;
+  try {
+    return localStorage.getItem("tracking_user_id");
+  } catch {
+    return null;
+  }
+};
+var trackPageView = (path) => {
+  if (typeof window === "undefined") return;
+  const userId = getUserId();
+  const utmParams = captureUTMParams();
+  let pageWithParams = path;
+  if (utmParams) {
+    const searchParams = new URLSearchParams();
+    Object.entries(utmParams).forEach(([key, value]) => {
+      if (value) searchParams.set(key, value);
+    });
+    const paramString = searchParams.toString();
+    if (paramString) {
+      pageWithParams = `${path}${path.includes("?") ? "&" : "?"}${paramString}`;
+    }
+  }
+  try {
+    ReactGA.send({
+      hitType: "pageview",
+      page: pageWithParams,
+      ...userId && { user_id: userId }
+    });
+  } catch {
+  }
+  try {
+    window.gtag?.("event", "page_view", {
+      page_path: pageWithParams,
+      page_title: document.title,
+      ...userId && { user_id: userId }
+    });
+  } catch {
+  }
+  if (currentConfig.debug) {
+    console.log(`[KorexTracking] PageView: ${pageWithParams}`, { userId });
+  }
+};
+var trackEvent = (category, action, label, value, additionalData) => {
+  if (typeof window === "undefined") return;
+  const userId = getUserId();
+  const userName = getUserName();
+  const eventData = {
+    event_category: category,
+    event_label: label || "",
+    ...value !== void 0 && { value },
+    ...userId && { user_id: userId },
+    ...userName && { user_name: userName },
+    timestamp: Date.now(),
+    ...additionalData
+  };
+  try {
+    window.gtag?.("event", action, eventData);
+  } catch {
+  }
+  try {
+    ReactGA.event({
+      category,
+      action,
+      label: label || void 0,
+      value: value || void 0,
+      ...userId && { user_id: userId }
+    });
+  } catch {
+  }
+  if (currentConfig.debug) {
+    console.log(`[KorexTracking] Event: ${category}/${action}`, eventData);
+  }
+};
+
+// src/core/gtm.ts
+var injectGTMScript = (gtmId) => {
+  if (typeof window === "undefined") return;
+  if (!gtmId) return;
+  const existingScript = document.querySelector(`script[data-gtm-id="${gtmId}"]`);
+  if (existingScript) return;
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    "gtm.start": (/* @__PURE__ */ new Date()).getTime(),
+    event: "gtm.js"
+  });
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = `https://www.googletagmanager.com/gtm.js?id=${gtmId}`;
+  script.setAttribute("data-gtm-id", gtmId);
+  const firstScript = document.getElementsByTagName("script")[0];
+  if (firstScript?.parentNode) {
+    firstScript.parentNode.insertBefore(script, firstScript);
+  } else {
+    document.head.appendChild(script);
+  }
+  if (document.body) {
+    const noscript = document.createElement("noscript");
+    const iframe = document.createElement("iframe");
+    iframe.src = `https://www.googletagmanager.com/ns.html?id=${gtmId}`;
+    iframe.height = "0";
+    iframe.width = "0";
+    iframe.style.display = "none";
+    iframe.style.visibility = "hidden";
+    noscript.appendChild(iframe);
+    document.body.insertBefore(noscript, document.body.firstChild);
+  }
+};
+var pushToDataLayer = (eventName, data) => {
+  if (typeof window === "undefined") return;
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    event: eventName,
+    ...data
+  });
+};
+
+// src/trackers/events.ts
+var trackCTAClick = (buttonName, section, additionalData) => {
+  trackEvent("CTA", "click", buttonName, void 0, {
+    button_name: buttonName,
+    section,
+    ...additionalData
+  });
+};
+var trackFormStart = (formName) => {
+  trackEvent("Form", "started", formName, void 0, {
+    form_name: formName,
+    timestamp: Date.now()
+  });
+};
+var trackFormSubmit = (formName, success, additionalData) => {
+  trackEvent("Form", "submit_success" , formName, void 0, {
+    form_name: formName,
+    success,
+    ...additionalData
+  });
+};
+var trackTimeInSection = (sectionName, seconds) => {
+  if (seconds < 3) return;
+  trackEvent("Engagement", "time_in_section", sectionName, Math.round(seconds), {
+    section_name: sectionName,
+    time_seconds: Math.round(seconds)
+  });
+};
+
+// src/orchestrator/landing-tracker.ts
+var LandingTracker = class {
+  constructor() {
+    this.config = null;
+    this.isInitialized = false;
+    this.sessionStartTime = 0;
+    this.scrollMilestonesReached = /* @__PURE__ */ new Set();
+    this.clicks = [];
+    this.sectionTimers = /* @__PURE__ */ new Map();
+    this.observers = [];
+    this.listeners = [];
+  }
+  /**
+   * Inicializa el tracking de la landing con la configuración dada.
+   */
+  init(config) {
+    if (typeof window === "undefined") return;
+    if (this.isInitialized) return;
+    this.config = {
+      enableScrollTracking: true,
+      enableCTATracking: true,
+      enableTimeTracking: true,
+      enableSectionTracking: true,
+      enableFormTracking: true,
+      enableHeatmap: false,
+      eventSuffix: "",
+      ...config
+    };
+    this.isInitialized = true;
+    this.sessionStartTime = Date.now();
+    this.captureInitialData();
+    trackPageView(this.config.pagePath);
+    if (this.config.gtmId) {
+      injectGTMScript(this.config.gtmId);
+      pushToDataLayer(this.getEventName("page_load"), {
+        page_path: this.config.pagePath,
+        page_title: this.config.pageName,
+        timestamp: Date.now()
+      });
+    }
+    if (this.config.enableScrollTracking) this.initScrollTracking();
+    if (this.config.enableCTATracking) this.initCTATracking();
+    if (this.config.enableTimeTracking) this.initTimeTracking();
+    if (this.config.enableSectionTracking) this.initSectionTracking();
+    if (this.config.enableFormTracking) this.initFormTracking();
+    if (this.config.enableHeatmap) this.initClickHeatmap();
+    this.trackSessionStart();
+  }
+  /**
+   * Destruye el tracker y limpia todos los observers y listeners.
+   */
+  destroy() {
+    this.observers.forEach((obs) => obs.disconnect());
+    this.observers = [];
+    this.listeners.forEach(({ target, event, handler }) => {
+      target.removeEventListener(event, handler);
+    });
+    this.listeners = [];
+    this.isInitialized = false;
+    this.config = null;
+    this.scrollMilestonesReached.clear();
+    this.clicks = [];
+    this.sectionTimers.clear();
+  }
+  // ====================================
+  // MÉTODOS PÚBLICOS DE TRACKING
+  // ====================================
+  /** Trackear click en un CTA */
+  trackCTAClick(buttonName, section, additionalData) {
+    trackCTAClick(buttonName, section, additionalData);
+    this.pushGTMEvent("cta_click", { button_text: buttonName, section });
+  }
+  /** Trackear conversión */
+  trackConversion(type, value, additionalData) {
+    trackEvent("Conversion", type, void 0, value, additionalData);
+    this.pushGTMEvent("conversion", { conversion_type: type, value });
+  }
+  /** Trackear click en FAQs */
+  trackFAQExpand(question, index) {
+    trackEvent("FAQ", "expand", question, index);
+  }
+  /** Trackear click social */
+  trackSocialClick(platform, action) {
+    trackEvent("Social", "click", platform, void 0, { social_action: action });
+  }
+  /** Trackear click en imagen */
+  trackImageClick(imageName, section) {
+    trackEvent("Engagement", "image_click", imageName, void 0, { section });
+  }
+  /** Trackear scroll a sección */
+  trackScrollTo(section) {
+    trackEvent("Navigation", "scroll_to", section);
+  }
+  /** Trackear share */
+  trackShare(platform, content) {
+    trackEvent("Share", "click", platform, void 0, { share_content: content });
+  }
+  /** Trackear descarga */
+  trackDownload(fileName, fileType) {
+    trackEvent("Download", "click", fileName, void 0, { file_type: fileType });
+  }
+  /** Obtener datos de la sesión actual */
+  getSessionData() {
+    return {
+      duration: Math.round((Date.now() - this.sessionStartTime) / 1e3),
+      clicks: this.clicks.length,
+      scrollMilestones: Array.from(this.scrollMilestonesReached)
+    };
+  }
+  // ====================================
+  // MÉTODOS PRIVADOS
+  // ====================================
+  captureInitialData() {
+    const utmParams = captureUTMParams();
+    const userId = captureUserIdFromURL();
+    const userName = getUserName();
+    const prefix = this.config.pagePath.replace("/", "");
+    try {
+      localStorage.setItem(`${prefix}_entry_time`, (/* @__PURE__ */ new Date()).toISOString());
+      if (utmParams) {
+        localStorage.setItem(`${prefix}_utm_params`, JSON.stringify(utmParams));
+      }
+      if (userId) {
+        localStorage.setItem(`${prefix}_user_id`, userId);
+      }
+    } catch {
+    }
+    trackEvent("Landing", "page_load", this.config.pageName, void 0, {
+      page_path: this.config.pagePath,
+      user_id: userId,
+      user_name: userName,
+      utm_params: utmParams,
+      timestamp: Date.now()
+    });
+  }
+  trackSessionStart() {
+    trackEvent("Session", "start", this.config.pageName, void 0, {
+      page_path: this.config.pagePath,
+      timestamp: Date.now()
+    });
+  }
+  getEventName(baseName) {
+    const suffix = this.config?.eventSuffix || "";
+    return suffix ? `${baseName}${suffix}` : baseName;
+  }
+  pushGTMEvent(eventName, data) {
+    if (this.config?.gtmId) {
+      pushToDataLayer(this.getEventName(eventName), {
+        page_path: this.config.pagePath,
+        ...data
+      });
+    }
+  }
+  addListener(target, event, handler) {
+    target.addEventListener(event, handler);
+    this.listeners.push({ target, event, handler });
+  }
+  // --- Scroll Tracking ---
+  initScrollTracking() {
+    let scrollTimeout;
+    const handler = () => {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(() => {
+        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+        if (scrollHeight <= 0) return;
+        const pct = Math.round(window.scrollY / scrollHeight * 100);
+        for (const milestone of [25, 50, 75, 100]) {
+          if (pct >= milestone && !this.scrollMilestonesReached.has(milestone)) {
+            this.scrollMilestonesReached.add(milestone);
+            trackEvent("Scroll", "milestone", `${milestone}%`, milestone, {
+              page_path: this.config.pagePath,
+              scroll_percentage: milestone
+            });
+            this.pushGTMEvent("scroll_milestone", { scroll_percentage: milestone });
+          }
+        }
+      }, 100);
+    };
+    this.addListener(window, "scroll", handler);
+  }
+  // --- CTA Tracking ---
+  initCTATracking() {
+    setTimeout(() => {
+      const ctaButtons = document.querySelectorAll('button, a[href*="#"], [data-cta]');
+      ctaButtons.forEach((button) => {
+        const handler = () => {
+          const el = button;
+          const text = el.textContent?.trim() || el.getAttribute("data-cta") || "Unknown CTA";
+          const section = el.closest("section")?.id || el.closest("[data-section]")?.getAttribute("data-section") || "unknown";
+          this.trackCTAClick(text, section);
+        };
+        this.addListener(button, "click", handler);
+      });
+    }, 2e3);
+  }
+  // --- Time Tracking (page exit) ---
+  initTimeTracking() {
+    const handler = () => {
+      const duration = Math.round((Date.now() - this.sessionStartTime) / 1e3);
+      trackEvent("Session", "end", this.config.pageName, duration, {
+        session_duration: duration,
+        page_path: this.config.pagePath,
+        exit_timestamp: Date.now()
+      });
+      this.pushGTMEvent("page_exit", {
+        session_duration: duration,
+        exit_timestamp: Date.now()
+      });
+    };
+    this.addListener(window, "beforeunload", handler);
+  }
+  // --- Section Dwell Time (IntersectionObserver) ---
+  initSectionTracking() {
+    const sectionEntryTimes = /* @__PURE__ */ new Map();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const sectionId = entry.target.id || entry.target.getAttribute("data-section") || "unknown";
+          if (entry.isIntersecting) {
+            sectionEntryTimes.set(sectionId, Date.now());
+          } else {
+            const entryTime = sectionEntryTimes.get(sectionId);
+            if (entryTime) {
+              const seconds = (Date.now() - entryTime) / 1e3;
+              trackTimeInSection(sectionId, seconds);
+              sectionEntryTimes.delete(sectionId);
+            }
+          }
+        });
+      },
+      { threshold: 0.5 }
+    );
+    setTimeout(() => {
+      const sections = document.querySelectorAll("section, [data-section]");
+      sections.forEach((section) => observer.observe(section));
+    }, 1e3);
+    this.observers.push(observer);
+  }
+  // --- Form Auto-Tracking ---
+  initFormTracking() {
+    setTimeout(() => {
+      const forms = document.querySelectorAll("form");
+      forms.forEach((form) => {
+        const formName = form.getAttribute("name") || form.id || "unknown-form";
+        let started = false;
+        const inputs = form.querySelectorAll("input, textarea, select");
+        inputs.forEach((input) => {
+          this.addListener(input, "focus", (() => {
+            if (!started) {
+              started = true;
+              trackFormStart(formName);
+            }
+          }));
+        });
+        this.addListener(form, "submit", ((_e) => {
+          trackFormSubmit(formName, true, {
+            page_path: this.config.pagePath
+          });
+          this.pushGTMEvent("form_submit", { form_name: formName });
+        }));
+      });
+    }, 2e3);
+  }
+  // --- Click Heatmap ---
+  initClickHeatmap() {
+    const handler = (e) => {
+      const mouseEvent = e;
+      const target = mouseEvent.target;
+      const clickData = {
+        x: mouseEvent.clientX,
+        y: mouseEvent.clientY,
+        element: target.tagName.toLowerCase(),
+        section: target.closest("section")?.id || "unknown",
+        timestamp: Date.now(),
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight
+      };
+      this.clicks.push(clickData);
+    };
+    this.addListener(document, "click", handler);
+  }
+};
+
+// src/react/use-landing-tracking.ts
+function useLandingPageTracking(config) {
+  const trackerRef = useRef(null);
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    const tracker = new LandingTracker();
+    tracker.init(config);
+    trackerRef.current = tracker;
+    return () => {
+      tracker.destroy();
+      trackerRef.current = null;
+    };
+  }, [config.pagePath]);
+  return trackerRef.current;
+}
+
+// src/trackers/video-tracker.ts
+var VideoTracker = class {
+  constructor() {
+    this.videos = /* @__PURE__ */ new Map();
+    this.watchTimeIntervals = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Inicializa el tracking para un video.
+   */
+  initVideo(videoId) {
+    if (this.videos.has(videoId)) return;
+    const state = {
+      videoId,
+      startTime: Date.now(),
+      totalWatchTime: 0,
+      playCount: 0,
+      pauseCount: 0,
+      seekCount: 0,
+      completionPercentage: 0,
+      lastPlayTimestamp: 0,
+      isPlaying: false,
+      currentTime: 0,
+      duration: 0,
+      pauseTimes: [],
+      seekEvents: [],
+      progressMilestones: /* @__PURE__ */ new Set(),
+      playbackSpeed: 1
+    };
+    this.videos.set(videoId, state);
+    trackEvent("Video", "init", videoId, void 0, {
+      video_id: videoId,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Tracking de evento play.
+   */
+  trackPlay(videoId, currentTime = 0) {
+    const state = this.getOrCreateState(videoId);
+    state.playCount++;
+    state.isPlaying = true;
+    state.lastPlayTimestamp = Date.now();
+    state.currentTime = currentTime;
+    this.startWatchTimeTracking(videoId);
+    trackEvent("Video", "play", videoId, void 0, {
+      video_id: videoId,
+      play_count: state.playCount,
+      current_time: Math.round(currentTime)
+    });
+  }
+  /**
+   * Tracking de evento pause.
+   */
+  trackPause(videoId, currentTime, duration) {
+    const state = this.getOrCreateState(videoId);
+    state.pauseCount++;
+    state.isPlaying = false;
+    state.currentTime = currentTime;
+    state.pauseTimes.push(currentTime);
+    if (duration) {
+      state.duration = duration;
+      state.completionPercentage = Math.round(currentTime / duration * 100);
+    }
+    this.stopWatchTimeTracking(videoId);
+    trackEvent("Video", "pause", videoId, void 0, {
+      video_id: videoId,
+      pause_count: state.pauseCount,
+      current_time: Math.round(currentTime),
+      completion_percentage: state.completionPercentage,
+      total_watch_time: Math.round(state.totalWatchTime)
+    });
+  }
+  /**
+   * Tracking de evento seek (saltar en el timeline).
+   */
+  trackSeek(videoId, fromTime, toTime) {
+    const state = this.getOrCreateState(videoId);
+    state.seekCount++;
+    state.seekEvents.push({ from: fromTime, to: toTime });
+    trackEvent("Video", "seek", videoId, void 0, {
+      video_id: videoId,
+      seek_count: state.seekCount,
+      from_time: Math.round(fromTime),
+      to_time: Math.round(toTime),
+      skip_duration: Math.round(toTime - fromTime)
+    });
+  }
+  /**
+   * Tracking de progreso (milestones: 25%, 50%, 75%).
+   */
+  trackProgress(videoId, percentage, currentTime) {
+    const state = this.getOrCreateState(videoId);
+    const milestone = Math.floor(percentage / 25) * 25;
+    if (milestone > 0 && milestone < 100 && !state.progressMilestones.has(milestone)) {
+      state.progressMilestones.add(milestone);
+      trackEvent("Video", "progress", videoId, milestone, {
+        video_id: videoId,
+        progress_percentage: milestone,
+        current_time: Math.round(currentTime),
+        total_watch_time: Math.round(state.totalWatchTime)
+      });
+    }
+  }
+  /**
+   * Tracking de completación del video (≥95%).
+   */
+  trackComplete(videoId, totalDuration) {
+    const state = this.getOrCreateState(videoId);
+    state.completionPercentage = 100;
+    state.duration = totalDuration;
+    this.stopWatchTimeTracking(videoId);
+    trackEvent("Video", "complete", videoId, void 0, {
+      video_id: videoId,
+      total_duration: Math.round(totalDuration),
+      total_watch_time: Math.round(state.totalWatchTime),
+      play_count: state.playCount,
+      pause_count: state.pauseCount,
+      seek_count: state.seekCount
+    });
+  }
+  /**
+   * Tracking de fin del video (evento ended nativo).
+   */
+  trackEnd(videoId) {
+    const state = this.getOrCreateState(videoId);
+    state.isPlaying = false;
+    this.stopWatchTimeTracking(videoId);
+    trackEvent("Video", "end", videoId, void 0, {
+      video_id: videoId,
+      total_watch_time: Math.round(state.totalWatchTime),
+      play_count: state.playCount
+    });
+  }
+  /**
+   * Tracking de cambio de velocidad de reproducción.
+   */
+  trackSpeedChange(videoId, speed) {
+    const state = this.getOrCreateState(videoId);
+    state.playbackSpeed = speed;
+    trackEvent("Video", "speed_change", videoId, void 0, {
+      video_id: videoId,
+      playback_speed: speed
+    });
+  }
+  /**
+   * Tracking de pantalla completa.
+   */
+  trackFullscreen(videoId, isFullscreen) {
+    trackEvent("Video", isFullscreen ? "fullscreen_enter" : "fullscreen_exit", videoId, void 0, {
+      video_id: videoId,
+      is_fullscreen: isFullscreen
+    });
+  }
+  /**
+   * Tracking de no interacción (el usuario está en la página pero no interactúa con el video).
+   */
+  trackNoInteraction(videoId, timeOnPage) {
+    trackEvent("Video", "no_interaction", videoId, void 0, {
+      video_id: videoId,
+      time_on_page: Math.round(timeOnPage)
+    });
+  }
+  /**
+   * Obtiene el estado actual de un video.
+   */
+  getState(videoId) {
+    return this.videos.get(videoId);
+  }
+  /**
+   * Limpia el tracking de un video específico.
+   */
+  cleanup(videoId) {
+    this.stopWatchTimeTracking(videoId);
+    this.videos.delete(videoId);
+  }
+  /**
+   * Limpia todo el tracking.
+   */
+  cleanupAll() {
+    for (const videoId of this.videos.keys()) {
+      this.stopWatchTimeTracking(videoId);
+    }
+    this.videos.clear();
+  }
+  // --- Métodos privados ---
+  getOrCreateState(videoId) {
+    if (!this.videos.has(videoId)) {
+      this.initVideo(videoId);
+    }
+    return this.videos.get(videoId);
+  }
+  startWatchTimeTracking(videoId) {
+    this.stopWatchTimeTracking(videoId);
+    const interval = setInterval(() => {
+      const state = this.videos.get(videoId);
+      if (state?.isPlaying) {
+        state.totalWatchTime += 1;
+      }
+    }, 1e3);
+    this.watchTimeIntervals.set(videoId, interval);
+  }
+  stopWatchTimeTracking(videoId) {
+    const interval = this.watchTimeIntervals.get(videoId);
+    if (interval) {
+      clearInterval(interval);
+      this.watchTimeIntervals.delete(videoId);
+    }
+  }
+};
+var videoTracker = new VideoTracker();
+
+// src/react/use-video-tracking.ts
+function useVideoTracking({ videoId, videoElement, onComplete, onProgress }) {
+  const [progress, setProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const milestonesRef = useRef(/* @__PURE__ */ new Set());
+  const noInteractionTimerRef = useRef(null);
+  useEffect(() => {
+    if (!videoElement) return;
+    videoTracker.initVideo(videoId);
+    const handlePlay = () => {
+      setIsPlaying(true);
+      videoTracker.trackPlay(videoId, videoElement.currentTime);
+      if (noInteractionTimerRef.current) {
+        clearTimeout(noInteractionTimerRef.current);
+      }
+    };
+    const handlePause = () => {
+      setIsPlaying(false);
+      videoTracker.trackPause(videoId, videoElement.currentTime, videoElement.duration);
+    };
+    const handleTimeUpdate = () => {
+      const ct = videoElement.currentTime;
+      const dur = videoElement.duration || 0;
+      const pct = dur > 0 ? Math.round(ct / dur * 100) : 0;
+      setCurrentTime(ct);
+      setDuration(dur);
+      setProgress(pct);
+      for (const milestone of [25, 50, 75]) {
+        if (pct >= milestone && !milestonesRef.current.has(milestone)) {
+          milestonesRef.current.add(milestone);
+          videoTracker.trackProgress(videoId, pct, ct);
+          onProgress?.(milestone);
+        }
+      }
+      if (pct >= 95 && !milestonesRef.current.has(100)) {
+        milestonesRef.current.add(100);
+        videoTracker.trackComplete(videoId, dur);
+        onComplete?.();
+      }
+    };
+    const handleSeeking = () => {
+      const state = videoTracker.getState(videoId);
+      if (state) {
+        videoTracker.trackSeek(videoId, state.currentTime, videoElement.currentTime);
+      }
+    };
+    const handleEnded = () => {
+      setIsPlaying(false);
+      videoTracker.trackEnd(videoId);
+    };
+    const handleRateChange = () => {
+      videoTracker.trackSpeedChange(videoId, videoElement.playbackRate);
+    };
+    videoElement.addEventListener("play", handlePlay);
+    videoElement.addEventListener("pause", handlePause);
+    videoElement.addEventListener("timeupdate", handleTimeUpdate);
+    videoElement.addEventListener("seeking", handleSeeking);
+    videoElement.addEventListener("ended", handleEnded);
+    videoElement.addEventListener("ratechange", handleRateChange);
+    noInteractionTimerRef.current = setTimeout(() => {
+      if (!videoElement.paused) return;
+      videoTracker.trackNoInteraction(videoId, 30);
+    }, 3e4);
+    return () => {
+      videoElement.removeEventListener("play", handlePlay);
+      videoElement.removeEventListener("pause", handlePause);
+      videoElement.removeEventListener("timeupdate", handleTimeUpdate);
+      videoElement.removeEventListener("seeking", handleSeeking);
+      videoElement.removeEventListener("ended", handleEnded);
+      videoElement.removeEventListener("ratechange", handleRateChange);
+      if (noInteractionTimerRef.current) {
+        clearTimeout(noInteractionTimerRef.current);
+      }
+      videoTracker.cleanup(videoId);
+    };
+  }, [videoId, videoElement, onComplete, onProgress]);
+  return { progress, isPlaying, currentTime, duration };
+}
+function useWistiaVideoTracking(mediaId) {
+  const [stats, setStats] = useState({
+    timeWatched: 0,
+    completed: false,
+    lastUpdate: Date.now()
+  });
+  const boundRef = useRef(false);
+  useEffect(() => {
+    if (!mediaId || boundRef.current) return;
+    const bindWistia = () => {
+      if (!window._wq) return false;
+      boundRef.current = true;
+      window._wq.push({
+        id: mediaId,
+        onReady: (video) => {
+          const v = video;
+          const update = () => {
+            const t = v.time();
+            const d = v.duration();
+            const pct = d > 0 ? Math.round(t / d * 100) : 0;
+            setStats({
+              timeWatched: Math.round(t),
+              completed: pct >= 95,
+              lastUpdate: Date.now()
+            });
+          };
+          v.bind("play", update);
+          v.bind("pause", update);
+          v.bind("secondchange", update);
+          v.bind("end", () => {
+            setStats({
+              timeWatched: Math.round(v.duration()),
+              completed: true,
+              lastUpdate: Date.now()
+            });
+          });
+        }
+      });
+      return true;
+    };
+    const interval = setInterval(() => {
+      if (bindWistia()) {
+        clearInterval(interval);
+      }
+    }, 100);
+    const timeout = setTimeout(() => clearInterval(interval), 15e3);
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
+  }, [mediaId]);
+  return {
+    stats,
+    isCompleted: stats.completed
+  };
+}
+
+export { useLandingPageTracking, useVideoTracking, useWistiaVideoTracking };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map