@zoyth/simple-site-framework 1.0.0

package/dist/client.js

@@ -0,0 +1,135 @@
+'use client';
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.ts
+var client_exports = {};
+__export(client_exports, {
+  AnalyticsTracker: () => AnalyticsTracker,
+  getABTestVariant: () => getABTestVariant,
+  trackABTestEvent: () => trackABTestEvent
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/components/AnalyticsTracker.tsx
+var import_react = require("react");
+var import_navigation = require("next/navigation");
+
+// src/lib/analytics.ts
+function pushToDataLayer(data) {
+  if (typeof window === "undefined") return;
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push(data);
+  if (process.env.NODE_ENV === "development") {
+    console.log("[Analytics]", data);
+  }
+}
+function trackPageView(pagePath, pageTitle) {
+  pushToDataLayer({
+    event: "page_view",
+    page_path: pagePath,
+    page_title: pageTitle
+  });
+}
+function trackABTestEvent(testId, variant, eventName, metadata) {
+  pushToDataLayer({
+    event: "ab_test_event",
+    event_category: "ab_test",
+    event_label: `${testId}_${variant}_${eventName}`,
+    test_id: testId,
+    variant,
+    test_event: eventName,
+    ...metadata
+  });
+}
+function trackScrollDepth(percentage, pagePath) {
+  pushToDataLayer({
+    event: "scroll_depth",
+    event_category: "engagement",
+    event_label: `${percentage}%`,
+    scroll_percentage: percentage,
+    page_path: pagePath
+  });
+}
+
+// src/components/AnalyticsTracker.tsx
+function AnalyticsTracker() {
+  if (typeof window === "undefined" && typeof document === "undefined") {
+    if (process.env.NODE_ENV !== "production") {
+      console.error(
+        `AnalyticsTracker: This component requires browser APIs and cannot run in edge runtime or SSR. Import from "simple-site-framework/client" and ensure it's only used in client components.`
+      );
+    }
+    return null;
+  }
+  const pathname = (0, import_navigation.usePathname)();
+  const scrollTracked = (0, import_react.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react.useEffect)(() => {
+    if (pathname) {
+      trackPageView(pathname, document.title);
+      scrollTracked.current.clear();
+    }
+  }, [pathname]);
+  (0, import_react.useEffect)(() => {
+    const handleScroll = () => {
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+      const scrollTop = window.scrollY;
+      const scrollPercent = scrollTop / (documentHeight - windowHeight) * 100;
+      const milestones = [25, 50, 75, 100];
+      for (const milestone of milestones) {
+        if (scrollPercent >= milestone && !scrollTracked.current.has(milestone)) {
+          scrollTracked.current.add(milestone);
+          trackScrollDepth(milestone, pathname || "/");
+        }
+      }
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [pathname]);
+  return null;
+}
+
+// src/lib/ab-test.ts
+function getABTestVariant(config) {
+  if (typeof window === "undefined") {
+    return "A";
+  }
+  const storageKey = `ab-test-${config.testId}`;
+  const stored = localStorage.getItem(storageKey);
+  if (stored === "A" || stored === "B") {
+    return stored;
+  }
+  const totalWeight = config.variants.A.weight + config.variants.B.weight;
+  const random = Math.random() * totalWeight;
+  const variant = random < config.variants.A.weight ? "A" : "B";
+  localStorage.setItem(storageKey, variant);
+  return variant;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnalyticsTracker,
+  getABTestVariant,
+  trackABTestEvent
+});
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/client.ts","../src/components/AnalyticsTracker.tsx","../src/lib/analytics.ts","../src/lib/ab-test.ts"],"sourcesContent":["// ABOUTME: Client-only exports for browser/React Server Components\n// ABOUTME: Import from 'simple-site-framework/client' for client components\n\n'use client';\n\n// Client-only components that use browser APIs or React hooks\nexport { AnalyticsTracker } from './components/AnalyticsTracker';\n\n// A/B testing utilities (client-only - use localStorage and window)\nexport { getABTestVariant } from './lib/ab-test';\nexport type { ABTestVariant, ABTestConfig } from './lib/ab-test';\n\n// Analytics utilities\nexport { trackABTestEvent } from './lib/analytics';\n\n// Re-export type for convenience\nexport type { AnalyticsEvent } from './lib/analytics';\n","// ABOUTME: Client-side analytics tracker for page views and scroll depth\n// ABOUTME: Automatically tracks page views and scroll milestones\n'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { trackPageView, trackScrollDepth } from '../lib/analytics';\n\n/**\n * AnalyticsTracker - Client-only component for tracking page views and scroll depth\n *\n * ⚠️ Edge Runtime Warning:\n * This component uses browser-only APIs (window, document) and Next.js client hooks (usePathname).\n * Do NOT import from main index in middleware or edge functions.\n * Use: import { AnalyticsTracker } from 'simple-site-framework/client'\n */\nexport function AnalyticsTracker() {\n  // Edge-safe check: fail fast with clear error if used in wrong context\n  if (typeof window === 'undefined' && typeof document === 'undefined') {\n    if (process.env.NODE_ENV !== 'production') {\n      console.error(\n        'AnalyticsTracker: This component requires browser APIs and cannot run in edge runtime or SSR. ' +\n        'Import from \"simple-site-framework/client\" and ensure it\\'s only used in client components.'\n      );\n    }\n    return null;\n  }\n\n  const pathname = usePathname();\n  const scrollTracked = useRef<Set<number>>(new Set());\n\n  // Track page views on route change\n  useEffect(() => {\n    if (pathname) {\n      trackPageView(pathname, document.title);\n      // Reset scroll tracking for new page\n      scrollTracked.current.clear();\n    }\n  }, [pathname]);\n\n  // Track scroll depth\n  useEffect(() => {\n    const handleScroll = () => {\n      const windowHeight = window.innerHeight;\n      const documentHeight = document.documentElement.scrollHeight;\n      const scrollTop = window.scrollY;\n      const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;\n\n      const milestones = [25, 50, 75, 100] as const;\n\n      for (const milestone of milestones) {\n        if (scrollPercent >= milestone && !scrollTracked.current.has(milestone)) {\n          scrollTracked.current.add(milestone);\n          trackScrollDepth(milestone, pathname || '/');\n        }\n      }\n    };\n\n    // Add scroll listener\n    window.addEventListener('scroll', handleScroll, { passive: true });\n\n    // Check immediately in case page loads already scrolled\n    handleScroll();\n\n    return () => {\n      window.removeEventListener('scroll', handleScroll);\n    };\n  }, [pathname]);\n\n  return null;\n}\n","// ABOUTME: Comprehensive analytics tracking utility for GA4 via GTM\n// ABOUTME: Provides type-safe event tracking for conversions, CTAs, forms, and user interactions\n\nimport type { AnalyticsEvent } from '../types/analytics';\n\ndeclare global {\n  interface Window {\n    dataLayer: unknown[];\n  }\n}\n\n// Re-export types for convenience\nexport type * from '../types/analytics';\n\n/**\n * Push event to Google Tag Manager dataLayer\n */\nfunction pushToDataLayer(data: AnalyticsEvent) {\n  if (typeof window === 'undefined') return;\n\n  window.dataLayer = window.dataLayer || [];\n  window.dataLayer.push(data);\n\n  // Log in development\n  if (process.env.NODE_ENV === 'development') {\n    console.log('[Analytics]', data);\n  }\n}\n\n/**\n * Generic event tracking function\n * Use this for custom events not covered by specific tracking functions\n *\n * @param eventName - Name of the event\n * @param properties - Additional event properties\n *\n * @example\n * ```typescript\n * trackEvent('button_click', {\n *   button_text: 'Sign Up',\n *   button_location: 'hero',\n *   button_variant: 'primary'\n * });\n * ```\n */\nexport function trackEvent(eventName: string, properties?: Record<string, unknown>) {\n  pushToDataLayer({\n    event: eventName,\n    ...properties,\n  });\n}\n\n/**\n * Track CTA click events\n * @param ctaLocation - Where the CTA appears (e.g., 'hero', 'pricing', 'mobile_sticky')\n * @param ctaText - The text on the CTA button\n * @param ctaType - Type of CTA (e.g., 'signup', 'trial', 'contact')\n */\nexport function trackCTAClick(\n  ctaLocation: string,\n  ctaText: string,\n  ctaType: 'signup' | 'trial' | 'contact' | 'download' | 'other' = 'other'\n) {\n  pushToDataLayer({\n    event: 'cta_click',\n    event_category: 'cta',\n    event_label: `${ctaLocation}_${ctaType}`,\n    cta_location: ctaLocation,\n    cta_text: ctaText,\n    cta_type: ctaType,\n  });\n}\n\n/**\n * Track form interactions\n * @param formName - Identifier for the form\n * @param action - Form action (start, submit, error, abandon)\n */\nexport function trackFormEvent(\n  formName: string,\n  action: 'start' | 'submit' | 'error' | 'abandon',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: `form_${action}`,\n    event_category: 'form',\n    event_label: formName,\n    form_name: formName,\n    form_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track page view (for SPAs and custom tracking)\n * @param pagePath - The page path\n * @param pageTitle - The page title\n */\nexport function trackPageView(pagePath: string, pageTitle: string) {\n  pushToDataLayer({\n    event: 'page_view',\n    page_path: pagePath,\n    page_title: pageTitle,\n  });\n}\n\n/**\n * Track pricing page interactions\n * @param action - Type of interaction\n */\nexport function trackPricingEvent(\n  action: 'view' | 'calculate' | 'plan_select' | 'currency_change',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'pricing_interaction',\n    event_category: 'engagement',\n    event_label: action,\n    pricing_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track feature page engagement\n * @param featureName - Name of the feature being viewed\n * @param action - Type of engagement\n */\nexport function trackFeatureEngagement(\n  featureName: string,\n  action: 'view' | 'video_play' | 'video_complete' | 'cta_click',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'feature_engagement',\n    event_category: 'engagement',\n    event_label: `${featureName}_${action}`,\n    feature_name: featureName,\n    feature_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track resource downloads\n * @param resourceName - Name of the resource\n * @param resourceType - Type of resource (pdf, video, etc.)\n */\nexport function trackResourceDownload(\n  resourceName: string,\n  resourceType: string\n) {\n  pushToDataLayer({\n    event: 'resource_download',\n    event_category: 'engagement',\n    event_label: resourceName,\n    resource_name: resourceName,\n    resource_type: resourceType,\n  });\n}\n\n/**\n * Track video interactions\n * @param videoTitle - Title of the video\n * @param action - Video action\n */\nexport function trackVideoEvent(\n  videoTitle: string,\n  action: 'play' | 'pause' | 'complete' | '25%' | '50%' | '75%',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'video_interaction',\n    event_category: 'engagement',\n    event_label: `${videoTitle}_${action}`,\n    video_title: videoTitle,\n    video_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track navigation events\n * @param linkText - Text of the link clicked\n * @param linkUrl - URL of the link\n * @param linkLocation - Where the link appears (header, footer, content)\n */\nexport function trackNavigation(\n  linkText: string,\n  linkUrl: string,\n  linkLocation: 'header' | 'footer' | 'content' | 'mobile'\n) {\n  pushToDataLayer({\n    event: 'navigation_click',\n    event_category: 'navigation',\n    event_label: linkText,\n    link_text: linkText,\n    link_url: linkUrl,\n    link_location: linkLocation,\n  });\n}\n\n/**\n * Track A/B test variant assignment and events\n * @param testId - ID of the A/B test\n * @param variant - Variant assigned (A or B)\n * @param eventName - Name of the event\n */\nexport function trackABTestEvent(\n  testId: string,\n  variant: 'A' | 'B',\n  eventName: string,\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'ab_test_event',\n    event_category: 'ab_test',\n    event_label: `${testId}_${variant}_${eventName}`,\n    test_id: testId,\n    variant: variant,\n    test_event: eventName,\n    ...metadata,\n  });\n}\n\n/**\n * Track conversion events (trial signups, purchases, etc.)\n * @param conversionType - Type of conversion\n * @param value - Monetary value (optional)\n */\nexport function trackConversion(\n  conversionType: 'trial_signup' | 'contact' | 'newsletter' | 'other',\n  value?: number,\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'conversion',\n    event_category: 'conversion',\n    event_label: conversionType,\n    conversion_type: conversionType,\n    value: value,\n    ...metadata,\n  });\n}\n\n/**\n * Track scroll depth\n * @param percentage - Scroll depth percentage (25, 50, 75, 100)\n * @param pagePath - The page path\n */\nexport function trackScrollDepth(\n  percentage: 25 | 50 | 75 | 100,\n  pagePath: string\n) {\n  pushToDataLayer({\n    event: 'scroll_depth',\n    event_category: 'engagement',\n    event_label: `${percentage}%`,\n    scroll_percentage: percentage,\n    page_path: pagePath,\n  });\n}\n\n/**\n * Track search events\n * @param searchTerm - The search term\n * @param resultCount - Number of results (optional)\n */\nexport function trackSearch(searchTerm: string, resultCount?: number) {\n  pushToDataLayer({\n    event: 'search',\n    event_category: 'engagement',\n    event_label: searchTerm,\n    search_term: searchTerm,\n    result_count: resultCount,\n  });\n}\n\n/**\n * Track outbound link clicks\n * @param url - The external URL\n * @param linkText - Text of the link\n */\nexport function trackOutboundLink(url: string, linkText: string) {\n  pushToDataLayer({\n    event: 'outbound_link',\n    event_category: 'navigation',\n    event_label: url,\n    outbound_url: url,\n    link_text: linkText,\n  });\n}\n\n/**\n * Track error events\n * @param errorType - Type of error\n * @param errorMessage - Error message or description\n */\nexport function trackError(errorType: string, errorMessage: string) {\n  pushToDataLayer({\n    event: 'error',\n    event_category: 'engagement',\n    event_label: errorType,\n    error_type: errorType,\n    error_message: errorMessage,\n  });\n}\n","// ABOUTME: A/B testing utility for CTA variations\n// ABOUTME: Uses localStorage to persist user's assigned variant\n// ABOUTME: Integrated with analytics tracking\n\n'use client';\n\nimport { trackABTestEvent as analyticsTrackABTestEvent } from './analytics';\n\nexport type ABTestVariant = 'A' | 'B';\n\nexport interface ABTestConfig {\n  testId: string;\n  variants: {\n    A: { weight: number };\n    B: { weight: number };\n  };\n}\n\n/**\n * Get the assigned variant for a test, or assign one if not already assigned\n * Uses localStorage to persist the assignment across sessions\n */\nexport function getABTestVariant(config: ABTestConfig): ABTestVariant {\n  if (typeof window === 'undefined') {\n    // Server-side: return default variant\n    return 'A';\n  }\n\n  const storageKey = `ab-test-${config.testId}`;\n  const stored = localStorage.getItem(storageKey);\n\n  if (stored === 'A' || stored === 'B') {\n    return stored;\n  }\n\n  // Assign new variant based on weights\n  const totalWeight = config.variants.A.weight + config.variants.B.weight;\n  const random = Math.random() * totalWeight;\n  const variant: ABTestVariant = random < config.variants.A.weight ? 'A' : 'B';\n\n  localStorage.setItem(storageKey, variant);\n  return variant;\n}\n\n/**\n * Track A/B test event with integrated analytics\n * @deprecated Import trackABTestEvent directly from analytics instead\n */\nfunction trackABTestEvent(\n  testId: string,\n  variant: ABTestVariant,\n  eventName: string,\n  metadata?: Record<string, unknown>\n) {\n  if (typeof window === 'undefined') return;\n\n  // Track via analytics library\n  analyticsTrackABTestEvent(testId, variant, eventName, metadata);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACIA,mBAAkC;AAClC,wBAA4B;;;ACY5B,SAAS,gBAAgB,MAAsB;AAC7C,MAAI,OAAO,WAAW,YAAa;AAEnC,SAAO,YAAY,OAAO,aAAa,CAAC;AACxC,SAAO,UAAU,KAAK,IAAI;AAG1B,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,YAAQ,IAAI,eAAe,IAAI;AAAA,EACjC;AACF;AAuEO,SAAS,cAAc,UAAkB,WAAmB;AACjE,kBAAgB;AAAA,IACd,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,EACd,CAAC;AACH;AAwGO,SAAS,iBACd,QACA,SACA,WACA,UACA;AACA,kBAAgB;AAAA,IACd,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa,GAAG,MAAM,IAAI,OAAO,IAAI,SAAS;AAAA,IAC9C,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,CAAC;AACH;AA2BO,SAAS,iBACd,YACA,UACA;AACA,kBAAgB;AAAA,IACd,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa,GAAG,UAAU;AAAA,IAC1B,mBAAmB;AAAA,IACnB,WAAW;AAAA,EACb,CAAC;AACH;;;ADrPO,SAAS,mBAAmB;AAEjC,MAAI,OAAO,WAAW,eAAe,OAAO,aAAa,aAAa;AACpE,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,cAAQ;AAAA,QACN;AAAA,MAEF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAW,+BAAY;AAC7B,QAAM,oBAAgB,qBAAoB,oBAAI,IAAI,CAAC;AAGnD,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,oBAAc,UAAU,SAAS,KAAK;AAEtC,oBAAc,QAAQ,MAAM;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAGb,8BAAU,MAAM;AACd,UAAM,eAAe,MAAM;AACzB,YAAM,eAAe,OAAO;AAC5B,YAAM,iBAAiB,SAAS,gBAAgB;AAChD,YAAM,YAAY,OAAO;AACzB,YAAM,gBAAiB,aAAa,iBAAiB,gBAAiB;AAEtE,YAAM,aAAa,CAAC,IAAI,IAAI,IAAI,GAAG;AAEnC,iBAAW,aAAa,YAAY;AAClC,YAAI,iBAAiB,aAAa,CAAC,cAAc,QAAQ,IAAI,SAAS,GAAG;AACvE,wBAAc,QAAQ,IAAI,SAAS;AACnC,2BAAiB,WAAW,YAAY,GAAG;AAAA,QAC7C;AAAA,MACF;AAAA,IACF;AAGA,WAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;AAGjE,iBAAa;AAEb,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;;;AEhDO,SAAS,iBAAiB,QAAqC;AACpE,MAAI,OAAO,WAAW,aAAa;AAEjC,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,WAAW,OAAO,MAAM;AAC3C,QAAM,SAAS,aAAa,QAAQ,UAAU;AAE9C,MAAI,WAAW,OAAO,WAAW,KAAK;AACpC,WAAO;AAAA,EACT;AAGA,QAAM,cAAc,OAAO,SAAS,EAAE,SAAS,OAAO,SAAS,EAAE;AACjE,QAAM,SAAS,KAAK,OAAO,IAAI;AAC/B,QAAM,UAAyB,SAAS,OAAO,SAAS,EAAE,SAAS,MAAM;AAEzE,eAAa,QAAQ,YAAY,OAAO;AACxC,SAAO;AACT;","names":[]}

package/dist/client.mjs

@@ -0,0 +1,107 @@
+'use client';
+"use client";
+
+// src/components/AnalyticsTracker.tsx
+import { useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
+
+// src/lib/analytics.ts
+function pushToDataLayer(data) {
+  if (typeof window === "undefined") return;
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push(data);
+  if (process.env.NODE_ENV === "development") {
+    console.log("[Analytics]", data);
+  }
+}
+function trackPageView(pagePath, pageTitle) {
+  pushToDataLayer({
+    event: "page_view",
+    page_path: pagePath,
+    page_title: pageTitle
+  });
+}
+function trackABTestEvent(testId, variant, eventName, metadata) {
+  pushToDataLayer({
+    event: "ab_test_event",
+    event_category: "ab_test",
+    event_label: `${testId}_${variant}_${eventName}`,
+    test_id: testId,
+    variant,
+    test_event: eventName,
+    ...metadata
+  });
+}
+function trackScrollDepth(percentage, pagePath) {
+  pushToDataLayer({
+    event: "scroll_depth",
+    event_category: "engagement",
+    event_label: `${percentage}%`,
+    scroll_percentage: percentage,
+    page_path: pagePath
+  });
+}
+
+// src/components/AnalyticsTracker.tsx
+function AnalyticsTracker() {
+  if (typeof window === "undefined" && typeof document === "undefined") {
+    if (process.env.NODE_ENV !== "production") {
+      console.error(
+        `AnalyticsTracker: This component requires browser APIs and cannot run in edge runtime or SSR. Import from "simple-site-framework/client" and ensure it's only used in client components.`
+      );
+    }
+    return null;
+  }
+  const pathname = usePathname();
+  const scrollTracked = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (pathname) {
+      trackPageView(pathname, document.title);
+      scrollTracked.current.clear();
+    }
+  }, [pathname]);
+  useEffect(() => {
+    const handleScroll = () => {
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+      const scrollTop = window.scrollY;
+      const scrollPercent = scrollTop / (documentHeight - windowHeight) * 100;
+      const milestones = [25, 50, 75, 100];
+      for (const milestone of milestones) {
+        if (scrollPercent >= milestone && !scrollTracked.current.has(milestone)) {
+          scrollTracked.current.add(milestone);
+          trackScrollDepth(milestone, pathname || "/");
+        }
+      }
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [pathname]);
+  return null;
+}
+
+// src/lib/ab-test.ts
+function getABTestVariant(config) {
+  if (typeof window === "undefined") {
+    return "A";
+  }
+  const storageKey = `ab-test-${config.testId}`;
+  const stored = localStorage.getItem(storageKey);
+  if (stored === "A" || stored === "B") {
+    return stored;
+  }
+  const totalWeight = config.variants.A.weight + config.variants.B.weight;
+  const random = Math.random() * totalWeight;
+  const variant = random < config.variants.A.weight ? "A" : "B";
+  localStorage.setItem(storageKey, variant);
+  return variant;
+}
+export {
+  AnalyticsTracker,
+  getABTestVariant,
+  trackABTestEvent
+};
+//# sourceMappingURL=client.mjs.map

package/dist/client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnalyticsTracker.tsx","../src/lib/analytics.ts","../src/lib/ab-test.ts"],"sourcesContent":["// ABOUTME: Client-side analytics tracker for page views and scroll depth\n// ABOUTME: Automatically tracks page views and scroll milestones\n'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { trackPageView, trackScrollDepth } from '../lib/analytics';\n\n/**\n * AnalyticsTracker - Client-only component for tracking page views and scroll depth\n *\n * ⚠️ Edge Runtime Warning:\n * This component uses browser-only APIs (window, document) and Next.js client hooks (usePathname).\n * Do NOT import from main index in middleware or edge functions.\n * Use: import { AnalyticsTracker } from 'simple-site-framework/client'\n */\nexport function AnalyticsTracker() {\n  // Edge-safe check: fail fast with clear error if used in wrong context\n  if (typeof window === 'undefined' && typeof document === 'undefined') {\n    if (process.env.NODE_ENV !== 'production') {\n      console.error(\n        'AnalyticsTracker: This component requires browser APIs and cannot run in edge runtime or SSR. ' +\n        'Import from \"simple-site-framework/client\" and ensure it\\'s only used in client components.'\n      );\n    }\n    return null;\n  }\n\n  const pathname = usePathname();\n  const scrollTracked = useRef<Set<number>>(new Set());\n\n  // Track page views on route change\n  useEffect(() => {\n    if (pathname) {\n      trackPageView(pathname, document.title);\n      // Reset scroll tracking for new page\n      scrollTracked.current.clear();\n    }\n  }, [pathname]);\n\n  // Track scroll depth\n  useEffect(() => {\n    const handleScroll = () => {\n      const windowHeight = window.innerHeight;\n      const documentHeight = document.documentElement.scrollHeight;\n      const scrollTop = window.scrollY;\n      const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;\n\n      const milestones = [25, 50, 75, 100] as const;\n\n      for (const milestone of milestones) {\n        if (scrollPercent >= milestone && !scrollTracked.current.has(milestone)) {\n          scrollTracked.current.add(milestone);\n          trackScrollDepth(milestone, pathname || '/');\n        }\n      }\n    };\n\n    // Add scroll listener\n    window.addEventListener('scroll', handleScroll, { passive: true });\n\n    // Check immediately in case page loads already scrolled\n    handleScroll();\n\n    return () => {\n      window.removeEventListener('scroll', handleScroll);\n    };\n  }, [pathname]);\n\n  return null;\n}\n","// ABOUTME: Comprehensive analytics tracking utility for GA4 via GTM\n// ABOUTME: Provides type-safe event tracking for conversions, CTAs, forms, and user interactions\n\nimport type { AnalyticsEvent } from '../types/analytics';\n\ndeclare global {\n  interface Window {\n    dataLayer: unknown[];\n  }\n}\n\n// Re-export types for convenience\nexport type * from '../types/analytics';\n\n/**\n * Push event to Google Tag Manager dataLayer\n */\nfunction pushToDataLayer(data: AnalyticsEvent) {\n  if (typeof window === 'undefined') return;\n\n  window.dataLayer = window.dataLayer || [];\n  window.dataLayer.push(data);\n\n  // Log in development\n  if (process.env.NODE_ENV === 'development') {\n    console.log('[Analytics]', data);\n  }\n}\n\n/**\n * Generic event tracking function\n * Use this for custom events not covered by specific tracking functions\n *\n * @param eventName - Name of the event\n * @param properties - Additional event properties\n *\n * @example\n * ```typescript\n * trackEvent('button_click', {\n *   button_text: 'Sign Up',\n *   button_location: 'hero',\n *   button_variant: 'primary'\n * });\n * ```\n */\nexport function trackEvent(eventName: string, properties?: Record<string, unknown>) {\n  pushToDataLayer({\n    event: eventName,\n    ...properties,\n  });\n}\n\n/**\n * Track CTA click events\n * @param ctaLocation - Where the CTA appears (e.g., 'hero', 'pricing', 'mobile_sticky')\n * @param ctaText - The text on the CTA button\n * @param ctaType - Type of CTA (e.g., 'signup', 'trial', 'contact')\n */\nexport function trackCTAClick(\n  ctaLocation: string,\n  ctaText: string,\n  ctaType: 'signup' | 'trial' | 'contact' | 'download' | 'other' = 'other'\n) {\n  pushToDataLayer({\n    event: 'cta_click',\n    event_category: 'cta',\n    event_label: `${ctaLocation}_${ctaType}`,\n    cta_location: ctaLocation,\n    cta_text: ctaText,\n    cta_type: ctaType,\n  });\n}\n\n/**\n * Track form interactions\n * @param formName - Identifier for the form\n * @param action - Form action (start, submit, error, abandon)\n */\nexport function trackFormEvent(\n  formName: string,\n  action: 'start' | 'submit' | 'error' | 'abandon',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: `form_${action}`,\n    event_category: 'form',\n    event_label: formName,\n    form_name: formName,\n    form_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track page view (for SPAs and custom tracking)\n * @param pagePath - The page path\n * @param pageTitle - The page title\n */\nexport function trackPageView(pagePath: string, pageTitle: string) {\n  pushToDataLayer({\n    event: 'page_view',\n    page_path: pagePath,\n    page_title: pageTitle,\n  });\n}\n\n/**\n * Track pricing page interactions\n * @param action - Type of interaction\n */\nexport function trackPricingEvent(\n  action: 'view' | 'calculate' | 'plan_select' | 'currency_change',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'pricing_interaction',\n    event_category: 'engagement',\n    event_label: action,\n    pricing_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track feature page engagement\n * @param featureName - Name of the feature being viewed\n * @param action - Type of engagement\n */\nexport function trackFeatureEngagement(\n  featureName: string,\n  action: 'view' | 'video_play' | 'video_complete' | 'cta_click',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'feature_engagement',\n    event_category: 'engagement',\n    event_label: `${featureName}_${action}`,\n    feature_name: featureName,\n    feature_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track resource downloads\n * @param resourceName - Name of the resource\n * @param resourceType - Type of resource (pdf, video, etc.)\n */\nexport function trackResourceDownload(\n  resourceName: string,\n  resourceType: string\n) {\n  pushToDataLayer({\n    event: 'resource_download',\n    event_category: 'engagement',\n    event_label: resourceName,\n    resource_name: resourceName,\n    resource_type: resourceType,\n  });\n}\n\n/**\n * Track video interactions\n * @param videoTitle - Title of the video\n * @param action - Video action\n */\nexport function trackVideoEvent(\n  videoTitle: string,\n  action: 'play' | 'pause' | 'complete' | '25%' | '50%' | '75%',\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'video_interaction',\n    event_category: 'engagement',\n    event_label: `${videoTitle}_${action}`,\n    video_title: videoTitle,\n    video_action: action,\n    ...metadata,\n  });\n}\n\n/**\n * Track navigation events\n * @param linkText - Text of the link clicked\n * @param linkUrl - URL of the link\n * @param linkLocation - Where the link appears (header, footer, content)\n */\nexport function trackNavigation(\n  linkText: string,\n  linkUrl: string,\n  linkLocation: 'header' | 'footer' | 'content' | 'mobile'\n) {\n  pushToDataLayer({\n    event: 'navigation_click',\n    event_category: 'navigation',\n    event_label: linkText,\n    link_text: linkText,\n    link_url: linkUrl,\n    link_location: linkLocation,\n  });\n}\n\n/**\n * Track A/B test variant assignment and events\n * @param testId - ID of the A/B test\n * @param variant - Variant assigned (A or B)\n * @param eventName - Name of the event\n */\nexport function trackABTestEvent(\n  testId: string,\n  variant: 'A' | 'B',\n  eventName: string,\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'ab_test_event',\n    event_category: 'ab_test',\n    event_label: `${testId}_${variant}_${eventName}`,\n    test_id: testId,\n    variant: variant,\n    test_event: eventName,\n    ...metadata,\n  });\n}\n\n/**\n * Track conversion events (trial signups, purchases, etc.)\n * @param conversionType - Type of conversion\n * @param value - Monetary value (optional)\n */\nexport function trackConversion(\n  conversionType: 'trial_signup' | 'contact' | 'newsletter' | 'other',\n  value?: number,\n  metadata?: Record<string, unknown>\n) {\n  pushToDataLayer({\n    event: 'conversion',\n    event_category: 'conversion',\n    event_label: conversionType,\n    conversion_type: conversionType,\n    value: value,\n    ...metadata,\n  });\n}\n\n/**\n * Track scroll depth\n * @param percentage - Scroll depth percentage (25, 50, 75, 100)\n * @param pagePath - The page path\n */\nexport function trackScrollDepth(\n  percentage: 25 | 50 | 75 | 100,\n  pagePath: string\n) {\n  pushToDataLayer({\n    event: 'scroll_depth',\n    event_category: 'engagement',\n    event_label: `${percentage}%`,\n    scroll_percentage: percentage,\n    page_path: pagePath,\n  });\n}\n\n/**\n * Track search events\n * @param searchTerm - The search term\n * @param resultCount - Number of results (optional)\n */\nexport function trackSearch(searchTerm: string, resultCount?: number) {\n  pushToDataLayer({\n    event: 'search',\n    event_category: 'engagement',\n    event_label: searchTerm,\n    search_term: searchTerm,\n    result_count: resultCount,\n  });\n}\n\n/**\n * Track outbound link clicks\n * @param url - The external URL\n * @param linkText - Text of the link\n */\nexport function trackOutboundLink(url: string, linkText: string) {\n  pushToDataLayer({\n    event: 'outbound_link',\n    event_category: 'navigation',\n    event_label: url,\n    outbound_url: url,\n    link_text: linkText,\n  });\n}\n\n/**\n * Track error events\n * @param errorType - Type of error\n * @param errorMessage - Error message or description\n */\nexport function trackError(errorType: string, errorMessage: string) {\n  pushToDataLayer({\n    event: 'error',\n    event_category: 'engagement',\n    event_label: errorType,\n    error_type: errorType,\n    error_message: errorMessage,\n  });\n}\n","// ABOUTME: A/B testing utility for CTA variations\n// ABOUTME: Uses localStorage to persist user's assigned variant\n// ABOUTME: Integrated with analytics tracking\n\n'use client';\n\nimport { trackABTestEvent as analyticsTrackABTestEvent } from './analytics';\n\nexport type ABTestVariant = 'A' | 'B';\n\nexport interface ABTestConfig {\n  testId: string;\n  variants: {\n    A: { weight: number };\n    B: { weight: number };\n  };\n}\n\n/**\n * Get the assigned variant for a test, or assign one if not already assigned\n * Uses localStorage to persist the assignment across sessions\n */\nexport function getABTestVariant(config: ABTestConfig): ABTestVariant {\n  if (typeof window === 'undefined') {\n    // Server-side: return default variant\n    return 'A';\n  }\n\n  const storageKey = `ab-test-${config.testId}`;\n  const stored = localStorage.getItem(storageKey);\n\n  if (stored === 'A' || stored === 'B') {\n    return stored;\n  }\n\n  // Assign new variant based on weights\n  const totalWeight = config.variants.A.weight + config.variants.B.weight;\n  const random = Math.random() * totalWeight;\n  const variant: ABTestVariant = random < config.variants.A.weight ? 'A' : 'B';\n\n  localStorage.setItem(storageKey, variant);\n  return variant;\n}\n\n/**\n * Track A/B test event with integrated analytics\n * @deprecated Import trackABTestEvent directly from analytics instead\n */\nfunction trackABTestEvent(\n  testId: string,\n  variant: ABTestVariant,\n  eventName: string,\n  metadata?: Record<string, unknown>\n) {\n  if (typeof window === 'undefined') return;\n\n  // Track via analytics library\n  analyticsTrackABTestEvent(testId, variant, eventName, metadata);\n}\n"],"mappings":";;;;AAIA,SAAS,WAAW,cAAc;AAClC,SAAS,mBAAmB;;;ACY5B,SAAS,gBAAgB,MAAsB;AAC7C,MAAI,OAAO,WAAW,YAAa;AAEnC,SAAO,YAAY,OAAO,aAAa,CAAC;AACxC,SAAO,UAAU,KAAK,IAAI;AAG1B,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,YAAQ,IAAI,eAAe,IAAI;AAAA,EACjC;AACF;AAuEO,SAAS,cAAc,UAAkB,WAAmB;AACjE,kBAAgB;AAAA,IACd,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,EACd,CAAC;AACH;AAwGO,SAAS,iBACd,QACA,SACA,WACA,UACA;AACA,kBAAgB;AAAA,IACd,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa,GAAG,MAAM,IAAI,OAAO,IAAI,SAAS;AAAA,IAC9C,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,CAAC;AACH;AA2BO,SAAS,iBACd,YACA,UACA;AACA,kBAAgB;AAAA,IACd,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,aAAa,GAAG,UAAU;AAAA,IAC1B,mBAAmB;AAAA,IACnB,WAAW;AAAA,EACb,CAAC;AACH;;;ADrPO,SAAS,mBAAmB;AAEjC,MAAI,OAAO,WAAW,eAAe,OAAO,aAAa,aAAa;AACpE,QAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,cAAQ;AAAA,QACN;AAAA,MAEF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,OAAoB,oBAAI,IAAI,CAAC;AAGnD,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,oBAAc,UAAU,SAAS,KAAK;AAEtC,oBAAc,QAAQ,MAAM;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,UAAM,eAAe,MAAM;AACzB,YAAM,eAAe,OAAO;AAC5B,YAAM,iBAAiB,SAAS,gBAAgB;AAChD,YAAM,YAAY,OAAO;AACzB,YAAM,gBAAiB,aAAa,iBAAiB,gBAAiB;AAEtE,YAAM,aAAa,CAAC,IAAI,IAAI,IAAI,GAAG;AAEnC,iBAAW,aAAa,YAAY;AAClC,YAAI,iBAAiB,aAAa,CAAC,cAAc,QAAQ,IAAI,SAAS,GAAG;AACvE,wBAAc,QAAQ,IAAI,SAAS;AACnC,2BAAiB,WAAW,YAAY,GAAG;AAAA,QAC7C;AAAA,MACF;AAAA,IACF;AAGA,WAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;AAGjE,iBAAa;AAEb,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;;;AEhDO,SAAS,iBAAiB,QAAqC;AACpE,MAAI,OAAO,WAAW,aAAa;AAEjC,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,WAAW,OAAO,MAAM;AAC3C,QAAM,SAAS,aAAa,QAAQ,UAAU;AAE9C,MAAI,WAAW,OAAO,WAAW,KAAK;AACpC,WAAO;AAAA,EACT;AAGA,QAAM,cAAc,OAAO,SAAS,EAAE,SAAS,OAAO,SAAS,EAAE;AACjE,QAAM,SAAS,KAAK,OAAO,IAAI;AAC/B,QAAM,UAAyB,SAAS,OAAO,SAAS,EAAE,SAAS,MAAM;AAEzE,eAAa,QAAQ,YAAY,OAAO;AACxC,SAAO;AACT;","names":[]}