구글 태그 매니저를 통한 GA4 기본 이벤트 수집 방법

이번 글에서는 구글 애널리틱스4를 활용해서 웹사이트에 방문한 사용자의 기본 이벤트 데이터를 수집하는 방법에 대해 알려드릴께요.

저는 GA4로 수집되는 모든 데이터를 구글 태그 매니저(GTM)로 수집합니다. 구글 태그 매니저를 사용해야 데이터 수집 및 관리를 위한 리소스를 줄일 수 있으며, GA4 관련 추적 코드 및 이벤트 함수를 웹사이트에 직접 삽입하는 것보다 훨씬 장점이 많습니다.

이번 글에서는 구글 애널리틱스와 구글 태그 매니저를 처음 접하는 분들을 위해 계정 생성 시 주의할 점부터, 계정 세팅 과정에서 어떤 점을 고려해야 하는지 설명드리겠습니다.

GA4 시작하기

구글 계정 만들기

구글 애널리틱스4는 구글에서 제공하는 솔루션이므로 구글 계정이 있어야 합니다. 구글 계정이 없다면 아쉽지만 GA4를 이용할 수 없습니다. 계정이 없으신 분들은 이번 기회에 계정을 만드시길 바랍니다. 구글 검색엔진에서 '구글 계정 만들기'를 검색해서 첫 번째로 나오는 링크를 클릭합니다.

구글 계정을 만들기 위한 기본 정보를 입력합니다. 자신이 운영하는 웹사이트나 블로그를 분석하는 게 아니라 회사 홈페이지나 쇼핑몰을 분석하는 경우라면 회사 이메일로 구글 계정을 생성하시기 바랍니다. 일반적으로 회사에서는 '@이하' 주소에 회사명이 들어가는 경우가 많습니다.

아래와 같이 회사 이메일 주소를 입력하고 기본 정보를 넣은 뒤 다음 버튼을 클릭합니다.

GA4 계정과 속성 만들기

회사 이메일로 구글 계정을 만드셨다면 구글 검색창에 '구글 애널리틱스'라고 검색합니다. 첫 번째로 나오는 'Google 애널리틱스' 링크를 클릭합니다.

구글 애널리틱스에 대한 안내말이 나옵니다. 측정 시작 버튼을 클릭합니다.

계정 이름에는 회사 이름을 입력합니다. 회사에는 기업 웹사이트를 비롯해 여러 도메인의 홈페이지가 존재하므로 특정 서비스명을 넣는 것보다 회사 이름을 넣으시기 바랍니다. 참고로 구글 애널리틱스4는 계정 하위에 속성이 존재합니다. 계정 데이터 공유 설정과 관련한 체크박스에 체크하고 다음 버튼을 클릭합니다.

다음은 속성 정보를 입력하실 차례입니다. 속성 이름과 시간대 및 통화를 선택합니다. 속성 이름은 앞에 GA4를 붙이고 어떤 서비스인지를 입력해 줍니다. 현재 UA를 사용하고 있는 계정이 대다수이므로 속성 구분을 위해 앞부분에 GA4를 입력하는 것을 권장드립니다. 시간대는 대한민국, 통화는 대한민국 원(KRW)을 선택합니다.

여러분이 운영하시는 서비스에 맞는 비즈니스 정보를 선택합니다. 크게 중요한 사항이 아니므로 고심하지 않으셔도 됩니다. 선택을 마쳤으면 '만들기' 버튼을 클릭합니다.

구글 애널리틱스의 소식을 이메일을 통해 전달 받을 수 있습니다.  원하시는 항목에 체크한 뒤 저장 버튼을 클릭합니다. 이제 GA4 속성 생성이 완료되었습니다.

속성 세부 설정하기

GA4 속성 안에는 UA와 다르게 보기가 없습니다. 대신 '데이터 스트림'이 존재합니다. 데이터 스트림의 종류는 웹, Android 앱, iOS 앱 이렇게 3가지입니다. 웹사이트 방문자 데이터를 수집할 목적이므로 '웹'을 선택합니다.

데이터 스트림 정보를 설정할 차례입니다. http을 제외한 웹사이트 기본 도메인 URL과 스트림 이름을 입력합니다. 스트림 이름과 URL은 나중에 수정할 수 있습니다. '웹' 스트림이므로 앞에 'Web'이라는 구분자를 넣고 서비스 또는 쇼핑몰 이름을 입력하시길 권장드립니다. 입력을 마쳤다면 '스트림 만들기' 버튼을 클릭합니다.

