본문 바로가기
IT 정보

[GTM] 클릭 이벤트 설정 방법 (기초편)

by vagabonder94 2024. 4. 16.
반응형

 

클릭해 주셔서 감사합니다.

오늘은 구글 태그 매니저(Google Tag manager)에서 클릭 이벤트를 설정하는 방법에 대해 알아보겠습니다.

 


 

개요

구글 태그 매니저를 사용하면 개발자의 도움 없이도 사이트 내에 있는 버튼 혹은 앵커 태그(a)에 클릭 이벤트를 설정하거나 사용자가 사이트에 접속하여 페이지마다 얼마나 스크롤을 했는지 확인할 수 있습니다. 사이트의 UX/UI를 개선했을 때 가장 직관적으로 성공 여부를 판단할 수 있는 건 사용자의 행동을 정략적인 데이터를 통해 확인해 보는 것입니다.

하지만, 개선할 때마다 개발자를 통해 별도의 추적 스크립트를 심는 것은 추가적인 소통과 개발자의 스케줄 고려 등 여러모로 불편한 점이 많습니다. 이 구글 태그 매니저는 이러한 불편함을 확실하게 해소해 줄 수 있는 툴이라고 볼 수 있습니다. 그럼 본격적으로 클릭 이벤트를 설정할 수 있는 방법에 관해 설명하겠습니다.

 

 

 

클릭 이벤트 설정 방법

버튼 혹은 앵커 태그(a)에 클릭 이벤트를 설정하는 프로세스를 간단히 나열하면 아래와 같습니다.

 

1. 변수 페이지에서 상호 작용에 필요한 변수 정의

2. 트리거(동작 액션) 생성

3. 태그 생성 후 트리거와 연결

 

그럼 이제 각 프로세스에 대해 더 상세하게 설명하겠습니다.

 

 

1. 변수 페이지에서 상호 작용에 필요한 변수 정의

변수 페이지에서 상호작용에 필요한 변수를 설정하는 것은 말 그대로 우리가 트래킹하고자 하는 액션(클릭, 스크롤 등)을 추가하는 것이라고 생각해 주시면 되겠습니다.

 

변수 설정 페이지
변수 설정 화면

 

우리는 클릭 액션을 트래킹할 것이기 때문에 그에 따른 변수를 모두 선택해 줍니다.

 

 

2. 트리거(동작 액션) 생성

두 번째로 트리거를 생성해 주면 됩니다. 기획자는 트래킹할 버튼의 특징을 본인의 웹사이트에 개발자 도구를 통해 확인 후 설정해 주면 됩니다.

트리거 생성 화면
경로: LNB 트리거 선택 > 새로 만들기 > 트리거 구성 > 트리거 유형

 

먼저 위 페이지로 접근한 뒤, 실제 페이지에서 버튼의 특징을 만들어보면 되는데, 가장 통상적으로 사용되는 조건은 Click URL(버튼에 설정된 URL로 구별)입니다. Click URL로 설정하는 방법은 간단합니다.

 

버튼 URL 확인
웹사이트 개발자도구(F12 클릭 시 출력됨)

 

위 이미지와 같이 개발자도구를 통해 원하는 버튼 요소의 URL을 확인하고 그 URL을 해당 트리거 조건에 걸어주면 됩니다. 이 URL이 해당 페이지의 여러 버튼에 설정되어 있는 경우, Click Text와 같은 새로운 트리거 조건을 통해 더 세세하게 해당 버튼의 특징을 잡아줄 수 있습니다. 위 설명대로 작성 해당 버튼의 트리거 조건을 설정하면 아래와 같습니다.

 

트리거 세부 설정 화면
트리거 구성 완료 화면

 

트리거를 다 만들었다면, 이제 트래킹 태그를 만들고 트리거를 설정해 버튼이 클릭 될 때마다 자신의 구글 애널리틱스에 이벤트를 보낼 수 있습니다.

 

 

3. 태그 생성 후 트리거 연결

태그를 만드는 건 간단하게 설정할 수 있습니다.

태그 생성 화면
경로: LNB 태그 선택 > 태그 구성 선택 > 태그 유형 중 'Google 애널리틱스: 유니버설 애널리틱스' 선택

 

위 경로대로 선택 후 태그 구성으로 와서 추적 유형을 구글 애널리틱스에 보낼 추적 유형과 매개변수를 일괄적으로 설정해 주면 됩니다.

 

태그 세부 설정 화면

 

먼저 1번의 추적 유형을 이벤트로 선택하면 하위에 매개변수를 입력하는 폼이 출력되며, 카테고리에는 버튼의 종류(더 알아보기 버튼)를, 작업에는 이벤트 액션(클릭)을 입력해주고 자신의 구글 애널리틱스 변수를 선택해 주면 됩니다. 그 후에 트리거 영역을 선택한 후 자신이 만든 트리거를 선택하면 태그 설정까지 끝입니다.

 


 

 

이상으로 구글 태그 매니저에서 클릭 이벤트를 설정하는 방법 기초편에 대한 글을 마치겠습니다.

항상 독자님의 시간이 절약될 수 있는, 양질의 정보가 담겨있는 콘텐츠를 제공하기 위해 노력하겠습니다.

 

긴 글 읽어주셔서 감사합니다.

 

 

반응형

'IT 정보' 카테고리의 다른 글

[GTM] 셀렉 박스 이벤트 설정 방법  (0) 2024.04.16
[GTM] 클릭 이벤트 설정 방법 (심화편)  (0) 2024.04.16