Skip to main contentSkip to sidebarSkip to headerSkip to footer

Analytics

A comprehensive analytics component supporting multiple providers: Google Analytics, Mixpanel, Amplitude, Segment, PostHog, and Plausible.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { Analytics, useAnalytics } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
{/* Place once in your app root */}
<Analytics
  providers={{
    googleAnalytics: {
      trackingId: "G-XXXXXXXXXX",
    },
    mixpanel: {
      token: "your-mixpanel-token",
    },
    segment: {
      writeKey: "your-segment-write-key",
    },
  }}
  enabled={process.env.NODE_ENV === "production"}
/>
 
{/* Use the hook in components */}
function TrackingExample() {
  const { trackEvent, trackPageView, setUserProperties, identifyUser } = useAnalytics();
 
  const handleButtonClick = () => {
    // Tracks across all configured providers
    trackEvent('button_click', { 
      category: 'ui',
      label: 'header_cta' 
    });
  };
 
  const handleUserLogin = (userId: string) => {
    identifyUser(userId, {
      plan: 'premium',
      signupDate: new Date().toISOString(),
    });
  };
 
  return (
    <div>
      <Button onClick={handleButtonClick}>
        Track Click Event
      </Button>
      <Button onClick={() => handleUserLogin('user123')}>
        Identify User
      </Button>
    </div>
  );
}
 
{/* Individual provider examples */}
 
{/* Google Analytics */}
<Analytics
  providers={{
    googleAnalytics: {
      trackingId: "G-XXXXXXXXXX",
      config: {
        anonymize_ip: true,
        cookie_domain: "auto",
      },
      events: [
        { action: "page_view", category: "engagement" }
      ]
    }
  }}
/>
 
{/* Mixpanel */}
<Analytics
  providers={{
    mixpanel: {
      token: "your-mixpanel-token",
      config: {
        track_pageview: true,
        persistence: "localStorage",
      }
    }
  }}
/>
 
{/* Amplitude */}
<Analytics
  providers={{
    amplitude: {
      apiKey: "your-amplitude-api-key",
      config: {
        serverZone: "US",
        trackSessions: true,
      }
    }
  }}
/>
 
{/* Segment */}
<Analytics
  providers={{
    segment: {
      writeKey: "your-segment-write-key",
      config: {
        trackPageview: true,
      }
    }
  }}
/>
 
{/* PostHog */}
<Analytics
  providers={{
    posthog: {
      apiKey: "your-posthog-api-key",
      apiHost: "https://app.posthog.com",
      config: {
        capture_pageview: true,
        session_recording: {
          maskAllInputs: true,
        }
      }
    }
  }}
/>
 
{/* Plausible */}
<Analytics
  providers={{
    plausible: {
      domain: "yourdomain.com",
      config: {
        trackOutboundLinks: true,
      }
    }
  }}
/>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