GA4 속성 하위에 웹 스트림이 생성되었습니다. 데이터 스트림이 생성되었다고 데이터가 수집되는 건 아닙니다. 별도의 추적 코드를 웹사이트 안에 삽입하거나 구글 태그 매니저(GTM)를 활용해서 데이터를 수집해줘야 합니다. GTM 태그로 기본 이벤트를 수집하기 위해 화면에 보이는 측정 ID를 복사해서 메모장에 붙여넣어 둡니다.

구글 태그 매니저 시작하기

계정과 컨테이너 만들기

구글 태그 매니저는 태그와 트리거를 활용해서 데이터를 수집하고 관리할 수 있는 구글의 솔루션입니다. 구글 애널리틱스와 완전 별개의 솔루션이라고 생각하시면 됩니다. 마케터나 분석 담당자 입장에서 데이터 수집 과정에서 번거로움이 GTM을 활용하면 많은 부분이 해결됩니다. 우선 구글 태그 매니저 계정을 생성하기 위해 구글에서 '구글 태그 매니저'를 검색합니다. 검색 결과에 보이는 구글 태그 매니저 도메인 링크를 클릭합니다.

구글에 로그인 된 상태라면 아래와 같은 화면이 보이실 겁니다. '계정 만들기'를 클릭합니다.

구글 태그 매니저는 계정이 있고 하위에 컨테이너가 존재하는 구조입니다. GA4에서는 계정 하위에 속성이 있습니다. 계정 이름을 GA4와 동일하게 입력하고 국가는 '대한민국'을 선택합니다. 계정 하위에 생성될 컨테이너 설정을 할 차례입니다. 컨테이너 이름을 넣고 타겟 플랫폼을 웹으로 선택한 뒤 만들기 버튼을 클릭합니다.

​​웹사이트 HTML에 구글 태그 매니저 추적 코드 넣기

계정과 컨테이너가 생성되었습니다. 구글 애널리틱스 데이터를 수집하기 위해 첫 번째 빨간 박스 안에 있는 GTM 컨테이너 스니펫(추적 코드)을 웹사이트의 공통 head 영역에 삽입하거나 회사의 개발팀에 요청합니다. 일반적으로 웹사이트의 대부분의 페이지들은 동일한 head 영역을 사용하는 경우가 많기 때문에, 한번 삽입하면 모든 페이지에서 GTM 스니펫(추적 코드)이 적용됩니다.

페이지를 구성하는 HTML 정보들은 페이지 최상단부터 순차적으로 호출되므로 가급적 스니펫을 head 영역의 최상단에 삽입하는 것을 권장드립니다. 두 번째 빨간 박스 안에 스니펫은 웹사이트 body 태그 바로 뒤에 삽입합니다. body 태그 바로 뒤에 삽입해야 추후 ‘구글 서치 콘솔’ 연동 작업 시 별도의 작업이 필요하지 않습니다. 삽입 위치에 대해 개발자에게 자세히 설명합니다.

개발팀에게 코드 임베드를 부탁할 때 팁

간혹 개발팀에서 스니펫을 head 영역에 삽입하는 걸 꺼리는 경우가 있는데요. 스니펫을 웹사이트 footer(웹사이트 하단 공통 영역)에 넣을 경우 데이터가 정상적으로 수집은 되겠지만, 웹사이트가 열리는 도중에 이탈한 고객의 경우 footer 영역에 있는 GTM 스니펫이 실행되지 않으므로 데이터 또한 수집되지 않습니다. 트래픽이 많은 웹사이트의 경우 스니펫 위치에 따라 사용자수 차이가 많이 벌어질 가능성도 배제할 수 없습니다.

개발팀과 커뮤니케이션 할 때 팁을 드리자면, 가급적 최대한 논리적인 이유를 제시하면서 작업 요청을 하시는 게 서로를 위해 좋습니다. 무조건 해달라는 식의 요청은 개발팀 입장에서 난처할 뿐더러 웹사이트의 유지보수 및 운영의 책임을 지는 입장에서 곤란할 수밖에 없습니다. 스니펫 삽입이 완료되었다면 GTM 사용을 위한 준비가 완료된 것입니다.

잘 삽입되었는지 확인하기

개발팀에서 구글 태그 매니저 스니펫 삽입이 완료되었다고 전달받으면 정말로 제대로 삽입되었는지 체크해야 합니다. 개발팀을 믿지 못해서가 아니라 요청하는 입장에서 해야 하는 업무라고 생각하시기 바랍니다. 일반적으로 개발자 모드에서 스니펫 삽입 여부를 확인할 수도 있지만, 저는 개인적으로 크롬 확장 프로그램 사용을 권장드립니다.

