Google Analytics 4에 앱을 연결하여 gtag.js로 Lovable 앱의 페이지 조회, 맞춤 이벤트 및 전환을 추적합니다.

Google Analytics에 앱 연결하기

Google Analytics 4에 앱을 연결하여 gtag.js로 Lovable 앱의 페이지 조회, 맞춤 이벤트 및 전환을 추적하세요.

Google Analytics는 Google의 웹 분석 서비스입니다. Google Analytics 커넥터를 사용하면 Lovable 앱에서 gtag.js를 통해 Google Analytics 4 속성으로 페이지 조회, 맞춤 이벤트 및 전환을 전송할 수 있습니다. 트래픽 및 행동 보고서를 나머지 Google Analytics 데이터와 함께 관리하려는 앱에 적합합니다.

Google Analytics는 앱 + 채팅 커넥터로 제공됩니다. 하나의 공유 연결이 빌드 중 채팅과 게시된 앱 모두에서 작동합니다.

Google Analytics를 사용하면 앱에서 다음 작업을 할 수 있습니다:

클라이언트 측 경로 변경을 포함해 앱 전체의 페이지 조회 추적
클릭, 가입 및 전환에 대한 맞춤 이벤트 전송
트래픽 소스, 세션 및 사용자 참여 측정
Google Analytics 속성의 보고서 및 대시보드에 데이터 제공

이 커넥터는 GA4 측정 ID를 앱의 브라우저 코드에 동기화하고, 브라우저 코드는 Google에서 gtag.js를 불러옵니다. 전송 전용 커넥터이므로 보고서는 Google Analytics에 유지되며 Lovable은 분석 데이터를 앱으로 다시 읽어오지 않습니다.

주요 활용 사례 및 예시 앱

Lovable 앱의 트래픽 및 전환 데이터를 다른 사이트와 함께 GA4 속성에서 관리하려는 경우 Google Analytics를 사용하세요.

예시 앱	프롬프트 예시	설명
트래픽 보고 기능이 있는 마케팅 사이트	Google Analytics를 사용해 모든 랜딩 페이지의 페이지 조회를 보고하는 마케팅 사이트를 만들어줘.	어떤 페이지에서 트래픽이 유입되는지 확인합니다. 앱은 시작할 때 gtag.js를 한 번 불러오고 경로마다 페이지 조회를 전송하여 GA4 보고서에 세션과 소스가 표시되도록 합니다.
대기자 명단 랜딩 페이지	Google Analytics를 사용해 양식 작성 시작과 가입 완료를 이벤트로 추적하는 대기자 명단 페이지를 만들어줘.	랜딩 페이지 전환을 측정합니다. 방문자가 양식 작성을 시작할 때 맞춤 이벤트를 전송하고 가입에 성공하면 다른 이벤트를 전송하여 사용자가 이탈하는 지점을 확인할 수 있습니다.
SaaS 온보딩 퍼널	신규 사용자가 어느 지점에서 멈추는지 확인할 수 있도록 각 온보딩 단계를 Google Analytics로 추적해줘.	여러 단계의 퍼널을 계측합니다. 앱이 단계마다 이름이 지정된 이벤트를 하나씩 전송하므로 GA4에서 단계별 완료율을 비교할 수 있습니다.
구매 추적 기능이 있는 스토어	결제가 완료될 때마다 주문 금액이 포함된 purchase 이벤트를 Google Analytics로 전송해줘.	매출을 트래픽 소스에 기여시킵니다. 앱은 결제 후 주문 금액이 포함된 purchase 이벤트를 전송하여 GA4에서 매출을 캠페인과 연결할 수 있게 합니다.
콘텐츠 또는 블로그 사이트	Google Analytics를 사용해 블로그의 글 조회와 스크롤 깊이를 추적해줘.	어떤 콘텐츠가 관심을 유지하는지 파악합니다. 앱은 각 글 경로의 조회를 보고하고 독자가 페이지를 내려갈 때 참여 이벤트를 전송합니다.
캠페인 랜딩 페이지	광고 채널을 비교할 수 있도록 UTM 매개변수를 유지하는 캠페인 랜딩 페이지를 만들어줘.	GA4에서 유료 채널을 비교합니다. 앱은 진입 시 캠페인 매개변수를 보존하고 획득 보고서에서 해당 매개변수에 대한 전환을 보고합니다.

