@akson/cortex-analytics-react 2.0.0 → 2.1.0

package/README.md

@@ -23,36 +23,37 @@ npm install @akson/cortex-analytics-react
 ### 1. Setup Provider
 
 ```tsx
-import React from 'react';
-import { AnalyticsProvider, type AnalyticsConfig } from '@akson/cortex-analytics-react';
-import { LEAD_GENERATION_EVENTS } from '@akson/cortex-api-shared/events';
+import React from "react";
+import {
+  AnalyticsProvider,
+  type AnalyticsConfig,
+} from "@akson/cortex-analytics-react";
+import { LEAD_GENERATION_EVENTS } from "@akson/cortex-utilities/events";
 
 const analyticsConfig: AnalyticsConfig = {
   platforms: {
     gtm: {
-      containerId: 'GTM-XXXXXXX',
+      containerId: "GTM-XXXXXXX",
       workspaceId: 40,
     },
     posthog: {
-      apiKey: 'phc_your_key',
-      host: 'https://app.posthog.com',
+      apiKey: "phc_your_key",
+      host: "https://app.posthog.com",
     },
     ga4: {
-      measurementId: 'G-XXXXXXXXXX',
+      measurementId: "G-XXXXXXXXXX",
     },
   },
   conversions: {
-    [LEAD_GENERATION_EVENTS.LEAD_FORM_SUBMITTED]: 'CONVERSION_LABEL_1',
-    [LEAD_GENERATION_EVENTS.LEAD_WHATSAPP_CONTACT]: 'CONVERSION_LABEL_2',
+    [LEAD_GENERATION_EVENTS.LEAD_FORM_SUBMITTED]: "CONVERSION_LABEL_1",
+    [LEAD_GENERATION_EVENTS.LEAD_WHATSAPP_CONTACT]: "CONVERSION_LABEL_2",
   },
-  debug: process.env.NODE_ENV === 'development',
+  debug: process.env.NODE_ENV === "development",
 };
 
 export default function App({ children }) {
   return (
-    <AnalyticsProvider config={analyticsConfig}>
-      {children}
-    </AnalyticsProvider>
+    <AnalyticsProvider config={analyticsConfig}>{children}</AnalyticsProvider>
   );
 }
 ```