구글에서 '크롬 웹스토어'를 검색해서 접속한 뒤 'Tag Assistant'라는 확장 프로그램을 설치하면 브라우저 주소 입력창 우측에 '태그' 아이콘이 뜹니다. 그러고 나서 특정 웹페이지에 접속한 뒤 해당 아이콘을 클릭하면 아래와 같이 GTM 스니펫이 정상 설치되었는지 알려줍니다. GTM 뿐만 아니라 GA4 데이터도 같은 방식으로 검수하시면 됩니다. 초록색 아이콘이 뜬다면 GTM이 정상적으로 설치된 것입니다.

이벤트 수집 시작하기

구글 태그 매니저 태그 생성하기

본격적으로 기본 이벤트의 데이터를 수집해 봅시다. 그러기 위해서 우선 태그부터 만들어 볼게요. 다시 GTM으로 돌아와서 생성한 컨테이너를 클릭한 뒤 아래 화면의 좌측 메뉴에서 '태그' 메뉴를 선택한 후 '새로 만들기' 버튼을 클릭합니다. 태그를 활용해서 GA4 기본 이벤트를 수집하려고 합니다.

태그 유형에서 Google 애널리틱스 태그 유형을 선택하고 이후 Google 태그를 선택합니다. 해당 태그는 처음 GA4 기본 이벤트를 수집할 때 사용되고, 이후부터는 GA4 이벤트 태그 유형을 주로 사용할 것입니다.

Google 태그 이름을 입력합니다. 저는 'GA4 - Google Tag'으로 입력했습니다. 측정 ID 필드에는 데이터 스트림 세부정보에서 확인되는 '측정 ID'를 입력해도 되지만, 그렇게 하지 않고 변수 선택 아이콘을 클릭하겠습니다.

변수 선택 화면에서 우측 상단에 있는 파란색 '+' 아이콘을 클릭합니다.

변수 유형에서 '상수'를 선택합니다. 특정 문자열이나 숫자를 입력할 수 있는 변수 유형입니다.

상수 이름을 'GA4 - Measurement ID - Web'이라고 입력한 뒤, 값 필드에 아까 메모장에 복사한 웹 스트림 ID 값을 넣어줍니다.

구글 태그 매니저 트리거 생성하기

태그 설정이 완료되었습니다. 이제 태그가 언제 실행되는지를 결정하는 트리거를 생성할 차례입니다. 항상 태그는 트리거를 동반합니다. 태그만 존재할 수 없으며, 트리거 또한 트리거만 존재할 수 없습니다. 태그 하단의 트리거 영역을 클릭합니다.

트리거 목록에서 'All Pages' 트리거를 체크하고 '추가' 버튼을 클릭합니다. 모든 페이지에서 태그가 실행된다는 의미입니다.

태그 및 트리거가 잘 작동되는지 검수하기 - 1) 구글 태그 매니저에서

기본 이벤트를 수집하기 위한 태그 및 트리거 설정을 완료했습니다. 태그가 정상적으로 실행되는지 검수하기 위해 우측 상단의 '미리보기' 버튼을 클릭합니다.

미리보기(Preview) 모드가 적용될 웹페이지 URL을 입력합니다. 여기서는 홈페이지 메인 URL을 입력하고, 추후 특정 페이지에 대한 검수를 할 때에는 해당 페이지의 URL을 넣어주시면 됩니다.

연결이 정상적으로 되었다면 아래와 같이 'Connected' 팝업이 노출됩니다. 'Continue' 버튼을 클릭합니다.

GTM 화면이 미리보기 모드로 바뀌고 해당 페이지에서 어떤 태그가 실행되고 실행되지 않았는지가 표기됩니다. 'Tag Fired' 영역에 아까 생성한 GA4 기본 태그가 확인된다면 정상적으로 태그가 실행된 것입니다. 좌측에는 GTM 이벤트가 실행된 순서가 보입니다. 이벤트가 실행되는대로 태그가 작동하고 그에 따라 데이터가 수집된다고 이해하시면 되겠습니다.

태그 및 트리거가 잘 작동되는지 검수하기 - 2) GA4에서

GA4는 DebugView 메뉴가 존재합니다. 현재 수집되는 데이터를 실시간으로 확인할 수 있는 기능입니다. GA4 속성에 접속해서 좌측 메뉴에서 '관리'를 클릭합니다.

