안녕하세요! 그로스마케팅 파트너, 허들러스의 박희진 그로스 엔지니어입니다.
이전편(구글 태그매니저로 Iframe 추적하기(1))에서 사이트에서 iframe을 사용하면 구글 태그 매니저를 통한 추적이 복잡해지는 이유와 함께 iframe 내에서 발생한 이벤트 데이터를 window.postMessage()를 활용하여 구글 태그 매니저로 추적하는 첫 번째 방법에 대해 살펴봤는데요. 이번 글에서는 iframe 내에서 측정프로토콜을 이용하여 GA4 서버로 이벤트를 보내는 방법을 소개 드리겠습니다.
1. GA4 Measurement Protocol (측정 프로토콜) 이란?
GA4 Measurement Protocol은 구글 애널리틱스 4를 위한 중요한 도구입니다. 이를 통해 개발자는 구글 애널리틱스 서버로 데이터를 직접 전송할 수 있습니다. 이러한 기능은 사용자가 다양한 환경에서 비즈니스와 상호작용하는 방식을 측정하는 데 도움이 됩니다.
구글 애널리틱스 측정 프로토콜을 사용하면 서버 간에 발생하는 상호작용을 간편하게 측정할 수 있으며, 데이터를 GA4로 전송하는 데 사용되는 API입니다. 이를 통해 구글 태그 매니저나 GA4 추적 스크립트를 설치하지 않은 페이지에서도 이벤트 데이터를 GA4로 전송할 수 있습니다.
GA4 Measurement Protocol은 특히 구글 태그 매니저로 추적하기 어려운 특정 이벤트나 사용자 활동, 사용자 속성과 같은 정보를 GA4에 기록하는 데 유용합니다. 이를 통해 더 다양한 데이터를 수집하고 분석할 수 있으며, 비즈니스 전략을 개선하는 데 도움이 됩니다.
요약하면, GA4 Measurement Protocol은 구글 애널리틱스 4의 데이터 수집을 향상시키고, 개발자가 데이터를 보다 정확하게 제어할 수 있도록 해주는 중요한 도구입니다. 이를 통해 더 나은 사용자 경험과 비즈니스 결과를 달성할 수 있습니다.
구글 태그 매니저가 이미 존재하는데, 왜 GA4 측정 프로토콜을 사용해야 할까요?
구글 태그 매니저와 GA4 측정 프로토콜은 모두 데이터 수집 및 분석 도구로 사용되지만, 각각의 장점과 사용 사례가 있습니다. 이에 대한 이유는 다음과 같습니다.
- 더 정교한 제어
GA4 측정 프로토콜을 사용하는 이유 중 하나는 특별한 요구사항 또는 복잡한 구현이 필요한 경우입니다. 예를 들어, 로그인 상태를 유지하고 있는 사용자의 활동을 추적하려면 구글 태그 매니저만으로는 제한이 있을 수 있습니다. 또한, 특정 결제 방식을 추적하려면 직접 측정 프로토콜 코드를 작성하여 데이터를 GA4로 전송할 수 있습니다. 이를 통해 원하는 시점에 데이터를 기록하고, 매출 및 사용자 행동을 더 정확하게 추적할 수 있습니다.
- 보안 및 프라이버시 이슈
일부 기업이나 조직은 보안 및 개인 정보 보호 이슈로 인해 구글 태그 매니저와 같은 서드파티 도구를 사용하기를 꺼려 할 수 있습니다. GA4 측정 프로토콜을 직접 구현하면 데이터를 보다 민감하게 관리하고 제어할 수 있으므로 보안과 프라이버시 관련 요구사항을 충족시킬 수 있습니다.
- 성능 최적화
일부 웹 사이트는 외부 스크립트 및 리소스를 최소화하려고 합니다. 구글 태그 매니저는 외부 스크립트를 추가하는 방식이므로 이를 사용하지 않고자 하는 경우가 있습니다. GA4 측정 프로토콜을 사용하면 외부 스크립트를 회피하고 웹 사이트의 성능을 최적화할 수 있습니다.
요약하면, GA4 측정 프로토콜을 사용하는 이유는 더 정교한 제어, 보안 및 프라이버시 이슈 해결, 그리고 성능 최적화를 위해서입니다. 이를 통해 비즈니스에서 데이터 수집과 분석을 더 효과적으로 수행할 수 있으며, 특수한 요구사항에 대응할 수 있습니다.
2. 측정 프로토콜은 어떻게 사용해야 할까요?
측정 프로토콜을 사용하려면 4가지 중요한 구성요소가 필요합니다. 이를 효과적으로 사용하기 위해서는 다음을 알아두어야 합니다:
1) GA4 measurement_id (측정 ID)
: 이것은 GA4 데이터 스트림과 연결된 측정 ID를 나타내며, 측정 프로토콜을 사용하기 위한 필수 요소입니다. 이 측정 ID를 어떻게 얻을 수 있는지 살펴보겠습니다.
- 데이터 스트림에서 [스트림 선택]을 클릭합니다.
- 그런 다음, [측정 ID]로 이동하여 해당 값을 복사하고 보관합니다.
2) API Secret Key
API Secret Key는 GA4 측정 프로토콜 API를 사용하기 위한 중요한 키입니다. 이 키는 승인되지 않은 사용자로부터 데이터 남용을 방지하기 위해 반드시 필요한 항목입니다. 측정 ID와 마찬가지로 이 항목 역시 필수 요소입니다. API Secret Key를 생성하는 방법은 다음과 같습니다:
- [데이터 스트림] 메뉴로 이동합니다.
- [측정 프로토콜 API 비밀번호]를 선택하고, [만들기] 버튼을 클릭합니다.
- [측정 프로토콜 API 비밀번호]를 클릭합니다.
- [만들기]를 클릭합니다.
5. [닉네임]을 입력하고 [만들기]를 클릭합니다. 닉네임은 비밀 키를 식별하기 위한 설명이 포함된 이름으로 설정합니다.
6. 이제 API Secret Key가 생성되었습니다. [비밀번호 값]을 복사하고 안전한 곳에 저장해두세요.
이를 통해 API Secret Key를 안전하게 생성하고 보관할 수 있습니다. 이 키는 데이터 보안을 유지하고 무단 액세스를 방지하는 데 중요한 역할을 합니다.
3) client_id
lient_id는 사용자를 개별적으로 식별하는 데 사용되는 중요한 요소입니다. 이것은 GA4에서 사용자를 고유하게 식별하고 데이터를 소스에 연결하는 데 필수적인 정보입니다.
그러면, 이 client_id는 어떻게 생성될까요?
사용자가 GA4와 연결된 웹사이트를 처음 방문할 때, 각 사용자에게 고유한 client_id가 Cookie 내에 할당됩니다. 사용자가 나중에 웹사이트를 다시 방문하면 GA4는 해당 사용자의 client_id를 확인하고, 이미 존재하는 경우에는 재사용자로 판단하여 새로운 세션을 시작합니다.
만약 client_id가 존재하지 않는다면, GA4는 새로운 사용자로 간주하고 새로운 client_id를 생성합니다. 이를 통해 GA4는 신규 사용자와 재방문 사용자를 구분하고 데이터를 추적할 수 있습니다. client_id는 고유한 난수와 첫 번째 방문 시간의 조합으로 생성됩니다.
또한, 이 client_id를 가져오려면 어떻게 해야 할까요?
먼저, GA4와 연결된 웹사이트에서 Cookie 정보를 불러옵니다. 이때 document.cookie 를 사용합니다. 그런 다음, 아래의 정규식을 활용하여 client_id를 찾을 수 있습니다: document.cookie.match(/_ga=GA1\\.1\\.(\\d+\\.\\d+);/)[1]
만약 직접 클라이언트 아이디의 위치를 확인하고 싶다면, 개발자도구를 활용할 수 있습니다.
- [개발자도구]를 열고 [Application]을 클릭합니다.
- [Cookies]를 선택한 다음, name이 “_ga”인 value를 클릭하면 클라이언트 아이디를 확인할 수 있습니다.
4) event, event parameter
이벤트 항목은 이벤트 이름과 이벤트 파라미터로 구성된 배열입니다. 이를 통해 GA4는 사용자의 활동을 상세하게 추적하고 해당 활동과 관련된 데이터를 수집합니다. 아래의 코드 형식을 사용하여 GA4로 이벤트와 이벤트 파라미터를 보낼 수 있습니다.
3. 데이터 전송법
데이터를 GA4 서버로 전송하기 위해서는 필요한 구성 요소를 모두 준비한 후, 이를 활용하여 데이터를 전송하면 됩니다. 데이터를 전송할 때 필요한 요소는 GA4 서버에 요청할 URL과 PAYLOAD DATA 입니다.
1) GA4 URL
GA4 측정 프로토콜은 별도의 엔드포인트를 제공합니다. 그런데 엔드포인트가 정확히 무엇일까요?
먼저, API는 어플리케이션 간의 통신을 가능하게 하는 매커니즘입니다. API를 통해 데이터를 가져오거나 특정 기능을 활용할 수 있습니다. 측정 프로토콜을 사용하면 특정한 이벤트 데이터를 GA4로 전송할 수 있습니다. 엔드포인트는 API를 호출할 때 특정 서비스나 기능에 접근하기 위한 URL을 의미하며, 해당 URL을 통해 실행되는 로직이 포함됩니다. 따라서 API를 호출할 때 특정 엔드포인트를 통해 서비스에 요청을 보내고 응답을 받을 수 있습니다. 측정 프로토콜에서는 이 엔드포인트에 측정 ID와 비밀키 값이 사용됩니다.
2) Payload data
데이터를 웹사이트와 네트워크를 통해 주고받을 때, 전송되는 실제 데이터를 “페이로드”라고 합니다. 이것은 택배를 보낼 때의 물건과 유사한 개념입니다. 페이로드 데이터는 요청할 URL에 어떤 데이터를 포함시킬지를 정의합니다. 페이로드 데이터는 요청할 URL에 따라 다양하게 설정됩니다.
GA4 서버로 이벤트 데이터를 보낼 때는 client_id와 이벤트 매개변수가 필요합니다. 측정 프로토콜 API를 사용하여 GA4 서버로 이벤트 데이터를 보내는 예시 코드는 다음과 같습니다. 페이로드 데이터는 아래와 같이 body 안에 넣으면 됩니다.
4. Iframe 문제 해결하기
우리의 목표는 “문의하기” 버튼을 클릭할 때 폼 제출 이벤트를 정확하게 추적하는 것입니다. 그러나 주요 페이지 내에 있는 iframe은 별개의 웹 페이지로 취급되기 때문에, 메인 페이지의 구글 태그 매니저에서 iframe 내부의 이벤트를 감지하기가 어려운 상황입니다.
위에서 설명한 측정 프로토콜을 활용하여 GA4 서버로 데이터를 직접 전송하는 방법을 사용하여, iframe 내부의 이벤트를 추적해 보겠습니다. 이를 통해 “문의하기” 버튼 클릭과 같은 이벤트를 정확하게 측정하고 데이터를 GA4로 보낼 수 있습니다.
측정 프로토콜을 활용한 Iframe 내에서의 GA4 데이터 전송
먼저, GA4 측정 프로토콜의 구성 요소 4가지를 찾아봅니다. 그중에서도 가장 중요한 것은 iframe 내에서 어떻게 클라이언트 아이디를 가져올 수 있는지에 대한 문제입니다.
우리는 iframe 내에서 GA4 서버로 데이터를 전송하려고 합니다. 그러나 사용자를 식별하는 client_id는 iframe이 아닌 메인 페이지(부모 창)에서 가져와야 합니다. 이는 GA4와 연결된 구글 태그 매니저 스크립트가 메인 페이지에 설치되어 있기 때문입니다. 그래서 우리는 iframe 창에서 parent.document.cookie 를 사용하여 부모 창의 쿠키를 가져올 수 있습니다. 그리고 여기서 정규식을 사용하여 client_id를 추출할 수 있습니다.
parent.document.cookie.match(/_ga=GA1\\.1\\.(\\d+\\.\\d+);/)[1]
그 다음으로 GA4 measurement_id, API Secret Key, client_id, 그리고 전송할 이벤트를 변수로 저장합니다. 이 코드는 iframe 내에서 작동되는 함수 내에 삽입됩니다.
이렇게 코드를 삽입한 후 “문의하기” 버튼을 클릭합니다.
측정 프로토콜을 통해 이벤트 데이터가 GA4 서버로 전송되고, GA4 Debug View에서 이벤트가 추적 되는 것을 확인할 수 있습니다.
이 글에서는 측정 프로토콜을 사용하여 iframe 폼 제출 이벤트를 추적하는 두 번째 방법에 대해 알아보았습니다.
첫 번째 방법인 window.postMessage()에 대한 설명은 이전 글에서 확인할 수 있습니다. 허들러스 개발팀은 구글 태그 매니저를 활용하여 다양한 환경에서 다양한 이벤트를 구현하고 있으며, 추가 내용이 있다면 다시 안내 드릴 예정입니다.
GA4 도입 또는 마이그레이션에 도움이 필요한 경우 데이터 전문 그로스 마케팅 파트너인 허들러스에 언제든 연락해 주시기 바랍니다. 긴 글을 읽어주셔서 감사합니다.
요약
- 메인페이지 내의 iframe은 다른 출처로 간주되어 데이터 전송이 어렵습니다.
- GA4 데이터는 모두 측정 프로토콜 형태로 전송됩니다.
- GA4 측정 프로토콜을 사용하면 직접 데이터를 전송하여 사용자 관련 정보를 GA4에 기록할 수 있습니다.
해당 글은 그로스 마케팅 파트너 허들러스와 모비인사이드의 파트너쉽으로 제공되는 기사입니다.