@@ -60,8 +61,11 @@ export default function App({ children }) {
 ### 2. Use Analytics Hooks
 
 ```tsx
-import React from 'react';
-import { useAnalytics, LEAD_GENERATION_EVENTS } from '@akson/cortex-analytics-react';
+import React from "react";
+import {
+  useAnalytics,
+  LEAD_GENERATION_EVENTS,
+} from "@akson/cortex-analytics-react";
 
 export function ContactForm() {
   const analytics = useAnalytics();
@@ -69,97 +73,99 @@ export function ContactForm() {
   const handleSubmit = (formData: any) => {
     // Track standardized lead event
     analytics.track(LEAD_GENERATION_EVENTS.LEAD_FORM_SUBMITTED, {
-      form_type: 'contact',
-      source: 'header',
+      form_type: "contact",
+      source: "header",
       lead_score: 100,
     });
   };
 
-  return (
-    <form onSubmit={handleSubmit}>
-      {/* Your form */}
-    </form>
-  );
+  return <form onSubmit={handleSubmit}>{/* Your form */}</form>;
 }
 ```
 
 ## Available Hooks
 
 ### `useAnalytics()`
+
 Core analytics hook with full tracking capabilities.
 
 ```tsx
-import { useAnalytics } from '@akson/cortex-analytics-react';
+import { useAnalytics } from "@akson/cortex-analytics-react";
 
 function Component() {
   const analytics = useAnalytics();
-  
+
   // Basic tracking
-  analytics.track('custom_event', { property: 'value' });
-  analytics.trackPageView('/page', 'Page Title');
-  analytics.trackInteraction('button', 'click', 'header_cta');
-  
+  analytics.track("custom_event", { property: "value" });
+  analytics.trackPageView("/page", "Page Title");
+  analytics.trackInteraction("button", "click", "header_cta");
+
   // User identification
-  analytics.identify('user123', { email: 'user@example.com' });
-  analytics.sendUserData({ email: 'user@example.com', phone: '+1234567890' });
-  
+  analytics.identify("user123", { email: "user@example.com" });
+  analytics.sendUserData({ email: "user@example.com", phone: "+1234567890" });
+
   // Session utilities
   const sessionId = analytics.getSessionId();
   const funnelPath = analytics.getFunnelPath();
   const timeInFunnel = analytics.getTimeInFunnel();
-  
+
   return <div>...</div>;
 }
 ```
 
 ### `useFunnelTracking()`
+
 Specialized hook for funnel analysis.
 
 ```tsx
-import { useFunnelTracking } from '@akson/cortex-analytics-react';
+import { useFunnelTracking } from "@akson/cortex-analytics-react";
 
 function OrderForm() {
   const funnel = useFunnelTracking();
-  
+
   const handleStepComplete = (step: string) => {
     funnel.trackStage(step, {
       completion_time: 30,
-      source: 'organic',
+      source: "organic",
     });
   };
-  
+
   const handleAbandonment = () => {
-    funnel.trackAbandonment('step_2', 'form_error');
+    funnel.trackAbandonment("step_2", "form_error");
   };
-  
+
   const handleConversion = () => {
-    funnel.trackConversion('order', 149.90, {
-      product_type: 'custom_badge',
-      currency: 'CHF',
+    funnel.trackConversion("order", 149.9, {
+      product_type: "custom_badge",
+      currency: "CHF",
     });
   };
-  
+
   return <div>...</div>;
 }
 ```
 
 ### `useLeadTracking()`
+
 Hook for lead generation scenarios.
 
 ```tsx
-import { useLeadTracking, LEAD_GENERATION_EVENTS } from '@akson/cortex-analytics-react';
+import {
+  useLeadTracking,
+  LEAD_GENERATION_EVENTS,
+} from "@akson/cortex-analytics-react";
 
 function LeadCapture() {
   const lead = useLeadTracking();
-  
+
   const handleFormSubmit = (userData: any) => {
     // Track the lead event
     lead.trackLead(LEAD_GENERATION_EVENTS.LEAD_FORM_SUBMITTED, {
       lead_score: 100,
-      source: 'landing_page',
-      form_type: 'quote_request',
+      source: "landing_page",
+      form_type: "quote_request",
     });
-    
+
     // Send user data for enhanced conversions
     lead.sendUserData({
       email: userData.email,
@@ -167,33 +173,37 @@ function LeadCapture() {
       firstName: userData.firstName,
     });
   };
-  
+
   return <div>...</div>;
 }
 ```
 
 ### `useEcommerceTracking()`
+
 Hook for e-commerce events.
 
 ```tsx
-import { useEcommerceTracking, ECOMMERCE_EVENTS } from '@akson/cortex-analytics-react';
+import {
+  useEcommerceTracking,
+  ECOMMERCE_EVENTS,
+} from "@akson/cortex-analytics-react";
 
 function ProductPage() {
   const ecommerce = useEcommerceTracking();
-  
+
   const handlePurchase = (orderData: any) => {
     ecommerce.trackEcommerce(ECOMMERCE_EVENTS.PURCHASE, {
       value: orderData.total,
-      currency: 'CHF',
+      currency: "CHF",
       transaction_id: orderData.id,
-      items: orderData.items.map(item => ({
+      items: orderData.items.map((item) => ({
         item_name: item.name,
         price: item.price,
         quantity: item.quantity,
       })),
     });
   };
-  
+
   return <div>...</div>;
 }
 ```
@@ -243,24 +253,27 @@ interface FunnelConfig {
 
 ## Standardized Events
 
-The package uses standardized events from `@akson/cortex-api-shared`:
+The package uses standardized events from `@akson/cortex-utilities`:
 
 ```typescript
-import { LEAD_GENERATION_EVENTS, ECOMMERCE_EVENTS } from '@akson/cortex-analytics-react';
+import {
+  LEAD_GENERATION_EVENTS,
+  ECOMMERCE_EVENTS,
+} from "@akson/cortex-analytics-react";
 
 // Lead generation events (scored 1-100)
-LEAD_GENERATION_EVENTS.LEAD_PAGE_VIEW           // Score: 5
-LEAD_GENERATION_EVENTS.LEAD_CONTENT_VIEW        // Score: 15
-LEAD_GENERATION_EVENTS.LEAD_INQUIRY_STARTED     // Score: 40
-LEAD_GENERATION_EVENTS.LEAD_CONTACT_INFO        // Score: 60
-LEAD_GENERATION_EVENTS.LEAD_WHATSAPP_CONTACT    // Score: 85
-LEAD_GENERATION_EVENTS.LEAD_FORM_SUBMITTED      // Score: 100
+LEAD_GENERATION_EVENTS.LEAD_PAGE_VIEW; // Score: 5
+LEAD_GENERATION_EVENTS.LEAD_CONTENT_VIEW; // Score: 15
+LEAD_GENERATION_EVENTS.LEAD_INQUIRY_STARTED; // Score: 40
+LEAD_GENERATION_EVENTS.LEAD_CONTACT_INFO; // Score: 60
+LEAD_GENERATION_EVENTS.LEAD_WHATSAPP_CONTACT; // Score: 85
+LEAD_GENERATION_EVENTS.LEAD_FORM_SUBMITTED; // Score: 100
 
 // E-commerce events (with monetary values)
-ECOMMERCE_EVENTS.VIEW_ITEM        // Product views
-ECOMMERCE_EVENTS.ADD_TO_CART      // Cart additions  
-ECOMMERCE_EVENTS.BEGIN_CHECKOUT   // Checkout started
-ECOMMERCE_EVENTS.PURCHASE         // Completed transactions
+ECOMMERCE_EVENTS.VIEW_ITEM; // Product views
+ECOMMERCE_EVENTS.ADD_TO_CART; // Cart additions
+ECOMMERCE_EVENTS.BEGIN_CHECKOUT; // Checkout started
+ECOMMERCE_EVENTS.PURCHASE; // Completed transactions
 ```
 
 ## Migration from Landing Analytics
@@ -269,16 +282,19 @@ If migrating from the landing page analytics system:
 
 ```tsx
 // OLD: Landing-specific analytics
-import { Analytics, FUNNEL_STAGES } from '@/app/lib/analytics';
+import { Analytics, FUNNEL_STAGES } from "@/app/lib/analytics";
 
 // NEW: @akson/cortex-analytics-react
-import { useAnalytics, LEAD_GENERATION_EVENTS } from '@akson/cortex-analytics-react';
+import {
+  useAnalytics,
+  LEAD_GENERATION_EVENTS,
+} from "@akson/cortex-analytics-react";
 
 function Component() {
   const analytics = useAnalytics();
-  
+
   // OLD: Analytics.trackStage(FUNNEL_STAGES.FORM_SUBMITTED)
-  // NEW: 
+  // NEW:
   analytics.track(LEAD_GENERATION_EVENTS.LEAD_FORM_SUBMITTED, {
     lead_score: 100,
   });
@@ -317,14 +333,16 @@ The package follows a layered architecture:
 ## Dependencies
 
 ### Peer Dependencies
+
 - `react ^18.0.0`
 - `react-dom ^18.0.0`
 
 ### Dependencies
-- `@akson/cortex-api-shared` - Standardized event definitions
-- `@akson/cortex-api-gtm` - GTM API client
-- `@akson/cortex-api-posthog` - PostHog API client
+
+- `@akson/cortex-utilities` - Standardized event definitions
+- `@akson/cortex-gtm` - GTM API client
+- `@akson/cortex-posthog` - PostHog API client
 
 ## License
 
-MIT
+MIT