[GA4] #6. 구글 애널리틱스4 이벤트 만들기 (구글 태그 매니저로 이벤트 생성)

GA4에서 이벤트는 웹사이트(또는 앱)와 사용자의 상호작용하는 데이터를 의미합니다. 쉽게 말해, 사용자의 행동을 데이터화 한 것이 이벤트라고 할 수 있죠. 보통은 서비스에 맞게 이벤트를 만들고 데이터를 확인하는데요. GA4는 친절하게도 자동으로 수집되는 이벤트가 있습니다.

(*초기 설정 시 '향상된 측정'을 켜야 자동 수집된다.)

 

구글 애널리틱스 4 이벤트 만들기

 

하지만 자동 수집되는 이벤트만으로는 원하는 분석 결과를 얻어낼 수 없습니다. 분석하고 싶은 사용자 액션을 추적하기 위해 개발자가 직접 설정할 수 있는 기능이 있는데요. 바로 '맞춤 이벤트'입니다. 보다 구체적으로 분석하기 위해 반드시 필요한 이벤트입니다.

 

맞춤 이벤트 만들기

맞춤 이벤트는 어떻게 만들까요? 아래 옵션 중 하나를 사용해서 만들 수 있는데요.

• Google 태그 직접 추가
• Google 태그 관리자 = GTM
• GA4 이벤트 만들기 

Google 태그 직접 추가

가장 전통적인 방법이지만 개발 지식이 필요하기 때문에 추천드리지 않는 방식입니다. 태그의 속성에 직접 gtag() 함수를 등록해서 행동이 있으면 실행되도록 하는 방식입니다. 서비스 규모가 작고, 트래킹해야 할 이벤트가 많지 않다면 이 방법으로 추가해도 되지만, 구글 태그 매니저가 있는 상황에서 큰 메리트가 없다고 생각합니다.

우선, 개발 지식이 필요하고, html에서 수정해야 하기 때문에 코드가 깨질 수 있다는 불안함이 있습니다. 이벤트가 많아지거나 복잡한 이벤트의 경우 코드가 더 복잡해진다는 단점도 있죠. 그래서 추천드리는 방식이 바로 '구글 태그 매니저(GTM)'입니다.

 

구글 태그 매니저(Google Tag Manager, GTM) 활용하기

구글 태그 매니저 계정이 없는 분들은 이전 포스팅을 참고하세요.

[GA4] #5. 구글 태그 매니저(Google Tag Manager, GTM) 연결하기

 

위 포스팅에서 GTM 계정 및 컨테이너 설정을 완료한 뒤에 태그를 만들어야 합니다. 구글 태그 매니저 화면에서 '새 태그 추가'를 누르시거나 태그로 들어가서 '새로 만들기'를 누르시면 다음과 같은 화면이 나오게 됩니다.

구글 태그 매니저 태그 만들기

'태그 구성'을 블록을 클릭한 다음 '태그 유형'을 선택해주어야 하는데요. 저희는 GA4에 활용할 태그가 필요하기 때문에 Google 애널리틱스: GA4 구성을 선택해주시면 됩니다. 그리고 GA4 속성에서 봤던 G-xxxxxxxx 형태로 된 ID값을 측정ID에 넣어주세요. 

 

구글 태그 매니저 태그 만들기

Google 애널리틱스 관련 태그는 '구성'과 '이벤트' 두 가지가 있는데요. 두 차이를 간단하게 설명드리면,

 

- 구성 태그 : 웹사이트나 애플리케이션에서 필요한 기본 추적 설정들을 구성하는 태그. 
- 이벤트 태그 : 사용자의 특정 행동이나 상호작용을 추적하여 데이터를 수집하는 태그. 

 

예를 들어, 쇼핑몰을 운영한다고 가정해봅시다.

 

구성 태그는 웹사이트에 필요한 기본 데이터 추적 설정을 위해 사용됩니다. 방문자 수와 같은 데이터 파악을 위해 설정해야 합니다. 이벤트 태그는 '장바구니 담기', '회원가입' 등과 같은 특정 행동이나 상호작용을 추적하기 위해 사용됩니다.

 

Q. 구성 태그는 반드시 필요한가요?
A. 반드시 필요하진 않지만 데이터 정확성과 작업 효율성이 높아집니다.
기본 추적 및 서비스 설정이 정상적으로 로드되지 않아 데이터 누락이 있을 수 있고, 개별 이벤트에 대한 설정이 필요한 경우 일일이 수정해야 하는 번거로움이 있습니다.

 

다음은 트리거를 설정해줘야 합니다. 트리거 블록을 클릭하면 3가지 트리거 중 선택하도록 나와 있습니다.

 

구글 태그 매니저 트리거

