82 lines
1.9 KiB
Markdown
82 lines
1.9 KiB
Markdown
# PostHog Analytics Setup
|
|
|
|
PostHog has been successfully integrated into the Energie Finder Profi project.
|
|
|
|
## Configuration
|
|
|
|
- **API Key**: `phc_jIkj0hQSY670vRaUVjSRSDOqmLCDGkL6GJy44iqE84M`
|
|
- **Host**: `https://app.posthog.com`
|
|
- **Initialization**: PostHog is automatically initialized in `main.tsx`
|
|
|
|
## Files Added/Modified
|
|
|
|
1. **`src/lib/posthog.ts`** - PostHog configuration and initialization
|
|
2. **`src/hooks/usePostHog.ts`** - React hook for easy PostHog usage
|
|
3. **`src/main.tsx`** - PostHog initialization on app start
|
|
4. **`src/components/HeroSection.tsx`** - Example tracking implementation
|
|
5. **`package.json`** - Added posthog-js dependency
|
|
|
|
## Usage
|
|
|
|
### Basic Event Tracking
|
|
|
|
```tsx
|
|
import { usePostHog } from '@/hooks/usePostHog'
|
|
|
|
const MyComponent = () => {
|
|
const posthog = usePostHog()
|
|
|
|
const handleClick = () => {
|
|
posthog.capture('button_clicked', {
|
|
button_name: 'search',
|
|
page: 'home'
|
|
})
|
|
}
|
|
|
|
return <button onClick={handleClick}>Click me</button>
|
|
}
|
|
```
|
|
|
|
### User Identification
|
|
|
|
```tsx
|
|
const posthog = usePostHog()
|
|
|
|
// Identify a user
|
|
posthog.identify('user_123', {
|
|
email: 'user@example.com',
|
|
name: 'John Doe'
|
|
})
|
|
```
|
|
|
|
### Feature Flags
|
|
|
|
```tsx
|
|
const posthog = usePostHog()
|
|
|
|
// Check if feature is enabled
|
|
const isNewFeatureEnabled = posthog.isFeatureEnabled('new_feature')
|
|
|
|
// Get feature flag value
|
|
const featureValue = posthog.getFeatureFlag('feature_with_value')
|
|
```
|
|
|
|
## Environment Variables
|
|
|
|
You can optionally set the PostHog API key via environment variable:
|
|
|
|
```env
|
|
VITE_POSTHOG_API_KEY=phc_jIkj0hQSY670vRaUVjSRSDOqmLCDGkL6GJy44iqE84M
|
|
```
|
|
|
|
## Current Tracking
|
|
|
|
The following events are currently being tracked:
|
|
|
|
- `hero_search_clicked` - When user clicks "Installateur Finden" in hero section
|
|
- `hero_view_all_clicked` - When user clicks "Alle Installateure Ansehen"
|
|
|
|
## PostHog Dashboard
|
|
|
|
Visit [https://app.posthog.com](https://app.posthog.com) to view analytics data, create funnels, and set up feature flags.
|