shipd 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base-package/app/globals.css +126 -0
- package/base-package/app/layout.tsx +53 -0
- package/base-package/app/page.tsx +15 -0
- package/base-package/base.config.json +57 -0
- package/base-package/components/ui/avatar.tsx +53 -0
- package/base-package/components/ui/badge.tsx +46 -0
- package/base-package/components/ui/button.tsx +59 -0
- package/base-package/components/ui/card.tsx +92 -0
- package/base-package/components/ui/chart.tsx +353 -0
- package/base-package/components/ui/checkbox.tsx +32 -0
- package/base-package/components/ui/dialog.tsx +135 -0
- package/base-package/components/ui/dropdown-menu.tsx +257 -0
- package/base-package/components/ui/form.tsx +167 -0
- package/base-package/components/ui/input.tsx +21 -0
- package/base-package/components/ui/label.tsx +24 -0
- package/base-package/components/ui/progress.tsx +31 -0
- package/base-package/components/ui/resizable.tsx +56 -0
- package/base-package/components/ui/select.tsx +185 -0
- package/base-package/components/ui/separator.tsx +28 -0
- package/base-package/components/ui/sheet.tsx +139 -0
- package/base-package/components/ui/skeleton.tsx +13 -0
- package/base-package/components/ui/sonner.tsx +25 -0
- package/base-package/components/ui/switch.tsx +31 -0
- package/base-package/components/ui/tabs.tsx +66 -0
- package/base-package/components/ui/textarea.tsx +18 -0
- package/base-package/components/ui/toggle-group.tsx +73 -0
- package/base-package/components/ui/toggle.tsx +47 -0
- package/base-package/components/ui/tooltip.tsx +61 -0
- package/base-package/components.json +21 -0
- package/base-package/eslint.config.mjs +16 -0
- package/base-package/lib/utils.ts +6 -0
- package/base-package/middleware.ts +12 -0
- package/base-package/next.config.ts +27 -0
- package/base-package/package.json +49 -0
- package/base-package/postcss.config.mjs +5 -0
- package/base-package/public/favicon.svg +4 -0
- package/base-package/tailwind.config.ts +89 -0
- package/base-package/tsconfig.json +27 -0
- package/dist/index.js +1858 -956
- package/docs-template/README.md +74 -0
- package/features/ai-chat/README.md +316 -0
- package/features/ai-chat/app/api/chat/route.ts +16 -0
- package/features/ai-chat/app/dashboard/_components/chatbot.tsx +39 -0
- package/features/ai-chat/app/dashboard/chat/page.tsx +73 -0
- package/features/ai-chat/feature.config.json +22 -0
- package/features/analytics/README.md +364 -0
- package/features/analytics/feature.config.json +20 -0
- package/features/analytics/lib/posthog.ts +36 -0
- package/features/auth/README.md +409 -0
- package/features/auth/app/api/auth/[...all]/route.ts +4 -0
- package/features/auth/app/dashboard/layout.tsx +15 -0
- package/features/auth/app/dashboard/page.tsx +140 -0
- package/features/auth/app/sign-in/page.tsx +228 -0
- package/features/auth/app/sign-up/page.tsx +243 -0
- package/features/auth/auth-schema.ts +47 -0
- package/features/auth/components/auth/setup-instructions.tsx +123 -0
- package/features/auth/feature.config.json +33 -0
- package/features/auth/lib/auth-client.ts +8 -0
- package/features/auth/lib/auth.ts +295 -0
- package/features/auth/lib/email-stub.ts +55 -0
- package/features/auth/lib/email.ts +47 -0
- package/features/auth/middleware.patch.ts +43 -0
- package/features/database/README.md +312 -0
- package/features/database/db/drizzle.ts +48 -0
- package/features/database/db/schema.ts +21 -0
- package/features/database/drizzle.config.ts +13 -0
- package/features/database/feature.config.json +30 -0
- package/features/email/README.md +341 -0
- package/features/email/emails/components/layout.tsx +181 -0
- package/features/email/emails/password-reset.tsx +67 -0
- package/features/email/emails/payment-failed.tsx +167 -0
- package/features/email/emails/subscription-confirmation.tsx +129 -0
- package/features/email/emails/welcome.tsx +100 -0
- package/features/email/feature.config.json +22 -0
- package/features/email/lib/email.ts +118 -0
- package/features/file-upload/README.md +329 -0
- package/features/file-upload/app/api/upload-image/route.ts +64 -0
- package/features/file-upload/app/dashboard/upload/page.tsx +324 -0
- package/features/file-upload/feature.config.json +23 -0
- package/features/file-upload/lib/upload-image.ts +28 -0
- package/features/marketing-landing/README.md +333 -0
- package/features/marketing-landing/app/page.tsx +25 -0
- package/features/marketing-landing/components/homepage/cli-workflow-section.tsx +231 -0
- package/features/marketing-landing/components/homepage/features-section.tsx +152 -0
- package/features/marketing-landing/components/homepage/footer.tsx +53 -0
- package/features/marketing-landing/components/homepage/hero-section.tsx +112 -0
- package/features/marketing-landing/components/homepage/integrations.tsx +124 -0
- package/features/marketing-landing/components/homepage/navigation.tsx +116 -0
- package/features/marketing-landing/components/homepage/news-section.tsx +82 -0
- package/features/marketing-landing/components/homepage/pricing-section.tsx +98 -0
- package/features/marketing-landing/components/homepage/testimonials-section.tsx +34 -0
- package/features/marketing-landing/components/logos/BetterAuth.tsx +21 -0
- package/features/marketing-landing/components/logos/NeonPostgres.tsx +41 -0
- package/features/marketing-landing/components/logos/Nextjs.tsx +72 -0
- package/features/marketing-landing/components/logos/Polar.tsx +7 -0
- package/features/marketing-landing/components/logos/TailwindCSS.tsx +27 -0
- package/features/marketing-landing/components/logos/index.ts +6 -0
- package/features/marketing-landing/components/logos/shadcnui.tsx +8 -0
- package/features/marketing-landing/feature.config.json +23 -0
- package/features/payments/README.md +375 -0
- package/features/payments/app/api/subscription/route.ts +25 -0
- package/features/payments/app/dashboard/payment/_components/manage-subscription.tsx +22 -0
- package/features/payments/app/dashboard/payment/page.tsx +126 -0
- package/features/payments/app/success/page.tsx +123 -0
- package/features/payments/feature.config.json +31 -0
- package/features/payments/lib/polar-products.ts +49 -0
- package/features/payments/lib/subscription.ts +148 -0
- package/features/payments/payments-schema.ts +30 -0
- package/features/seo/README.md +302 -0
- package/features/seo/app/blog/[slug]/page.tsx +314 -0
- package/features/seo/app/blog/page.tsx +107 -0
- package/features/seo/app/robots.txt +13 -0
- package/features/seo/app/sitemap.ts +70 -0
- package/features/seo/feature.config.json +19 -0
- package/features/seo/lib/seo-utils.ts +163 -0
- package/package.json +3 -1
|
@@ -0,0 +1,364 @@
|
|
|
1
|
+
# Analytics Module - Integration Guide
|
|
2
|
+
|
|
3
|
+
**Module Version:** 1.0.0
|
|
4
|
+
**Last Updated:** 2025-12-22
|
|
5
|
+
**Standalone:** ✅ Yes (can work independently)
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
This module adds PostHog analytics integration for event tracking, user analytics, feature flags, session recording, and heatmaps.
|
|
12
|
+
|
|
13
|
+
**Key Features:**
|
|
14
|
+
- PostHog integration
|
|
15
|
+
- Event tracking
|
|
16
|
+
- User analytics
|
|
17
|
+
- Feature flags
|
|
18
|
+
- Session recording
|
|
19
|
+
- Heatmaps
|
|
20
|
+
- Automatic pageview tracking
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Files Added
|
|
25
|
+
|
|
26
|
+
### Utilities/Libraries
|
|
27
|
+
- `lib/posthog.ts` - PostHog provider and initialization
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Dependencies
|
|
32
|
+
|
|
33
|
+
### Package Dependencies
|
|
34
|
+
The following packages will be added to `package.json`:
|
|
35
|
+
- `posthog-js@^1.248.1` - PostHog JavaScript SDK
|
|
36
|
+
- `posthog-node@^4.18.0` - PostHog Node.js SDK
|
|
37
|
+
|
|
38
|
+
### Required Modules
|
|
39
|
+
- None - Analytics module is standalone
|
|
40
|
+
|
|
41
|
+
### Optional Integration
|
|
42
|
+
- **Auth Module** - For user identification and tracking
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Environment Variables
|
|
47
|
+
|
|
48
|
+
Add these to your `.env.local`:
|
|
49
|
+
|
|
50
|
+
```env
|
|
51
|
+
# Analytics (PostHog)
|
|
52
|
+
NEXT_PUBLIC_POSTHOG_KEY="phc_xxxxxxxxxxxxx" # Your PostHog project API key
|
|
53
|
+
NEXT_PUBLIC_POSTHOG_HOST="https://app.posthog.com" # PostHog host (default: https://app.posthog.com)
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
**Required Variables:**
|
|
57
|
+
- `NEXT_PUBLIC_POSTHOG_KEY` - Your PostHog project API key
|
|
58
|
+
|
|
59
|
+
**Optional Variables:**
|
|
60
|
+
- `NEXT_PUBLIC_POSTHOG_HOST` - PostHog host URL (defaults to `https://app.posthog.com`)
|
|
61
|
+
|
|
62
|
+
**Where to get them:**
|
|
63
|
+
- **PostHog**: [posthog.com](https://posthog.com) - Free tier available
|
|
64
|
+
- Create account and project
|
|
65
|
+
- Get API key from project settings
|
|
66
|
+
- Use self-hosted PostHog instance if preferred
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Manual Integration Steps
|
|
71
|
+
|
|
72
|
+
If you're appending this module to an existing project, follow these steps:
|
|
73
|
+
|
|
74
|
+
### Step 1: Install Dependencies
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm install
|
|
78
|
+
# or
|
|
79
|
+
pnpm install
|
|
80
|
+
# or
|
|
81
|
+
yarn install
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The append command automatically adds missing dependencies to `package.json`, but you need to install them.
|
|
85
|
+
|
|
86
|
+
### Step 2: Add Environment Variables
|
|
87
|
+
|
|
88
|
+
1. Copy `.env.example` to `.env.local` (if not exists)
|
|
89
|
+
2. Add `NEXT_PUBLIC_POSTHOG_KEY` with your PostHog API key
|
|
90
|
+
3. Optionally set `NEXT_PUBLIC_POSTHOG_HOST` if using self-hosted PostHog
|
|
91
|
+
|
|
92
|
+
### Step 3: Integrate PostHog Provider
|
|
93
|
+
|
|
94
|
+
Add the PostHog provider to your root layout (`app/layout.tsx`):
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import { PostHogProviderWrapper } from "@/lib/posthog";
|
|
98
|
+
|
|
99
|
+
export default function RootLayout({
|
|
100
|
+
children,
|
|
101
|
+
}: {
|
|
102
|
+
children: React.ReactNode;
|
|
103
|
+
}) {
|
|
104
|
+
return (
|
|
105
|
+
<html lang="en">
|
|
106
|
+
<body>
|
|
107
|
+
<PostHogProviderWrapper>
|
|
108
|
+
{children}
|
|
109
|
+
</PostHogProviderWrapper>
|
|
110
|
+
</body>
|
|
111
|
+
</html>
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Step 4: Verify Installation
|
|
117
|
+
|
|
118
|
+
1. Check that `lib/posthog.ts` exists
|
|
119
|
+
2. Add PostHog provider to your layout
|
|
120
|
+
3. Start your dev server: `npm run dev`
|
|
121
|
+
4. Visit your site and check PostHog dashboard for events
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Usage Examples
|
|
126
|
+
|
|
127
|
+
### Tracking Custom Events
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
'use client';
|
|
131
|
+
|
|
132
|
+
import { usePostHog } from 'posthog-js/react';
|
|
133
|
+
|
|
134
|
+
export function MyComponent() {
|
|
135
|
+
const posthog = usePostHog();
|
|
136
|
+
|
|
137
|
+
const handleButtonClick = () => {
|
|
138
|
+
posthog?.capture('button_clicked', {
|
|
139
|
+
button_name: 'signup',
|
|
140
|
+
location: 'homepage',
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
return <button onClick={handleButtonClick}>Sign Up</button>;
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Identifying Users
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
'use client';
|
|
152
|
+
|
|
153
|
+
import { usePostHog } from 'posthog-js/react';
|
|
154
|
+
import { useEffect } from 'react';
|
|
155
|
+
|
|
156
|
+
export function UserTracker({ user }: { user: { id: string; email: string } }) {
|
|
157
|
+
const posthog = usePostHog();
|
|
158
|
+
|
|
159
|
+
useEffect(() => {
|
|
160
|
+
if (posthog && user) {
|
|
161
|
+
posthog.identify(user.id, {
|
|
162
|
+
email: user.email,
|
|
163
|
+
// Add more user properties
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
}, [posthog, user]);
|
|
167
|
+
|
|
168
|
+
return null;
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Using Feature Flags
|
|
173
|
+
|
|
174
|
+
```tsx
|
|
175
|
+
'use client';
|
|
176
|
+
|
|
177
|
+
import { usePostHog } from 'posthog-js/react';
|
|
178
|
+
import { useEffect, useState } from 'react';
|
|
179
|
+
|
|
180
|
+
export function FeatureFlagComponent() {
|
|
181
|
+
const posthog = usePostHog();
|
|
182
|
+
const [isEnabled, setIsEnabled] = useState(false);
|
|
183
|
+
|
|
184
|
+
useEffect(() => {
|
|
185
|
+
if (posthog) {
|
|
186
|
+
posthog.onFeatureFlags(() => {
|
|
187
|
+
const enabled = posthog.isFeatureEnabled('new-feature');
|
|
188
|
+
setIsEnabled(enabled || false);
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
}, [posthog]);
|
|
192
|
+
|
|
193
|
+
if (!isEnabled) {
|
|
194
|
+
return null;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
return <div>New Feature Content</div>;
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Server-Side Tracking
|
|
202
|
+
|
|
203
|
+
```typescript
|
|
204
|
+
import { PostHog } from 'posthog-node';
|
|
205
|
+
|
|
206
|
+
const posthog = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
|
|
207
|
+
host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
// Track server-side events
|
|
211
|
+
export async function trackEvent(userId: string, eventName: string, properties?: Record<string, any>) {
|
|
212
|
+
posthog.capture({
|
|
213
|
+
distinctId: userId,
|
|
214
|
+
event: eventName,
|
|
215
|
+
properties,
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## Customization
|
|
223
|
+
|
|
224
|
+
### Configuration
|
|
225
|
+
- PostHog initialization is in `lib/posthog.ts`
|
|
226
|
+
- Customize person profiles setting
|
|
227
|
+
- Add custom properties to all events
|
|
228
|
+
|
|
229
|
+
### Features
|
|
230
|
+
- Pageview tracking is automatic
|
|
231
|
+
- Custom event tracking is available
|
|
232
|
+
- Feature flags are supported
|
|
233
|
+
- Session recording can be enabled in PostHog dashboard
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
## Integration Points
|
|
238
|
+
|
|
239
|
+
### Files That May Need Manual Updates
|
|
240
|
+
|
|
241
|
+
**app/layout.tsx**:
|
|
242
|
+
- Wrap children with `PostHogProviderWrapper`
|
|
243
|
+
- Add PostHog provider to root layout
|
|
244
|
+
|
|
245
|
+
**Components**:
|
|
246
|
+
- Use `usePostHog` hook for event tracking
|
|
247
|
+
- Identify users when they sign in
|
|
248
|
+
- Track custom events throughout your app
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
252
|
+
## Troubleshooting
|
|
253
|
+
|
|
254
|
+
### Common Issues
|
|
255
|
+
|
|
256
|
+
**Issue:** "NEXT_PUBLIC_POSTHOG_KEY is not defined" error
|
|
257
|
+
**Solution:**
|
|
258
|
+
- Add `NEXT_PUBLIC_POSTHOG_KEY` to `.env.local`
|
|
259
|
+
- Get API key from PostHog dashboard
|
|
260
|
+
- Restart dev server after adding env var
|
|
261
|
+
- Ensure variable name starts with `NEXT_PUBLIC_` for client-side access
|
|
262
|
+
|
|
263
|
+
**Issue:** Events not showing in PostHog
|
|
264
|
+
**Solution:**
|
|
265
|
+
- Verify API key is correct
|
|
266
|
+
- Check PostHog host is correct
|
|
267
|
+
- Check browser console for errors
|
|
268
|
+
- Verify PostHog provider is in root layout
|
|
269
|
+
|
|
270
|
+
**Issue:** Feature flags not working
|
|
271
|
+
**Solution:**
|
|
272
|
+
- Ensure feature flags are enabled in PostHog dashboard
|
|
273
|
+
- Check that user is identified before checking flags
|
|
274
|
+
- Use `posthog.onFeatureFlags()` to wait for flags to load
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
## Next Steps
|
|
279
|
+
|
|
280
|
+
After installing this module:
|
|
281
|
+
|
|
282
|
+
1. Get PostHog API key from [posthog.com](https://posthog.com)
|
|
283
|
+
2. Add `NEXT_PUBLIC_POSTHOG_KEY` to `.env.local`
|
|
284
|
+
3. Integrate PostHog provider in `app/layout.tsx`
|
|
285
|
+
4. Test event tracking
|
|
286
|
+
5. Set up feature flags in PostHog dashboard
|
|
287
|
+
6. Identify users when they sign in
|
|
288
|
+
7. Track custom events throughout your app
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
## Related Modules
|
|
293
|
+
|
|
294
|
+
This module works well with:
|
|
295
|
+
- **Auth Module** - For user identification and tracking
|
|
296
|
+
|
|
297
|
+
**Note:** Analytics module is optional and standalone. No other modules are required.
|
|
298
|
+
|
|
299
|
+
---
|
|
300
|
+
|
|
301
|
+
## Module Status
|
|
302
|
+
|
|
303
|
+
✅ **Standalone Package** - Can be installed independently
|
|
304
|
+
✅ **Event Tracking** - Automatic and custom events
|
|
305
|
+
✅ **Feature Flags** - Built-in feature flag support
|
|
306
|
+
✅ **User Analytics** - User identification and tracking
|
|
307
|
+
✅ **Well Documented** - Comprehensive integration guide
|
|
308
|
+
|
|
309
|
+
---
|
|
310
|
+
|
|
311
|
+
## AI Integration Prompt
|
|
312
|
+
|
|
313
|
+
**For AI Assistants:** Use this prompt to understand and integrate the Analytics module into an existing Next.js application.
|
|
314
|
+
|
|
315
|
+
```
|
|
316
|
+
The Analytics module has been appended to this Next.js project. Your task is to ensure it's properly integrated and functional.
|
|
317
|
+
|
|
318
|
+
**Installed Packages:**
|
|
319
|
+
- posthog-js@^1.248.1 - PostHog client-side SDK
|
|
320
|
+
- posthog-node@^4.18.0 - PostHog server-side SDK
|
|
321
|
+
|
|
322
|
+
**Files Added:**
|
|
323
|
+
- lib/posthog.ts - PostHog initialization and provider wrapper
|
|
324
|
+
|
|
325
|
+
**Environment Variables Required:**
|
|
326
|
+
- NEXT_PUBLIC_POSTHOG_KEY - PostHog project API key
|
|
327
|
+
- NEXT_PUBLIC_POSTHOG_HOST - PostHog host (default: https://app.posthog.com)
|
|
328
|
+
|
|
329
|
+
**Integration Steps:**
|
|
330
|
+
1. Verify lib/posthog.ts exists with PostHogProviderWrapper component
|
|
331
|
+
2. Check that PostHogProviderWrapper is added to app/layout.tsx
|
|
332
|
+
3. Ensure NEXT_PUBLIC_POSTHOG_KEY is set in .env.local
|
|
333
|
+
4. Verify PostHog is initialized in lib/posthog.ts
|
|
334
|
+
5. Test pageview tracking: Visit pages and check PostHog dashboard
|
|
335
|
+
6. Test custom events: Use usePostHog hook to capture events
|
|
336
|
+
7. If auth module installed: Identify users when they sign in
|
|
337
|
+
|
|
338
|
+
**Key Integration Points:**
|
|
339
|
+
- Provider wrapper: PostHogProviderWrapper must wrap app in app/layout.tsx
|
|
340
|
+
- Client-side: Use usePostHog hook from 'posthog-js/react' in client components
|
|
341
|
+
- Server-side: Import PostHog from 'posthog-node' for server-side tracking
|
|
342
|
+
- User identification: Call posthog.identify(userId, properties) when user signs in
|
|
343
|
+
- Feature flags: Use posthog.isFeatureEnabled('flag-name') to check flags
|
|
344
|
+
- Automatic tracking: Pageviews are tracked automatically
|
|
345
|
+
|
|
346
|
+
**Dependencies:**
|
|
347
|
+
- OPTIONAL: Auth module (for user identification)
|
|
348
|
+
- No hard dependencies on other Shipd modules
|
|
349
|
+
|
|
350
|
+
**Common Issues to Check:**
|
|
351
|
+
- If "NEXT_PUBLIC_POSTHOG_KEY is not defined": Add API key to .env.local (must start with NEXT_PUBLIC_)
|
|
352
|
+
- If events not showing: Verify PostHog provider is in root layout, check browser console
|
|
353
|
+
- If feature flags not working: Ensure flags are enabled in PostHog dashboard, identify users first
|
|
354
|
+
- If server-side tracking fails: Check posthog-node is imported correctly
|
|
355
|
+
|
|
356
|
+
**Next Steps After Integration:**
|
|
357
|
+
- Get PostHog API key from posthog.com
|
|
358
|
+
- Add NEXT_PUBLIC_POSTHOG_KEY to .env.local
|
|
359
|
+
- Wrap app with PostHogProviderWrapper in app/layout.tsx
|
|
360
|
+
- Test pageview tracking
|
|
361
|
+
- Identify users when they sign in (if auth module installed)
|
|
362
|
+
- Set up feature flags in PostHog dashboard
|
|
363
|
+
- Track custom events throughout your app
|
|
364
|
+
```
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "analytics",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "PostHog analytics integration with event tracking and feature flags",
|
|
5
|
+
"dependencies": {
|
|
6
|
+
"posthog-js": "^1.248.1",
|
|
7
|
+
"posthog-node": "^4.18.0"
|
|
8
|
+
},
|
|
9
|
+
"devDependencies": {},
|
|
10
|
+
"envVars": [
|
|
11
|
+
"NEXT_PUBLIC_POSTHOG_KEY",
|
|
12
|
+
"NEXT_PUBLIC_POSTHOG_HOST"
|
|
13
|
+
],
|
|
14
|
+
"files": [
|
|
15
|
+
"lib/posthog.ts"
|
|
16
|
+
],
|
|
17
|
+
"requires": [],
|
|
18
|
+
"conflicts": []
|
|
19
|
+
}
|
|
20
|
+
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import posthog from 'posthog-js';
|
|
4
|
+
import { PostHogProvider } from 'posthog-js/react';
|
|
5
|
+
import { useEffect } from 'react';
|
|
6
|
+
|
|
7
|
+
if (typeof window !== 'undefined') {
|
|
8
|
+
const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
|
|
9
|
+
const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com';
|
|
10
|
+
|
|
11
|
+
if (posthogKey) {
|
|
12
|
+
posthog.init(posthogKey, {
|
|
13
|
+
api_host: posthogHost,
|
|
14
|
+
person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export function PostHogProviderWrapper({ children }: { children: React.ReactNode }) {
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
// Track pageviews
|
|
22
|
+
const handleRouteChange = () => {
|
|
23
|
+
posthog?.capture('$pageview');
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
// Track initial pageview
|
|
27
|
+
handleRouteChange();
|
|
28
|
+
|
|
29
|
+
return () => {
|
|
30
|
+
// Cleanup if needed
|
|
31
|
+
};
|
|
32
|
+
}, []);
|
|
33
|
+
|
|
34
|
+
return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
|
|
35
|
+
}
|
|
36
|
+
|