Google Analytics 연결하기

Google Analytics 연결을 만들 수 있는 사용자는 플랜과 워크스페이스 설정에 따라 달라집니다. Free, Pro, Business 플랜에서는 앱 + 채팅 커넥터를 기본적으로 사용할 수 있습니다. Enterprise 플랜에서는 처음에 사실상 비활성화되어 있습니다. 관리자가 Connectors → Admin settings → App + chat connectors에서 변경하기 전까지 연결 및 클라이언트를 만들 수 있는 사용자가 No one으로 설정됩니다.

서로 다른 측정 ID를 사용해 여러 Google Analytics 연결을 만들 수 있습니다. 개발 환경과 프로덕션 환경을 분리하거나 둘 이상의 GA4 속성으로 보고할 때 유용합니다.

연결을 만든 후 사용할 프로젝트에 연결할 수 있습니다. 프로젝트에서 빌드하는 사용자는 누구나 채팅에서 Lovable에 프로젝트와의 연결을 요청할 수 있습니다.

사전 준비

Google Analytics를 연결하기 전에 다음을 준비하세요:

Google Analytics 4 속성이 있는 Google Analytics 계정
해당 속성의 웹 데이터 스트림
G-로 시작하는 스트림의 측정 ID
Lovable 워크스페이스에서 연결을 만들 수 있는 권한(연결 및 클라이언트를 만들 수 있는 사용자 참고)

이벤트 수집, 데이터 보존, 할당량 및 Google Analytics 360 요금은 Lovable이 아닌 Google에서 직접 처리합니다.

1단계: Google Analytics 측정 ID 가져오기

측정 ID는 앱 이벤트를 수신하는 웹 데이터 스트림을 식별합니다. 대문자와 숫자가 뒤따르는 G-로 시작합니다.

측정 ID를 찾으려면 다음 단계를 따르세요:

Google Analytics 열기

사용하려는 속성에 접근할 수 있는 계정으로 Google Analytics에 로그인합니다.

데이터 스트림 열기

Admin → Data collection and modification → Data streams로 이동합니다.

웹 스트림 선택 또는 만들기

앱의 웹 데이터 스트림을 선택합니다. 속성에 스트림이 없다면 Add stream → Web을 클릭하고 앱 URL과 스트림 이름을 입력한 다음 Create stream을 클릭합니다.

측정 ID 복사하기

스트림 세부 정보에서 Measurement ID(예: G-XXXXXXXXXX)를 복사합니다.

측정 ID는 시크릿이 아닙니다. Google Analytics는 사이트의 브라우저 코드에 이 ID가 표시되는 것을 전제로 하며, Lovable은 이를 환경 변수로 앱 프런트엔드에 노출합니다. 연결 사용자를 선택하는 설정은 게시된 앱에서 ID를 읽을 수 있는 사용자가 아니라 Lovable에서 이 연결로 빌드할 수 있는 사용자를 제어합니다.

자세한 내용은 Google 문서의 Google Analytics 측정 ID 찾기를 참고하세요.

2단계: Google Analytics를 Lovable에 연결하기

서로 다른 측정 ID를 사용해 여러 연결을 만들 수 있습니다.

Connectors에서 Google Analytics 열기

Connectors를 열고 Google Analytics를 선택합니다. 카탈로그를 여는 다른 위치는 커넥터를 찾을 수 있는 위치를 참고하세요.

연결 추가하기

Add connection을 클릭합니다.

연결 구성하기

Display name: 연결 이름을 지정합니다(예: Google Analytics Prod). 이 이름은 Lovable 내부에서 연결을 식별할 때만 사용됩니다.
Measurement ID: 웹 데이터 스트림의 측정 ID를 붙여넣습니다. G-로 시작하고 그 뒤에 대문자 또는 숫자가 4자 이상 있어야 합니다.

이 연결을 사용할 사용자 선택하기

