diff --git a/app/_layout.tsx b/app/_layout.tsx index 16e584f..f7540e8 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -1,5 +1,5 @@ -import { Stack } from "expo-router"; -import React from "react"; +import { Stack, usePathname, useSegments } from "expo-router"; +import React, { useEffect } from "react"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import "react-native-reanimated"; import "../global.css"; // NativeWind CSS @@ -7,11 +7,29 @@ import { ErrorBoundary } from '../src/components/common/ErrorBoundary'; import { AnalyticsProvider } from "../src/components/mobile/AnalyticsProvider"; import { OfflineIndicatorProvider } from "../src/components/mobile/OfflineIndicatorProvider"; import { SwipeableNavigation } from '../src/components/mobile/SwipeableNavigation'; +import { useAnalytics } from '../src/hooks/useAnalytics'; + +// Component to handle auto screen tracking +function ScreenTracker() { + const pathname = usePathname(); + const segments = useSegments(); + const { trackScreen } = useAnalytics(); + + useEffect(() => { + if (pathname) { + // Basic screen tracking based on pathname + trackScreen(pathname, { segments: segments.join('/') }); + } + }, [pathname, segments, trackScreen]); + + return null; +} export default function RootLayout() { return ( + diff --git a/src/hooks/useAnalytics.ts b/src/hooks/useAnalytics.ts index 81a71f7..3eac737 100644 --- a/src/hooks/useAnalytics.ts +++ b/src/hooks/useAnalytics.ts @@ -52,11 +52,49 @@ export const useAnalytics = () => { [service] ); + /** + * Track button clicks + */ + const trackButtonClick = useCallback( + (buttonName: string, properties?: EventProperties) => { + service.trackEvent(AnalyticsEvent.UI_CLICK, { button: buttonName, ...properties }); + }, + [service] + ); + + /** + * Track form submissions + */ + const trackFormSubmit = useCallback( + (formName: string, properties?: EventProperties) => { + service.trackEvent(AnalyticsEvent.FORM_SUBMIT, { form: formName, ...properties }); + }, + [service] + ); + + /** + * Track errors + */ + const trackError = useCallback( + (error: Error | string, isFatal: boolean = false, properties?: EventProperties) => { + const errorMessage = error instanceof Error ? error.message : error; + service.trackEvent(isFatal ? AnalyticsEvent.CRASH_REPORT : AnalyticsEvent.API_ERROR, { + error: errorMessage, + isFatal, + ...properties, + }); + }, + [service] + ); + return { trackEvent, trackScreen, trackTiming, identify, + trackButtonClick, + trackFormSubmit, + trackError, service, // Direct access if needed }; };