1. 클릭 이벤트를 알아내는 법
구글에서 제공하는 Google Tag Manager(이하 GTM)은 태그(tag)를 활용해 유저의 활동을 추적합니다. 예를 들어, 버튼 클릭이나 스크롤 등이 있습니다. GTM이 활동을 추적하는 방식은 아래와 같습니다.
1.
GTM에서 트리거 이벤트를 정의
2.
유저가 트리거를 동작시키면 GTM이 태그를 GA에게 전송
GTM은 태그를 전달하기만 할 뿐, 이에 대한 확인은 GA에서 진행합니다
3.
GA에서 테그를 집계해 유저 활동 내역을 확인
GTM 사용 방법은 아래 링크를 참고하세요
아무튼 GTM으로 이벤트를 트래킹하려면 먼저 GTM에서 트리거를 정의해야 합니다. 트리거를 지정하기 위해선 (1) 트리거 유형과 (2) 해당 유형의 상세 조건을 정의해야 합니다. 예를 들어, “회원가입 버튼 클릭”을 트리거로 정의하기 위해선 아래의 과정을 거쳐야 합니다.
1.
트리거 유형을 [클릭]으로 설정하고
2.
클릭 상세 조건으로 “[회원가입 버튼]을 클릭할 때”를 설정
근데 위 2번을 보면 의문이 생깁니다. [회원가입 버튼]을 GTM에게 어떻게 알려줄 수 있을까요? 그냥 버튼명이 “회원가입”라고만 쓰이면 될까요? 맞는 말이지만, 완벽하지는 않습니다. 페이지를 구성하는 텍스트, 버튼, 링크 같은 요소들은 각각 속성 값을 지니고 있습니다. 그리고 각 요소가 가지고 있는 속성 값을 활용해 [회원가입 버튼]이 무엇인지 알려줍니다. “회원가입”이란 버튼명도 버튼이 지닌 속성 값 중 하나일 뿐입니다.
각 요소가 지닌 속성 값이 무엇인지 확인하고 싶다면, 브라우저에서 개발자 도구를 들어가 확인할 수 있습니다. 예를 들어 아래의 버튼 요소는 클래스 속성을 지녔고, 이에 대한 속성 값이 “btn apply-author is-login btn-common-2 btn-white-none-border text700”입니다. 만약 해당 버튼의 클릭 이벤트를 트래킹하고 싶다면, 아래처럼 설정하면 됩니다. 참 쉽죠?
1.
트리거 유형을 [클릭]으로 설정
2.
class 속성이 “btn apply-author is-login btn-common-2 btn-white-none-border text700”인 요소를 클릭할 때를 상세 조건으로 지정
2. 요소가 지닌 속성 값의 상태가…?
하지만 버블로 빌드한 서비스를 보면, 위에 본 이미지와 다르게 요소가 지닌 속성 값이 길고 복잡한 걸 알 수 있습니다. 아래 버튼 요소의 class 속성 값을 보면 “clickable-element bubble-element Button baTaNdaA”입니다. “baTaNdaA” 같이 속성 값이 이상하고 불규칙적인 걸 볼 수 있습니다. 보면 다른 요소들도 어딘가 이상한 class 속성 값을 지니고 있습니다.
불규칙한 속성 값으로 GTM에게 버튼을 지정하는 건 어딘가 찝찝합니다.
다행히도 버블에서는 Id라는 속성을 요소에게 부여하고, 내 입맛대로 입력해 사용할 수 있습니다. [Settings] > [General]로 이동하고 맨 밑으로 스크롤을 합니다.
그러면 [Advanced options] 섹션에서 [Expose the option to add an ID attribute to HTML elements]가 있습니다. 이를 활성화합니다.
이제 요소를 생성하고 설정 창을 켜보면, [Appearance] 탭의 최하단에 [ID Attribute]가 보이기 시작합니다. 여기에 입력한 값이 해당 요소의 Id 속성 값이 됩니다.
이제 해당 Id 값을 활용해 GTM에서 클릭 대상을 지정하면 됩니다.