1. All Pages (페이지뷰)
   웹 사이트의 모든 페이지가 로드될 때마다 작동합니다. 페이지 로드 시점에 작동하는 대부분의 태그를 발행하는 데 사용되는 일반적인 트리거입니다. 이 트리거는 구성 태그 뿐 아니라 다양한 이벤트 태그에도 활용 가능합니다.
2. Consent Initialization - All Pages (동의 초기화)
   다른 트리거가 실행되기 전 동의 설정이 적용되도록 설계되었습니다. 사용자의 동의 상태를 설정하거나 업데이트가 필요한 경우 활용합니다. 가끔 사이트에서 보이는 '개인정보 동의 팝업'이나 '쿠키 동의 팝업'이 나오는 경우 동의 초기화 트리거가 좋습니다.
3. Initalization - All Pages (초기화)
   동의 초기화 트리거를 제외한 모든 트리거보다 빠르게 작동합니다. 페이지 로드 과정 중 초기화 단계에서 작동되기 때문에 페이지 로드 전 필요한 조건 및 설정을 제어하기 위해 활용됩니다. 

 

아무리 이곳저곳을 뒤져봐도 1번과 3번의 차이를 쉽게 설명해주는 곳이 없었습니다. 보통 어떤 트리거를 선택하는지도 다 다르게 말하고 있어 정답을 모르겠습니다... 정답은 없겠지만.. 우선 구글 공식 가이드에는 이렇게 나와 있습니다.

 

구글 태그 매니저 구성 태그 트리거

'초기화 - 모든 페이지' 트리거를 사용한다고 나와있지만, 앞에 전제 조건이 달려있습니다. Google 애널리틱스 4 구성 태그가 다른 트리거보다 먼저 실행되도록 하려면... 저는 이해가 잘 안돼서 'Initialization - All Pages' 트리거 예시를 몇 개 찾아봤는데요. 공유드리겠습니다.

 1. 초기 설정 기록 : 사용자가 웹사이트에 접속할 때, 기본 설정 값이나 시스템 환경 정보 같은 설정을 기록해야 하는 경우
2. 지역화 처리 : 다양한 언어와 시간대를 지원할 때  사용자에 맞게 웹페이지를 지역화해야 하는 경우
3. A/B테스트: 사용자에게 무작위로 다른 버전의 페이지를 보여주기 위한 테스트 스크립트 설정이 필요한 경우

열심히 찾아본 결과 나름대로 낸 결론은 '일반적으로 'All Pages' 트리거를 사용하면 될 것 같다'입니다. 기초적인 단계에서는 다른 트리거보다 먼저 발생해야 하는 태그는 없을거라고 생각하기 때문인데요. 하지만, 운영하고 있는 서비스의 특징에 맞게 트리거를 설정해주시면 될 것 같습니다.

 

제출하기 버튼 클릭 필수

이렇게 구성태그를 만들면 끝이 아닙니다! 우측 상단에 제출 버튼을 누른 후 게시 해주셔야 변경 사항이 반영됩니다. 버전 이름을 작성하게 되어 있는데, 히스토리 관리를 위해 버전 이름 및 설명을 꼼꼼하게 작성해주시는 것이 좋습니다. 여기까지 완료하면 기본적인 이벤트 수집이 가능합니다.

 

구성 태그가 만들어졌으면 이제 맞춤 이벤트를 만들어봐야겠죠? 이벤트를 만들기 전에 소비자의 어떤 행동을 트래킹하고 싶은지 먼저 정해야 합니다. 블로그 기준으로 검색 버튼 클릭으로 한 번 만들어보겠습니다.

 

구글 태그 매니저 왼쪽 메뉴에서 트리거 선택하고 '새로 만들기' 버튼을 눌러준 다음 트리거 이름을 작성합니다. 트리거 이름은 구체적으로 알 수 있게 작성하는 것이 좋습니다. 예를 들어 '버튼 클릭'으로 작성하면, 어떤 버튼 클릭인지, 어디에 적용되는건지 알기 어렵기 때문에 이름만 봐도 알 수 있을 정도로 작성하면 좋습니다. 

 

트리거 클릭 유형

트리거 유형은 요소에 따라 다르게 설정하면 되는데, 이번에 설정할 트리거는 '클릭'이기 때문에 두 가지 중에서 선택해주시면 됩니다. HTML <a> 태그일 경우 '링크만', 아니라면 '모든 요소'를 선택해주면 됩니다.

 

크롬에서 HTML 코드 확인하는 방법

HTML <a> 이런걸 확인하는 방법은 크롬 브라우저에서 원하는 버튼을 우클릭 하면 검사라는 메뉴가 나옵니다. 클릭하면 HTML 코드가 좌르륵 나오는데, 버튼에 해당하는 코드가 하이라이트 된 채로 보이고, 마우스 오버를 하면 어떤 버튼인지도 화면상 표시됩니다.

 

