PostHog에 앱을 연결하여 제품 분석 이벤트를 수집하고, feature flag를 평가하며, Lovable 앱에서 서버 측 이벤트를 전송합니다.
PostHog에 앱 연결하기
PostHog에 앱을 연결하여 제품 분석 이벤트를 수집하고, feature flag를 평가하며, Lovable 앱에서 서버 측 이벤트를 전송하세요.
PostHog는 이벤트 수집, feature flag, 실험을 위한 제품 분석 플랫폼입니다. PostHog app + chat connector를 사용하면 Lovable 앱이 PostHog project token으로 브라우저와 백엔드 코드에서 이벤트를 전송하고 flag를 평가할 수 있습니다.
| 사용 방식 | 적합한 경우 |
|---|---|
| App + chat connector (이 페이지) | 공유 PostHog project token을 채팅과 게시된 앱에서 사용하려는 경우 |
| Chat connector (MCP server) | 빌드하는 동안 Lovable이 PostHog 분석, flag, 실험을 컨텍스트로 쿼리하도록 하려는 경우(본인 전용) |
PostHog를 사용하면 앱에서 다음 작업을 할 수 있습니다.
- project token으로
posthog-js를 사용해 제품 분석 이벤트 수집 - 브라우저 또는 백엔드 코드에서 사용자의 feature flag 평가
- 서버 route에서 PostHog capture API로 이벤트 전송
- 분석 및 feature flag를 기반으로 제품 경험 구축
이 connector는 PostHog의 공개 capture 및 flag endpoint를 위한 project token(phc_)을 동기화합니다. 앱은 PostHog ingest host를 직접 호출합니다. Lovable connector gateway를 사용하지 않으며 personal API key(phx_)를 허용하지 않습니다.
주요 활용 사례 및 예시 앱
Lovable 앱에 제품 분석, feature flag 또는 PostHog 프로젝트에 연결된 서버 측 이벤트 수집이 필요할 때 PostHog를 사용하세요.
| 예시 앱 | 프롬프트 예시 | 설명 |
|---|---|---|
| 제품 분석 대시보드 | Use PostHog and build a SaaS app that tracks signups, feature usage, and retention events. | PostHog 이벤트로 핵심 제품 funnel을 계측합니다. 앱이 posthog-js를 초기화하고, 주요 행동을 수집하여 PostHog 프로젝트로 전송합니다. |
| Feature flag 기반 점진적 출시 | Use PostHog and gate the new onboarding flow behind a feature flag so only flagged users see it. | PostHog flag로 기능을 점진적으로 출시합니다. 앱이 각 사용자의 flag를 평가하고 결과에 따라 새 경험 또는 기존 경험을 렌더링합니다. |
| 전환 추적을 포함한 대기자 명단 | Use PostHog and build a waitlist landing page that tracks page views, form starts, and successful signups. | PostHog에서 landing page 전환을 측정합니다. 앱이 funnel 이벤트를 수집하여 방문자가 어느 단계에서 이탈하는지 확인할 수 있게 합니다. |
| 인앱 실험 | Use PostHog and A/B test two pricing page layouts, then track which variant converts more often. | PostHog로 간단한 실험을 실행합니다. 앱이 flag에서 layout을 할당하고 각 variant의 전환 이벤트를 수집합니다. |
| Backend 이벤트 수집 | Use PostHog and send a server-side signup_completed event when a user finishes account creation on the backend. | 신뢰할 수 있는 서버 측 이벤트를 PostHog에 기록합니다. 앱이 동기화된 project token을 사용해 백엔드 route에서 capture 이벤트를 전송합니다. |
| 내부 관리 분석 | Use PostHog and add event tracking to our internal admin tools so we can see which workflows get used. | 내부 도구 사용량을 파악합니다. 앱이 admin 행동을 추적하고 PostHog에 사용 패턴을 표시합니다. |
PostHog 연결하기
PostHog connection을 만들 수 있는 사용자는 요금제와 workspace 설정에 따라 달라집니다. App + chat connector는 Free, Pro, Business 요금제에서 기본적으로 사용할 수 있습니다. Enterprise 요금제에서는 처음에 사실상 비활성화되어 있습니다. Connectors → Admin settings → App + chat connectors에서 admin이 변경하기 전까지 connection과 client를 만들 수 있는 사람이 기본적으로 No one으로 설정됩니다.
서로 다른 프로젝트 또는 region을 사용하는 PostHog connection을 여러 개 만들 수 있습니다. 예를 들어 개발 환경과 운영 환경을 분리할 때 유용합니다.
Connection을 만든 후 사용할 프로젝트에 연결할 수 있습니다. 프로젝트를 빌드하는 누구든 Lovable 채팅에서 해당 프로젝트에 connection을 연결하도록 요청할 수 있습니다.
사전 요건
PostHog를 연결하기 전에 다음을 준비하세요.
- PostHog Cloud 계정 및 프로젝트
- 프로젝트의 숫자로 된 Project ID
phc_로 시작하는 project token- 프로젝트가 호스팅되는 cloud region(
eu또는us) - Lovable workspace에서 connection 생성 권한(connection과 client를 만들 수 있는 사람 참고)
이벤트 수집, feature flag 등 PostHog 사용량은 PostHog 요금제에 포함됩니다. 요금 청구와 할당량은 Lovable이 아닌 PostHog에서 직접 처리합니다.
1단계: PostHog 프로젝트 정보 가져오기
PostHog에서 region, project ID, project token의 세 가지 값이 필요합니다.
다음과 같이 확인하세요.
PostHog 프로젝트 열기
PostHog에 로그인하세요. 프로젝트가 EU Cloud에 있다면 EU host를 사용하세요.
프로젝트 설정 열기
**Project settings**로 이동하세요.
Project ID 및 project token 복사하기
숫자로 된 Project ID와 phc_로 시작하는 Project API key / project token을 복사하세요.
Region 확인하기
프로젝트가 Europe(eu.i.posthog.com) 또는 United States(us.i.posthog.com) 중 어디에 있는지 확인하세요. PostHog API base URL을 참고하세요.
Project token은 capture 및 flag를 위한 공개 write key입니다. Connection을 프로젝트에 연결하면 Lovable은 이 token을 브라우저 코드에 VITE_ env var로 노출합니다. Personal API key(phx_)를 이 connector에 붙여넣지 마세요.
자세한 내용은 PostHog 문서의 Project API keys를 참고하세요.
2단계: PostHog를 Lovable에 연결하기
서로 다른 PostHog 프로젝트 또는 token을 사용하여 여러 connection을 만들 수 있습니다.
Connectors에서 PostHog 열기
Connectors를 열고 PostHog를 선택하세요. Catalog를 열 수 있는 다른 위치는 커넥터를 찾는 위치를 참고하세요.
Connection 추가하기
Add connection을 클릭하세요.
Connection 구성하기
- Display name: connection 이름을 지정하세요(예:
PostHog Prod). 이 이름은 Lovable 내부에서 connection을 식별하는 데만 사용됩니다. - Region: PostHog 프로젝트가 호스팅되는 위치와 일치하도록 Europe (eu.i.posthog.com) 또는 **United States (us.i.posthog.com)**를 선택하세요.
- Project ID: Project settings에서 확인한 숫자로 된 PostHog project ID를 붙여넣으세요.
- Project token:
phc_로 시작하는 project token을 붙여넣으세요.
이 connection을 사용할 수 있는 사람 선택하기
Who can use this connection에서 workspace 내 connection 사용 권한을 결정하세요. 처음에는 본인만 접근할 수 있습니다.
- Only you (기본값): 접근 목록을 그대로 두면 본인만 connection 및 관련 데이터를 사용할 수 있습니다.
- Invite specific people: workspace 멤버를 email로 추가하면 본인과 추가된 멤버만 connection 및 관련 데이터를 사용할 수 있습니다.
- Invite entire workspace: Invite entire workspace를 클릭하면 Lovable workspace의 모든 사용자가 connection을 사용할 수 있습니다.
자세한 내용은 connection과 client를 사용할 수 있는 사람을 참고하세요.
연결하기
Connect를 클릭하세요. Lovable은 connection을 저장하기 전에 PostHog에서 project token을 검증합니다.
연결이 완료되면 프로젝트를 빌드하는 누구든 Lovable 채팅에서 해당 프로젝트를 PostHog에 연결하도록 요청할 수 있습니다(설정된 connection-level access 기준). 이후 Lovable 앱은 동기화된 project token과 region을 사용해 이벤트를 수집하고 feature flag를 평가할 수 있습니다.
제한 사항
PostHog connector는 다음을 지원하지 않습니다.
- Personal API key(
phx_) 사용. Project token(phc_)만 사용하세요. - Lovable connector gateway를 통한 PostHog 요청 proxy. 앱은 PostHog ingest host(
eu.i.posthog.com또는us.i.posthog.com)를 직접 호출합니다. - Personal API key가 필요한 PostHog private admin REST API 사용.
- 최종 사용자별 PostHog 로그인. 각 connection은 연결된 모든 프로젝트가 공유하는 하나의 PostHog 프로젝트를 나타냅니다.
PostHog connection 관리하기
Connection은 Connectors에서 관리합니다. **PostHog**을 선택한 후 connection을 여세요.
- 특정 프로젝트에서 PostHog 접근 권한을 제거하되 다른 프로젝트에서 connection을 계속 사용할 수 있도록 프로젝트 연결을 해제할 수 있습니다. 절차는 connection에서 프로젝트 연결 해제하기를 참고하세요.
- Workspace에서 connection을 완전히 제거하려면 connection을 삭제하세요. 삭제는 영구적입니다. 연결된 모든 프로젝트에서 자격 증명이 제거되며, PostHog을 사용하는 앱 기능은 새 connection을 추가할 때까지 작동을 멈춥니다. 절차와 삭제 권한은 connection 삭제하기를 참고하세요.