Who can use this connection에서 워크스페이스 내 연결 사용자를 결정합니다. 처음에는 본인만 접근할 수 있습니다:

Only you(기본값): 접근 목록을 그대로 두면 본인만 연결과 관련 데이터를 사용할 수 있습니다.
Invite specific people: 이메일로 워크스페이스 멤버를 추가하면 본인과 추가한 사용자만 연결과 관련 데이터를 사용할 수 있습니다.
Invite entire workspace: Invite entire workspace를 클릭하면 Lovable 워크스페이스의 모든 사용자가 연결을 사용할 수 있습니다.

자세한 내용은 연결 및 클라이언트를 사용할 수 있는 사용자를 참고하세요.

연결하기

Connect를 클릭합니다. Lovable은 측정 ID를 확인하기 위해 Google Analytics를 호출하지 않으므로 저장하기 전에 데이터 스트림의 ID와 비교하세요.

연결되면 프로젝트에서 빌드하는 사용자는 구성된 연결 수준 접근 권한에 따라 채팅에서 Lovable에 프로젝트와 Google Analytics의 연결을 요청할 수 있습니다. 이후 Lovable 앱에서 gtag.js를 불러오고 페이지 조회와 이벤트를 GA4 속성으로 전송할 수 있습니다.

이벤트 수신 확인하기

Lovable은 연결을 저장할 때 측정 ID를 확인하지 않으므로 앱을 실행한 후 Google Analytics에서 데이터가 수집되는지 확인하세요:

앱 사용하기

브라우저에서 앱을 열고 몇 개의 페이지로 이동합니다.

실시간 보고서 열기

Google Analytics에서 Reports → Realtime로 이동하여 활성 사용자와 page_view 이벤트가 표시되는지 확인합니다.

데이터가 없으면 ID 다시 확인하기

몇 분 후에도 데이터가 표시되지 않으면 Lovable의 측정 ID가 데이터 스트림과 일치하는지, 브라우저에서 광고 또는 추적 차단기가 활성화되지 않았는지 확인합니다.

제한 사항

Google Analytics 커넥터는 전송 전용이며 다음 작업을 할 수 없습니다:

Google Analytics 보고 데이터 읽기. 이 커넥터는 앱에 Google Analytics Data API 접근 권한을 제공하지 않으므로 GA4 보고서를 사용하는 인앱 대시보드나 차트를 만들 수 없습니다.
백엔드 코드에서 이벤트 전송. 측정 ID는 앱의 브라우저 코드에만 전달되며 Measurement Protocol을 통한 서버 측 수집에는 이 커넥터가 보유하지 않는 별도의 api_secret이 필요합니다.
Google Analytics 구성 관리. 속성, 데이터 스트림, 전환 및 잠재고객은 Google Analytics에서 만들고 수정하세요.
연결을 저장할 때 측정 ID 확인. 형식은 올바르지만 잘못된 ID도 오류 없이 저장되며 이벤트가 어디에도 도달하지 않습니다.
측정 ID 취소. 연결을 삭제하면 Lovable에서는 제거되지만 ID는 계속 유효합니다. 수집을 중지하려면 Google Analytics에서 데이터 스트림을 사용 중지하거나 삭제하세요.
최종 사용자별 Google Analytics 로그인 지원. 각 연결은 연결된 모든 프로젝트에서 공유하는 하나의 측정 ID를 나타냅니다.

Google Analytics 연결 관리하기

Connectors에서 연결을 관리합니다. **Google Analytics**를 선택한 뒤 연결을 여세요.

특정 프로젝트의 Google Analytics 접근만 제거하고 다른 프로젝트에서는 연결을 계속 사용하려면 Unlink projects를 사용합니다. 단계는 연결에서 프로젝트 연결 해제를 참고하세요.
워크스페이스에서 연결을 완전히 제거하려면 Delete the connection을 사용합니다. 삭제는 영구적입니다. 연결된 모든 프로젝트에서 인증 정보가 제거되고, 새 연결을 추가할 때까지 Google Analytics을 사용하는 앱 기능이 중단됩니다. 단계와 삭제 권한은 연결 삭제를 참고하세요.