유형 선택을 한 다음, '모든 클릭'과 '일부 클릭' 중 선택해야 하는데 저는 검색 아이콘에 대한 클릭만 볼 예정이기 때문에, '일부 클릭'으로 설정해줍니다. 일부 클릭으로 설정하면 아래와 같이 조건을 설정하는 창이 나오게 되는데요. 필요한 변수를 정해서 작성하시면 됩니다.

 

구글 태그 매니저 트리거 만들기

Page Path는 클릭이 일어나는 페이지 경로

Click Class는 클릭하는 요소의 클래스 명입니다.

그 외에도 변수는 다양하기 때문에 액션을 정의할 수 있는 변수를 사용해주시면 되겠습니다. 다만 트리거 생성 시, 바뀌지 않는 값으로 넣어주시는 것이 좋습니다. 값이 바뀌게 되면 이벤트 수집에 문제가 생길 수도 있습니다. 위에서는 Click Classes 로 설정했지만 가장 추천하는 방법은 CSS를 활용하는 것입니다.

 

CSS 추천 이유 및 활용 방법
1. 추천 이유 : click class / URL / title 등 중복될 가능성이 있는 값 보다는 CSS를 활용하면 중복 가능성이 없습니다.
2. 활용 방법 : 변수를 Click Element로 설정하고, 조건은 'CSS 선택 도구와 일치'로 선택합니다. 그 다음 우측에 값을 입력해주어야 하는데요. 우측 값은 원하는 링크 우클릭 - 검사 - 하이라이트 된 코드 - 우클릭 - Copy - Copy selector - 코드 복사 붙여넣기

구글 태그 매니저 CSS 활용

이렇게 트리거 생성이 끝났으면 이제 '이벤트 태그'를 설정해야 합니다. 트리거가 발생했을 때 GA4로 전달해주는 역할을 하기 때문에 트리거만 있으면 아무 소용이 없습니다. 왼쪽 태그 메뉴로 들어가서 새로 태그를 만들어줍니다.

태그 유형 : 'Google 애널리틱스: GA4 이벤트'

구성 태그 : 위에서 만들어 둔 구성 태그

이벤트 이름 : 직관적인 이벤트명
트리거 : 위에서 만들어 둔 트리거

구글 태그 매니저 태그 만들기

 

태그까지 만들었으면 이제 제대로 작동하는지 확인하는 단계가 남았습니다. 우측 상단에 '미리보기'를 클릭한 다음 확인하고 싶은 페이지 URL을 작성해주고 connect 를 클릭합니다.

 

구글 태그 매니저 어시스턴트

입력한 페이지로 이동되면 "Tag Assistant Connected" 메시지가 보이는데요. 이제 태그를 심어둔 돋보기 버튼을 클릭해보겠습니다.

 

구글 태그 매니저 어시스턴트

제대로 태그 설정이 됐다면, 위와 같이 'Tags Fired'에 이벤트가 수집되는 것을 확인할 수 있습니다. 만약 'Tags Not Fired'에 이벤트가 들어가 있다면, 이벤트를 발생하는 행동을 하지 않았거나 제대로 설정이 안됐다는 의미입니다. 해당 이벤트를 클릭하면 어느 부분에서 설정이 제대로 됐고, 안됐는지 확인할 수 있습니다.

 

여기까지 확인이 됐다면 마지막으로 '제출'을 클릭해주시면 됩니다.

 

GA4 이벤트 만들기

GA4에서도 직접 이벤트를 만들 수 있습니다. 이 방법은 기존에 존재하는 이벤트를 바탕으로 새로운 이벤트를 발생시키는 방식입니다. '관리 - 속성 - 이벤트'에서 우측 상단 '이벤트 만들기'를 클릭합니다.

GA4 이벤트 만들기

다시 한 번 우측 상단의 '만들기'를 클릭하면 아래와 같은 창이 뜨는데요. 방명록 페이지 뷰를 따로 확인하기 위한 이벤트를 만든다고 가정해보겠습니다. 

 

GA4 이벤트 만들기

이벤트 이름을 작성하고, 이벤트에 맞는 조건을 설정해줍니다. 페이지뷰를 보고 싶으니까 event_name을 page_view로 해주고, 페이지 제목에 '방명록'을 포함시켜줍니다. '소스 이벤트에서 매개변수 복사'는 체크해주시는 것이 좋습니다. 기존 이벤트가 가지고 있는 매개변수를 맞춤 이벤트에서도 가져온다는 의미입니다. 이렇게 입력하고 '만들기'를 클릭하면 맞춤 이벤트가 생성됩니다. 

 

다양한 방식이 있지만 구글 태그 매니저로 관리하는 것이 상대적으로 간편하기 때문에 추천드립니다.