@dcl/hooks 0.0.5-20251118105707.commit-6f49aba → 0.0.6-20251118124437.commit-cdc6064

package/README.md

@@ -66,6 +66,341 @@ function BrowserInfo() {
 }
 ```
 
+### Analytics Hooks
+
+The package provides a set of hooks for analytics tracking using Segment. Here's how to use them:
+
+#### Setting up the AnalyticsProvider
+
+First, wrap your app with the AnalyticsProvider:
+
+```typescript
+import { AnalyticsProvider } from '@dcl/hooks'
+
+function App() {
+  return (
+    <AnalyticsProvider
+      writeKey="xyz1234"
+      userId="user-123" // Optional
+      traits={{ // Optional
+        name: 'John Doe',
+        email: 'john@example.com'
+      }}
+    >
+      <Main />
+    </AnalyticsProvider>
+  )
+}
+```
+
+#### Using the useAnalytics Hook
+
+The `useAnalytics` hook provides access to tracking functions:
+
+```typescript
+import { useAnalytics } from '@dcl/hooks'
+
+function MyComponent() {
+  const analytics = useAnalytics()
+
+  const handleButtonClick = () => {
+    if (analytics.isInitialized) {
+      // Track an event
+      analytics.track('Button Clicked', {
+        buttonId: 'submit',
+        timestamp: new Date().toISOString()
+      })
+
+      // Identify a user
+      analytics.identify('user-123', {
+        name: 'John Doe',
+        email: 'john@example.com'
+      })
+    }
+  }
+
+  return (
+    <button onClick={handleButtonClick}>
+      Click me
+    </button>
+  )
+}
+```
+
+#### Using the usePageTracking Hook
+
+The `usePageTracking` hook automatically tracks page views based on route changes:
+
+```typescript
+import { usePageTracking } from '@dcl/hooks'
+
+function MyPage() {
+  // Automatically tracks page view when route changes
+  usePageTracking()
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      {/* Your page content */}
+    </div>
+  )
+}
+```
+
+If you need to track additional page properties, you can use the `useAnalytics` hook directly:
+
+```typescript
+import { useAnalytics } from '@dcl/hooks'
+
+function MyPage() {
+  const analytics = useAnalytics()
+
+  useEffect(() => {
+    if (analytics.isInitialized) {
+      analytics.page('My Page', {
+        category: 'Content',
+        section: 'Main',
+        timestamp: new Date().toISOString()
+      })
+    }
+  }, [analytics])
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      {/* Your page content */}
+    </div>
+  )
+}
+```
+
+#### Complete Example
+
+Here's a complete example showing how to use all analytics features together:
+
+```typescript
+import { AnalyticsProvider, useAnalytics, usePageTracking } from '@dcl/hooks'
+
+function MyPage() {
+  // Track page views
+  usePageTracking()
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      <UserProfile />
+    </div>
+  )
+}
+
+function UserProfile() {
+  const analytics = useAnalytics()
+
+  const handleProfileUpdate = () => {
+    if (analytics.isInitialized) {
+      // Track profile update event
+      analytics.track('Profile Updated', {
+        timestamp: new Date().toISOString(),
+        updateType: 'information'
+      })
+
+      // Update user traits
+      analytics.identify('user-123', {
+        lastUpdated: new Date().toISOString()
+      })
+    }
+  }
+
+  return (
+    <button onClick={handleProfileUpdate}>
+      Update Profile
+    </button>
+  )
+}
+
+function App() {
+  return (
+    <AnalyticsProvider
+      writeKey="xyz1234"
+      userId="user-123"
+      traits={{
+        name: 'John Doe',
+        email: 'john@example.com'
+      }}
+    >
+      <MyPage />
+    </AnalyticsProvider>
+  )
+}
+```
+
+### Analytics Hooks
+
+The package provides a set of hooks for analytics tracking using Segment. Here's how to use them:
+
+#### Setting up the AnalyticsProvider
+
+First, wrap your app with the AnalyticsProvider:
+
+```typescript
+import { AnalyticsProvider } from '@dcl/hooks'
+
+function App() {
+  return (
+    <AnalyticsProvider
+      writeKey="xyz1234"
+      userId="user-123" // Optional
+      traits={{ // Optional
+        name: 'John Doe',
+        email: 'john@example.com'
+      }}
+    >
+      <Main />
+    </AnalyticsProvider>
+  )
+}
+```
+
+#### Using the useAnalytics Hook
+
+The `useAnalytics` hook provides access to tracking functions:
+
+```typescript
+import { useAnalytics } from '@dcl/hooks'
+
+function MyComponent() {
+  const analytics = useAnalytics()
+
+  const handleButtonClick = () => {
+    if (analytics.isInitialized) {
+      // Track an event
+      analytics.track('Button Clicked', {
+        buttonId: 'submit',
+        timestamp: new Date().toISOString()
+      })
+
+      // Identify a user
+      analytics.identify('user-123', {
+        name: 'John Doe',
+        email: 'john@example.com'
+      })
+    }
+  }
+
+  return (
+    <button onClick={handleButtonClick}>
+      Click me
+    </button>
+  )
+}
+```
+
+#### Using the usePageTracking Hook
+
+The `usePageTracking` hook automatically tracks page views based on route changes:
+
+```typescript
+import { usePageTracking } from '@dcl/hooks'
+
+function MyPage() {
+  // Automatically tracks page view when route changes
+  usePageTracking()
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      {/* Your page content */}
+    </div>
+  )
+}
+```
+
+If you need to track additional page properties, you can use the `useAnalytics` hook directly:
+
+```typescript
+import { useAnalytics } from '@dcl/hooks'
+
+function MyPage() {
+  const analytics = useAnalytics()
+
+  useEffect(() => {
+    if (analytics.isInitialized) {
+      analytics.page('My Page', {
+        category: 'Content',
+        section: 'Main',
+        timestamp: new Date().toISOString()
+      })
+    }
+  }, [analytics])
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      {/* Your page content */}
+    </div>
+  )
+}
+```
+
+#### Complete Example
+
+Here's a complete example showing how to use all analytics features together:
+
+```typescript
+import { AnalyticsProvider, useAnalytics, usePageTracking } from '@dcl/hooks'
+
+function MyPage() {
+  // Track page views
+  usePageTracking()
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      <UserProfile />
+    </div>
+  )
+}
+
+function UserProfile() {
+  const analytics = useAnalytics()
+
+  const handleProfileUpdate = () => {
+    if (analytics.isInitialized) {
+      // Track profile update event
+      analytics.track('Profile Updated', {
+        timestamp: new Date().toISOString(),
+        updateType: 'information'
+      })
+
+      // Update user traits
+      analytics.identify('user-123', {
+        lastUpdated: new Date().toISOString()
+      })
+    }
+  }
+
+  return (
+    <button onClick={handleProfileUpdate}>
+      Update Profile
+    </button>
+  )
+}
+
+function App() {
+  return (
+    <AnalyticsProvider
+      writeKey="xyz1234"
+      userId="user-123"
+      traits={{
+        name: 'John Doe',
+        email: 'john@example.com'
+      }}
+    >
+      <MyPage />
+    </AnalyticsProvider>
+  )
+}
+```
 
 ## License
 

package/cjs/contexts/analytics/AnalyticsProvider.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { AnalyticsContextType, AnalyticsProviderProps } from "./types";
+declare const AnalyticsContext: React.Context<AnalyticsContextType | null>;
+declare const AnalyticsProvider: React.FC<AnalyticsProviderProps>;
+export { AnalyticsContext, AnalyticsProvider };

package/cjs/contexts/analytics/AnalyticsProvider.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsProvider = exports.AnalyticsContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const isbot_1 = require("isbot");
+const useAsyncEffect_1 = require("../../hooks/useAsyncEffect");
+const AnalyticsContext = (0, react_1.createContext)(null);
+exports.AnalyticsContext = AnalyticsContext;
+const AnalyticsProvider = (props) => {
+    const { writeKey, userId, traits, children } = props;
+    const analyticsRef = (0, react_1.useRef)(null);
+    const [isInitialized, setIsInitialized] = (0, react_1.useState)(false);
+    (0, useAsyncEffect_1.useAsyncEffect)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        if (!writeKey) {
+            console.log("[Analytics] No writeKey provided");
+            return;
+        }
+        const userAgent = navigator.userAgent;
+        const isBot = (0, isbot_1.isbot)(userAgent);
+        if (isBot) {
+            console.log("[Analytics] Skipping load: bot detected");
+            return;
+        }
+        try {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { AnalyticsBrowser } = yield Promise.resolve().then(() => tslib_1.__importStar(require("@segment/analytics-next")));
+            analyticsRef.current = AnalyticsBrowser.load({ writeKey });
+            if (userId) {
+                analyticsRef.current.identify(userId, traits);
+            }
+            setIsInitialized(true);
+        }
+        catch (error) {
+            console.error("[Analytics] Failed to initialize:", error);
+            analyticsRef.current = null;
+        }
+    }), [writeKey, userId, traits]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        if (!analyticsRef.current || !isInitialized) {
+            return {
+                isInitialized: false,
+                track: () => { },
+                identify: () => { },
+                page: () => { },
+            };
+        }
+        return {
+            isInitialized: true,
+            track: (event, payload) => {
+                var _a;
+                (_a = analyticsRef.current) === null || _a === void 0 ? void 0 : _a.track(event, payload);
+            },
+            identify: (id, traits) => {
+                var _a;
+                (_a = analyticsRef.current) === null || _a === void 0 ? void 0 : _a.identify(id, traits);
+            },
+            page: (name, props) => {
+                var _a;
+                (_a = analyticsRef.current) === null || _a === void 0 ? void 0 : _a.page(name, props);
+            },
+        };
+    }, [isInitialized]);
+    return (react_1.default.createElement(AnalyticsContext.Provider, { value: contextValue }, children));
+};
+exports.AnalyticsProvider = AnalyticsProvider;
+//# sourceMappingURL=AnalyticsProvider.js.map

package/cjs/contexts/analytics/AnalyticsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../../src/contexts/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuE;AAEvE,iCAA6B;AAC7B,+DAA2D;AAO3D,MAAM,gBAAgB,GAAG,IAAA,qBAAa,EAA8B,IAAI,CAAC,CAAA;AAsEhE,4CAAgB;AApEzB,MAAM,iBAAiB,GAAqC,CAC1D,KAA6B,EAC7B,EAAE;IACF,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACpD,MAAM,YAAY,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAA;IAC1D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEzD,IAAA,+BAAc,EAAC,GAAS,EAAE;QACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAA;YAC/C,OAAM;QACR,CAAC;QAED,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAA;QACrC,MAAM,KAAK,GAAG,IAAA,aAAK,EAAC,SAAS,CAAC,CAAA;QAE9B,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAA;YACtD,OAAM;QACR,CAAC;QAED,IAAI,CAAC;YACH,gEAAgE;YAChE,MAAM,EAAE,gBAAgB,EAAE,GAAG,gEAAa,yBAAyB,GAAC,CAAA;YACpE,YAAY,CAAC,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAA;YAE1D,IAAI,MAAM,EAAE,CAAC;gBACX,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YAC/C,CAAC;YAED,gBAAgB,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAA;YACzD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAA;QAC7B,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAE9B,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChC,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;YAC5C,OAAO;gBACL,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,GAAG,EAAE,GAAE,CAAC;gBACf,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;gBAClB,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;aACf,CAAA;QACH,CAAC;QAED,OAAO;YACL,aAAa,EAAE,IAAI;YACnB,KAAK,EAAE,CAAC,KAAa,EAAE,OAAsB,EAAE,EAAE;;gBAC/C,MAAA,YAAY,CAAC,OAAO,0CAAE,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;YAC7C,CAAC;YACD,QAAQ,EAAE,CAAC,EAAU,EAAE,MAAgC,EAAE,EAAE;;gBACzD,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC,CAAA;YAC5C,CAAC;YACD,IAAI,EAAE,CAAC,IAAY,EAAE,KAA+B,EAAE,EAAE;;gBACtD,MAAA,YAAY,CAAC,OAAO,0CAAE,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACzC,CAAC;SACF,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,OAAO,CACL,8BAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAC3C,QAAQ,CACiB,CAC7B,CAAA;AACH,CAAC,CAAA;AAE0B,8CAAiB"}

package/cjs/contexts/analytics/types.d.ts

@@ -0,0 +1,15 @@
+import type { EventProperties } from "@segment/analytics-next";
+type AnalyticsProviderProps = {
+    writeKey: string;
+    userId?: string;
+    traits?: Record<string, unknown>;
+    children: React.ReactNode;
+};
+type TrackPayload = EventProperties;
+type AnalyticsContextType = {
+    isInitialized: boolean;
+    track: (event: string, payload?: TrackPayload) => void;
+    identify: (userId: string, traits?: Record<string, unknown>) => void;
+    page: (name: string, props?: Record<string, unknown>) => void;
+};
+export { type AnalyticsProviderProps, type TrackPayload, type AnalyticsContextType, };

package/cjs/contexts/analytics/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/cjs/contexts/analytics/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/contexts/analytics/types.ts"],"names":[],"mappings":""}

package/cjs/hooks/index.d.ts

@@ -8,3 +8,5 @@ export { useAsyncTasks } from "./useAsyncTasks";
 export { usePatchState } from "./usePatchState";
 export { useAsyncEffect } from "./useAsyncEffect";
 export { useAsyncMemo, createAsyncMemoState } from "./useAsyncMemo";
+export { useAnalytics } from "./useAnalytics";
+export { usePageTracking } from "./usePageTracking";

package/cjs/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createAsyncMemoState = exports.useAsyncMemo = exports.useAsyncEffect = exports.usePatchState = exports.useAsyncTasks = exports.useAsyncTask = exports.createAsyncStateState = exports.useAsyncState = exports.useAdvancedUserAgentData = void 0;
+exports.usePageTracking = exports.useAnalytics = exports.createAsyncMemoState = exports.useAsyncMemo = exports.useAsyncEffect = exports.usePatchState = exports.useAsyncTasks = exports.useAsyncTask = exports.createAsyncStateState = exports.useAsyncState = exports.useAdvancedUserAgentData = void 0;
 // Hooks
 var useAdvancedUserAgentData_1 = require("./useAdvancedUserAgentData");
 Object.defineProperty(exports, "useAdvancedUserAgentData", { enumerable: true, get: function () { return useAdvancedUserAgentData_1.useAdvancedUserAgentData; } });
@@ -18,4 +18,8 @@ Object.defineProperty(exports, "useAsyncEffect", { enumerable: true, get: functi
 var useAsyncMemo_1 = require("./useAsyncMemo");
 Object.defineProperty(exports, "useAsyncMemo", { enumerable: true, get: function () { return useAsyncMemo_1.useAsyncMemo; } });
 Object.defineProperty(exports, "createAsyncMemoState", { enumerable: true, get: function () { return useAsyncMemo_1.createAsyncMemoState; } });
+var useAnalytics_1 = require("./useAnalytics");
+Object.defineProperty(exports, "useAnalytics", { enumerable: true, get: function () { return useAnalytics_1.useAnalytics; } });
+var usePageTracking_1 = require("./usePageTracking");
+Object.defineProperty(exports, "usePageTracking", { enumerable: true, get: function () { return usePageTracking_1.usePageTracking; } });
 //# sourceMappingURL=index.js.map

package/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;AAKA,QAAQ;AACR,uEAAqE;AAA5D,oIAAA,wBAAwB,OAAA;AACjC,iDAAsE;AAA7D,8GAAA,aAAa,OAAA;AAAE,sHAAA,qBAAqB,OAAA;AAC7C,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,iDAA+C;AAAtC,8GAAA,aAAa,OAAA;AACtB,iDAA+C;AAAtC,8GAAA,aAAa,OAAA;AACtB,mDAAiD;AAAxC,gHAAA,cAAc,OAAA;AACvB,+CAAmE;AAA1D,4GAAA,YAAY,OAAA;AAAE,oHAAA,oBAAoB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;AAKA,QAAQ;AACR,uEAAqE;AAA5D,oIAAA,wBAAwB,OAAA;AACjC,iDAAsE;AAA7D,8GAAA,aAAa,OAAA;AAAE,sHAAA,qBAAqB,OAAA;AAC7C,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,iDAA+C;AAAtC,8GAAA,aAAa,OAAA;AACtB,iDAA+C;AAAtC,8GAAA,aAAa,OAAA;AACtB,mDAAiD;AAAxC,gHAAA,cAAc,OAAA;AACvB,+CAAmE;AAA1D,4GAAA,YAAY,OAAA;AAAE,oHAAA,oBAAoB,OAAA;AAC3C,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,qDAAmD;AAA1C,kHAAA,eAAe,OAAA"}

package/cjs/hooks/useAnalytics.d.ts

@@ -0,0 +1,3 @@
+import type { AnalyticsContextType } from "../contexts/analytics/types";
+declare const useAnalytics: () => AnalyticsContextType;
+export { useAnalytics };

package/cjs/hooks/useAnalytics.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnalytics = void 0;
+const react_1 = require("react");
+const AnalyticsProvider_1 = require("../contexts/analytics/AnalyticsProvider");
+const useAnalytics = () => {
+    const analyticsContext = (0, react_1.useContext)(AnalyticsProvider_1.AnalyticsContext);
+    if (!analyticsContext) {
+        throw new Error("useAnalytics must be used within AnalyticsProvider");
+    }
+    if (!analyticsContext.isInitialized) {
+        return {
+            isInitialized: false,
+            track: () => { },
+            identify: () => { },
+            page: () => { },
+        };
+    }
+    return {
+        isInitialized: true,
+        track: analyticsContext.track,
+        identify: analyticsContext.identify,
+        page: analyticsContext.page,
+    };
+};
+exports.useAnalytics = useAnalytics;
+//# sourceMappingURL=useAnalytics.js.map

package/cjs/hooks/useAnalytics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnalytics.js","sourceRoot":"","sources":["../../src/hooks/useAnalytics.ts"],"names":[],"mappings":";;;AAAA,iCAAkC;AAClC,+EAA0E;AAG1E,MAAM,YAAY,GAAG,GAAyB,EAAE;IAC9C,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,oCAAgB,CAAC,CAAA;IACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,CAAC;IAED,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC;QACpC,OAAO;YACL,aAAa,EAAE,KAAK;YACpB,KAAK,EAAE,GAAG,EAAE,GAAE,CAAC;YACf,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;YAClB,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;SACf,CAAA;IACH,CAAC;IAED,OAAO;QACL,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,gBAAgB,CAAC,KAAK;QAC7B,QAAQ,EAAE,gBAAgB,CAAC,QAAQ;QACnC,IAAI,EAAE,gBAAgB,CAAC,IAAI;KAC5B,CAAA;AACH,CAAC,CAAA;AAEQ,oCAAY"}

package/cjs/hooks/usePageTracking.d.ts

@@ -0,0 +1,2 @@
+declare const usePageTracking: () => void;
+export { usePageTracking };

package/cjs/hooks/usePageTracking.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageTracking = void 0;
+const react_1 = require("react");
+const react_router_1 = require("react-router");
+const useAnalytics_1 = require("./useAnalytics");
+const usePageTracking = () => {
+    const location = (0, react_router_1.useLocation)();
+    const { page } = (0, useAnalytics_1.useAnalytics)();
+    (0, react_1.useEffect)(() => {
+        page(location.pathname);
+    }, [location, page]);
+};
+exports.usePageTracking = usePageTracking;
+//# sourceMappingURL=usePageTracking.js.map

package/cjs/hooks/usePageTracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageTracking.js","sourceRoot":"","sources":["../../src/hooks/usePageTracking.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AACjC,+CAA0C;AAC1C,iDAA6C;AAE7C,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,QAAQ,GAAG,IAAA,0BAAW,GAAE,CAAA;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,2BAAY,GAAE,CAAA;IAE/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACzB,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;AACtB,CAAC,CAAA;AAEQ,0CAAe"}

package/esm/contexts/analytics/AnalyticsProvider.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { AnalyticsContextType, AnalyticsProviderProps } from "./types";
+declare const AnalyticsContext: React.Context<AnalyticsContextType | null>;
+declare const AnalyticsProvider: React.FC<AnalyticsProviderProps>;
+export { AnalyticsContext, AnalyticsProvider };

package/esm/contexts/analytics/AnalyticsProvider.js

@@ -0,0 +1,59 @@
+import React, { createContext, useMemo, useRef, useState } from "react";
+import { isbot } from "isbot";
+import { useAsyncEffect } from "../../hooks/useAsyncEffect";
+const AnalyticsContext = createContext(null);
+const AnalyticsProvider = (props) => {
+    const { writeKey, userId, traits, children } = props;
+    const analyticsRef = useRef(null);
+    const [isInitialized, setIsInitialized] = useState(false);
+    useAsyncEffect(async () => {
+        if (!writeKey) {
+            console.log("[Analytics] No writeKey provided");
+            return;
+        }
+        const userAgent = navigator.userAgent;
+        const isBot = isbot(userAgent);
+        if (isBot) {
+            console.log("[Analytics] Skipping load: bot detected");
+            return;
+        }
+        try {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { AnalyticsBrowser } = await import("@segment/analytics-next");
+            analyticsRef.current = AnalyticsBrowser.load({ writeKey });
+            if (userId) {
+                analyticsRef.current.identify(userId, traits);
+            }
+            setIsInitialized(true);
+        }
+        catch (error) {
+            console.error("[Analytics] Failed to initialize:", error);
+            analyticsRef.current = null;
+        }
+    }, [writeKey, userId, traits]);
+    const contextValue = useMemo(() => {
+        if (!analyticsRef.current || !isInitialized) {
+            return {
+                isInitialized: false,
+                track: () => { },
+                identify: () => { },
+                page: () => { },
+            };
+        }
+        return {
+            isInitialized: true,
+            track: (event, payload) => {
+                analyticsRef.current?.track(event, payload);
+            },
+            identify: (id, traits) => {
+                analyticsRef.current?.identify(id, traits);
+            },
+            page: (name, props) => {
+                analyticsRef.current?.page(name, props);
+            },
+        };
+    }, [isInitialized]);
+    return (React.createElement(AnalyticsContext.Provider, { value: contextValue }, children));
+};
+export { AnalyticsContext, AnalyticsProvider };
+//# sourceMappingURL=AnalyticsProvider.js.map

package/esm/contexts/analytics/AnalyticsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsProvider.js","sourceRoot":"","sources":["../../../src/contexts/analytics/AnalyticsProvider.tsx"],"names":[],"mappings":"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"}

package/esm/contexts/analytics/types.d.ts

@@ -0,0 +1,15 @@
+import type { EventProperties } from "@segment/analytics-next";
+type AnalyticsProviderProps = {
+    writeKey: string;
+    userId?: string;
+    traits?: Record<string, unknown>;
+    children: React.ReactNode;
+};
+type TrackPayload = EventProperties;
+type AnalyticsContextType = {
+    isInitialized: boolean;
+    track: (event: string, payload?: TrackPayload) => void;
+    identify: (userId: string, traits?: Record<string, unknown>) => void;
+    page: (name: string, props?: Record<string, unknown>) => void;
+};
+export { type AnalyticsProviderProps, type TrackPayload, type AnalyticsContextType, };

package/esm/contexts/analytics/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/contexts/analytics/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/contexts/analytics/types.ts"],"names":[],"mappings":""}

package/esm/hooks/index.d.ts

@@ -8,3 +8,5 @@ export { useAsyncTasks } from "./useAsyncTasks";
 export { usePatchState } from "./usePatchState";
 export { useAsyncEffect } from "./useAsyncEffect";
 export { useAsyncMemo, createAsyncMemoState } from "./useAsyncMemo";
+export { useAnalytics } from "./useAnalytics";
+export { usePageTracking } from "./usePageTracking";

package/esm/hooks/index.js

@@ -6,4 +6,6 @@ export { useAsyncTasks } from "./useAsyncTasks";
 export { usePatchState } from "./usePatchState";
 export { useAsyncEffect } from "./useAsyncEffect";
 export { useAsyncMemo, createAsyncMemoState } from "./useAsyncMemo";
+export { useAnalytics } from "./useAnalytics";
+export { usePageTracking } from "./usePageTracking";
 //# sourceMappingURL=index.js.map

package/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAKA,QAAQ;AACR,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAKA,QAAQ;AACR,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/esm/hooks/useAnalytics.d.ts

@@ -0,0 +1,3 @@
+import type { AnalyticsContextType } from "../contexts/analytics/types";
+declare const useAnalytics: () => AnalyticsContextType;
+export { useAnalytics };

package/esm/hooks/useAnalytics.js

@@ -0,0 +1,24 @@
+import { useContext } from "react";
+import { AnalyticsContext } from "../contexts/analytics/AnalyticsProvider";
+const useAnalytics = () => {
+    const analyticsContext = useContext(AnalyticsContext);
+    if (!analyticsContext) {
+        throw new Error("useAnalytics must be used within AnalyticsProvider");
+    }
+    if (!analyticsContext.isInitialized) {
+        return {
+            isInitialized: false,
+            track: () => { },
+            identify: () => { },
+            page: () => { },
+        };
+    }
+    return {
+        isInitialized: true,
+        track: analyticsContext.track,
+        identify: analyticsContext.identify,
+        page: analyticsContext.page,
+    };
+};
+export { useAnalytics };
+//# sourceMappingURL=useAnalytics.js.map

package/esm/hooks/useAnalytics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnalytics.js","sourceRoot":"","sources":["../../src/hooks/useAnalytics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAG1E,MAAM,YAAY,GAAG,GAAyB,EAAE;IAC9C,MAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACrD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,CAAC;IAED,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC;QACpC,OAAO;YACL,aAAa,EAAE,KAAK;YACpB,KAAK,EAAE,GAAG,EAAE,GAAE,CAAC;YACf,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;YAClB,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;SACf,CAAA;IACH,CAAC;IAED,OAAO;QACL,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,gBAAgB,CAAC,KAAK;QAC7B,QAAQ,EAAE,gBAAgB,CAAC,QAAQ;QACnC,IAAI,EAAE,gBAAgB,CAAC,IAAI;KAC5B,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/esm/hooks/usePageTracking.d.ts

@@ -0,0 +1,2 @@
+declare const usePageTracking: () => void;
+export { usePageTracking };

package/esm/hooks/usePageTracking.js

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router";
+import { useAnalytics } from "./useAnalytics";
+const usePageTracking = () => {
+    const location = useLocation();
+    const { page } = useAnalytics();
+    useEffect(() => {
+        page(location.pathname);
+    }, [location, page]);
+};
+export { usePageTracking };
+//# sourceMappingURL=usePageTracking.js.map

package/esm/hooks/usePageTracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePageTracking.js","sourceRoot":"","sources":["../../src/hooks/usePageTracking.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,CAAA;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACzB,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;AACtB,CAAC,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcl/hooks",
-  "version": "0.0.5-20251118105707.commit-6f49aba",
+  "version": "0.0.6-20251118124437.commit-cdc6064",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "exports": {
@@ -49,12 +49,15 @@
     "prettier": "^3.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router": "^7.4.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.0.0",
     "typescript-eslint": "^7.15.0"
   },
   "dependencies": {
+    "@segment/analytics-next": "^1.79.0",
     "@sentry/browser": "^9.0.0",
+    "isbot": "^5.1.25",
     "ua-parser-js": "^2.0.2"
   },
   "keywords": [
@@ -76,7 +79,10 @@
     "moduleNameMapper": {
       "^test/(.*)$": "<rootDir>/test/$1",
       "^src/(.*)$": "<rootDir>/src/$1"
-    }
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/test/setup.ts"
+    ]
   },
-  "commit": "6f49aba696711d27f587dd39f07c6a12fb36a19c"
+  "commit": "cdc6064be83eb9bce906f852766e5e832147465f"
 }