DebugView 메뉴를 클릭하면 현재 수집되는 이벤트 목록이 확인됩니다. 'first_visit', 'page_view', 'session_start' 이렇게 3가지 이벤트가 실행되는 게 보입니다. 여기서는 각 이벤트별 매개변수의 값까지 확인이 되므로 이벤트가 제대로 수집되는지를 확인하고 싶다면 DebugView에서 체크하시면 됩니다.  

좀 더 확실하게 체크하기 위해 좌측 '보고서' 메뉴를 클릭한 뒤 '실시간' 하위 메뉴로 접속합니다. 현재 접속한 사용자가 '1'으로 확인됩니다. 다른 페이지도 방문하면서 페이지 pave_view 이벤트 및 페이지 제목 값이 바뀌는지 체크합니다. 이상이 없다면 GA4 기본 이벤트 수집이 정상적으로 완료된 것입니다.

구글 태그 매니저로 회원가입 이벤트 수집하기

우선 회원가입을 진행해서 가입 시 URL 정보를 확인합니다. 카페24 쇼핑몰의 경우 아래 URL이 회원가입 시 확인되는 URL 인데요.

구글 애널리틱스 실습 데모 사이트

구글 애널리틱스 실습 데모 사이트

구글 애널리틱스 실습용굿딜

이를 기반으로 회원가입 태그 실행을 위한 트리거 조건을 세팅할 수 있습니다.

이벤트 수집을 위한 태그 세팅하기

회원가입 이벤트 태그 이름은 'sign_up'으로 세팅하겠습니다. 다른 이름으로 세팅하셔도 되지만 저는 구글에서 추천하는 이벤트 이름을 사용하겠습니다.

User Property로 사용자의 ID를 암호화 한 값을 수집하겠습니다. 카페24는 해당 값을 자바스크립트 변수로 제공합니다. 회원가입 이벤트 수집 시 ID 정보를 같이 수집하는 경우 반드시 암호화 작업을 진행해야 합니다. 카페24 에서는 변수로 제공하지만 일반 웹사이트는 개발팀과 논의를 통해 암호화 된 ID 값을 dataLayer에 호출하고 이를 변수로 수집하는 과정이 필요합니다.

GTM 변수 유형 중 자바스크립트 변수를 선택해서 암호화 된 user id 값을 수집하기 위한 세팅을 진행합니다.

태그 실행을 위한 트리거 세팅하기

다음으로 태그를 실행하기 위한 트리거를 세팅합니다. URL에 '/member/join_result'가 포함된 경우 태그가 실행되는 조건입니다.

회원가입 시 아래와 같이 태그가 정상적으로 실행되면 트래거 세팅이 잘 된 것입니다.

user_id 값도 정상적으로 수집이 되네요. 이처럼 GTM 미리보기 화면에서 태그를 클릭하면 실제로 수집되는 값을 체크할 수 있습니다.

회원가입 이벤트를 전환으로 설정하기

전체 이벤트들 중 '전환'의 성격을 띄는 이벤트는 '전환' 이벤트로 설정할 수 있습니다.  회원가입 이벤트를 전환으로 설정해보겠습니다. GA4에서 Admin 메뉴 접속 후 Conversions 메뉴를 클릭합니다. 전환 이벤트 목록이 확인되는데 여기에 'sign_up' 이벤트를 추가하겠습니다.

New conversion event 버튼을 클릭하고 'sign_up'을 입력한 뒤 저장 버튼을 클릭합니다. 회원가입 이벤트에 대한 전환 세팅이 완료되었습니다.

구글 애널리틱스4 기본 이벤트 데이터를 구글 태그 매니저(GTM)를 활용해서 수집하는 과정을 비롯해서 회원가입 맞춤 이벤트 수집 및 전환 세팅 과정을 보여드렸습니다.

여기서 추가로 수집하고 싶은 이벤트는 맞춤 이벤트로 수집하면 되고, 역시 GTM을 활용해서 데이터를 수집하면 됩니다. 뭐든 처음이 가장 중요합니다. 처음부터 습관을 잘 들이면 시간이 지났을 때 효과를 봅니다.

앞으로 GTM을 자주 접하면서 데이터 수집 과정을 익히게 될 것입니다. 처음 사용하면 다소 생소하고 어려울 수 있지만 데이터 수집 및 관리에 대한 오너십(ownership)을 가지고 하나씩 익숙해지면, 맞춤 이벤트부터 시작해서 외부 솔루션의 추적 코드 삽입까지 전부 GTM으로 관리할 수 있으실 겁니다.