GTM으로 GA4 맞춤 이벤트 만들기

GTM이라고 불리는 구글 태그매니저는 웹사이트 또는 모바일 앱에서 코드 및 태그라고 통칭되는 관련 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템입니다. GTM은 웹사이트나 앱 개발자 없이 비교적 쉽게 태그를 직접 만들고 관리할 수 있다는 장점이 있으며, 다양한 조건으로 사용자의 행동들을 쉽게 추적할 수 있습니다. 

 

저번 시간에 GA4 이벤트 종류에서 맞춤 이벤트에 대해 알아보았는데요,

오늘은 이 GTM을 이용해 맞춤이벤트를 만드는 간단한 방법에 대해 알아보겠습니다. 

 

데이터너겟 메인 페이지에서 비회원일 때 ‘무료로 시작’이라는 버튼 클릭 이벤트를 만들어보도록 하겠습니다.

 

[ 태그 및 트리거 삽입 방법 ]

 

1. 먼저, 측정하고자 하는 페이지와 연동된 GTM 계정으로 들어가 줍니다.

 

1. 왼쪽 메뉴에서 ‘태그’ 메뉴를 선택해 준 후, 나타나는 화면에서 우측 상단에 새로만들기새로 만들기를 눌러줍니다.

1. 아래와 같이 태그 구성을 만들어 줍니다. 

 

1. 다음으로 트리거 영역을 누른 후 +버튼을 눌러줍니다.

1. 그러면 아래와 같이 트리거 유형을 만들 수 있는 화면이 나타나는데,

트리거 구성을 입력하기 위해 먼저 데이터너겟 페이지에서 우클릭 후 검사버튼을 눌러 개발자 도구를 열어줍니다. 

1. 개발자 도구 창을 열어 ‘무료로 시작’ 버튼에 대한 요소를 확인해 줍니다.

 

해당 버튼 누르면 url링크로 가게끔 설정되어있고,클릭은 <a> 태그로 확인해 주시면 되는데 start_btn으로 구성되어 있는 것을 확인하실 수 있습니다.

 

참고) 링크만 : <a> 태그일 때  / 모든 요소 : <a> 태그가 아닌 경우

  

 

메인페이지에서 start_btn은 2개가 있는데, 위에 나와있듯이 0으로 설정되어 있는 버튼을 사용해 주면 되겠습니다. 

1. 트리거의 조건 값을 세부적으로 입력해 줍니다.

   

 

1. 해당 버튼을 누르면  //datanugget.io/login 링크로 이동되어, 

Click URL 조건 값에 위 링크를 넣어줍니다.

 

1. 클릭 요소에는 start_btn값을 넣어주는데 6번에서 말했듯이 0으로 설정되어있는 버튼값을 넣어줍니다. =>. start_btn [0]

 

1. 메인페이지에서만 이 트리거가 발생하도록 조건을 추가해 줍니다. 

1. 만들어둔 태그를 저장하고, 제출하기 전에 미리 보기를 클릭해 줍니다.

[ 세팅된 태그 테스트 방법 ]

 

1. 미리 보기 화면에서 아래와 같은 창이 뜨는데 클릭이벤트가 발생하는 URL주소를 입력해 주면 디버그 할 수 있는 사이트가 열리게 됩니다.

1. 해당 사이트에서 ‘무료로 시작’ 클릭을 누를 경우, 만들어준 태그가 발생하는지 확인해 줍니다. 

1. 확인이 되셨다면 미리 보기를 마치고 제출 버튼을 누르면 마무리되겠습니다. 

만약 태그가 발생하지 않았다면, 좌측 태그 리스트를 확인하여 발생하지 않은 이유를 찾아 해결해 주시면 되겠습니다.

1. GTM에서 제출이 완료되었다면, 디버그 모드가 아닌 실제 홈페이지에서 버튼을 클릭해 주고GA4 실시간 보고서에서 이벤트가 정상적으로 수집되고 있는지 확인해 주면 되겠습니다.

GTM으로 맞춤 이벤트 세팅하는 방법에 대해 알아보았는데요.

웹 사이트 코드에서 따로 수정 없이 태그를 이용해 이벤트를 생성할 수 있고, 빠르고 효율적으로 작업 관리가 가능한 것이 장점입니다. 미리 보기 기능을 이용해 디버깅도 해볼 수 있어서 사전 테스트에도 용이합니다. 

 

GA4 맞춤이벤트를 만드려고 하실 경우 GTM 툴을 사용해 보시는 걸 추천드리겠습니다. 

블로그 구독자 문의 주소 : info@weirdsector.co.kr

그로스 해킹 파트너, LABBIT 바로가기

LABBIT을 운영하는 Team 위어드섹터 만나러 가기

브랜드의 성장박스 Data Nugget