1.9 KiB

Raw Blame History

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

src/lib/posthog.ts - PostHog configuration and initialization
src/hooks/usePostHog.ts - React hook for easy PostHog usage
src/main.tsx - PostHog initialization on app start
src/components/HeroSection.tsx - Example tracking implementation
package.json - Added posthog-js dependency

Usage

Basic Event Tracking

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

const posthog = usePostHog()

// Identify a user
posthog.identify('user_123', {
  email: 'user@example.com',
  name: 'John Doe'
})

Feature Flags

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:

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 to view analytics data, create funnels, and set up feature flags.

1.9 KiB Raw Blame History