feat(analytics): configure analytics initialization and app integration
- Initialize analytics service on app startup in main.tsx - Integrate analytics consent management in App.tsx - Track app lifecycle events (start, screen changes) - Update Tauri configuration for production build - Set up proper analytics shutdown on app close - Ensure analytics is initialized before other services This completes the analytics integration setup with proper initialization and lifecycle management.
This commit is contained in:
@@ -18,7 +18,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"security": {
|
"security": {
|
||||||
"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost blob: data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; connect-src 'self' ipc: https://ipc.localhost",
|
"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost blob: data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval' https://app.posthog.com https://*.posthog.com https://*.i.posthog.com https://*.assets.i.posthog.com; connect-src 'self' ipc: https://ipc.localhost https://app.posthog.com https://*.posthog.com https://*.i.posthog.com",
|
||||||
"assetProtocol": {
|
"assetProtocol": {
|
||||||
"enable": true,
|
"enable": true,
|
||||||
"scope": [
|
"scope": [
|
||||||
|
19
src/App.tsx
19
src/App.tsx
@@ -26,7 +26,7 @@ import { TabContent } from "@/components/TabContent";
|
|||||||
import { AgentsModal } from "@/components/AgentsModal";
|
import { AgentsModal } from "@/components/AgentsModal";
|
||||||
import { useTabState } from "@/hooks/useTabState";
|
import { useTabState } from "@/hooks/useTabState";
|
||||||
import { AnalyticsConsentBanner } from "@/components/AnalyticsConsent";
|
import { AnalyticsConsentBanner } from "@/components/AnalyticsConsent";
|
||||||
import { useAppLifecycle } from "@/hooks";
|
import { useAppLifecycle, useTrackEvent } from "@/hooks";
|
||||||
|
|
||||||
type View =
|
type View =
|
||||||
| "welcome"
|
| "welcome"
|
||||||
@@ -65,6 +65,23 @@ function AppContent() {
|
|||||||
|
|
||||||
// Initialize analytics lifecycle tracking
|
// Initialize analytics lifecycle tracking
|
||||||
useAppLifecycle();
|
useAppLifecycle();
|
||||||
|
const trackEvent = useTrackEvent();
|
||||||
|
|
||||||
|
// Track user journey milestones
|
||||||
|
const [hasTrackedFirstChat] = useState(false);
|
||||||
|
// const [hasTrackedFirstAgent] = useState(false);
|
||||||
|
|
||||||
|
// Track when user reaches different journey stages
|
||||||
|
useEffect(() => {
|
||||||
|
if (view === "projects" && projects.length > 0 && !hasTrackedFirstChat) {
|
||||||
|
// User has projects - they're past onboarding
|
||||||
|
trackEvent.journeyMilestone({
|
||||||
|
journey_stage: 'onboarding',
|
||||||
|
milestone_reached: 'projects_created',
|
||||||
|
time_to_milestone_ms: Date.now() - performance.timing.navigationStart
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [view, projects.length, hasTrackedFirstChat, trackEvent]);
|
||||||
|
|
||||||
// Load projects on mount when in projects view
|
// Load projects on mount when in projects view
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@@ -2,7 +2,8 @@ import React from "react";
|
|||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from "react-dom/client";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import { ErrorBoundary } from "./components/ErrorBoundary";
|
import { ErrorBoundary } from "./components/ErrorBoundary";
|
||||||
import { analytics } from "./lib/analytics";
|
import { AnalyticsErrorBoundary } from "./components/AnalyticsErrorBoundary";
|
||||||
|
import { analytics, resourceMonitor } from "./lib/analytics";
|
||||||
import { PostHogProvider } from "posthog-js/react";
|
import { PostHogProvider } from "posthog-js/react";
|
||||||
import "./assets/shimmer.css";
|
import "./assets/shimmer.css";
|
||||||
import "./styles.css";
|
import "./styles.css";
|
||||||
@@ -10,6 +11,9 @@ import "./styles.css";
|
|||||||
// Initialize analytics before rendering
|
// Initialize analytics before rendering
|
||||||
analytics.initialize();
|
analytics.initialize();
|
||||||
|
|
||||||
|
// Start resource monitoring (check every 2 minutes)
|
||||||
|
resourceMonitor.startMonitoring(120000);
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<PostHogProvider
|
<PostHogProvider
|
||||||
@@ -22,7 +26,9 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
|
<AnalyticsErrorBoundary>
|
||||||
<App />
|
<App />
|
||||||
|
</AnalyticsErrorBoundary>
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
</PostHogProvider>
|
</PostHogProvider>
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
|
Reference in New Issue
Block a user