구글 애널리틱스 페이지 버튼 클릭 추적하기 - 2편

GTM 클릭 변수 값을 활용하여 맞춤 이벤트 태그를 생성하여, 사이트에 있는 버튼 클릭(링크 클릭)에 대한 상호작용을 추적하는 방법에 대해 설명하겠습니다.

 

먼저, GA 추적코드 및 GTM 설치 태그가 셋업되어 있는 사이트가 있어야 합니다. 그리고 GTM을 통한 사이트의 링크 클릭에 대한 변수가 수집되고 있어야 합니다. 이 두 가지 무슨 말인지 모르겠다면, 먼저 아래 글들을 읽고 차근차근 따라해보세요.

1.     태그매니저 설치하기

구글 태그매니저(GTM) 설치하기 : GTM으로 GA 추적코드를 셋업해야 하는 이유

2.     태그매니저를 사용하여 GA 추적 태그 셋업하기

구글 태그매니저(GTM)로 구글 애널리틱스(GA) 추적코드 셋업하기

3.     태그매니저에서 클릭 변수 수집하기

구글 애널리틱스 페이지 버튼 클릭 추적하기 - 1편

 

자, 이제 위에서 말씀 드린 조건을 갖추었다면,

GTM 클릭 트리거로 맞춤 이벤트 태그를 만들어, 사람들이 사이트에서 어떤 버튼을 많이 클릭하는지 알아보기 위한 맞춤 이벤트 태그를 만들어보도록 하겠습니다.

GTM 미리보기 모드로 전환하고 Ctrl 키를 누른 상태에서 링크가 있는 버튼을 클릭해봅시다.

그러면 다음과 같이 ‘Link Click’ 에서 수집되고 있는 변수 값들을 확인할 수 있습니다.

 

여기서 중요한 것은, 정말 중요한 것은

추적하려는 링크를 고유하게 정말 고유하게 식별하는데 사용할 수 있는 변수 하나를 선택해야 합니다. 예를 들면, ‘Click Text’의 ‘바로 신청하기’를 봅시다.

 

여기서 ‘Click Text’ 변수는 문자열 변수(string)로 ‘바로 신청하기’ 값을 불러오고 있습니다.

우리는 ‘바로 신청하기’ 라는 텍스트 값이 현재 페이지에서 고유한 값인지에 대해 고민해볼 필요가 있습니다. 이벤트 태그를 만들 때 트리거를 현재 페이지로 조건을 주었을 때, ‘Click Text’ 값이 ‘바로 신청하기’로 고유하다면 버튼 클릭 트래킹에 ‘Click Text’ 값을 사용하여도 무방합니다.

만약 ‘바로 신청하기’ 라는 ‘Click Text’ 값이 고유한 값이 아니라면 다른 Link Click 의 변수를 사용해야 합니다. 다양한 방법이 있지만 가장 쉬운 방법은 버튼에 구분할 수 있는 값을 부여해주는 것입니다.

해당 페이지의 소스코드를 보면 버튼들은 대부분 [button] 혹은 <a>로 시작합니다.

이 버튼을 구분하는 고유의 값을 소스코드에 넣어주고 고유한 값을 활용하는 방법입니다.

버튼이 <a>로 되어있다면, 다음과 같이 버튼 고유 값을 하드 코딩해줍니다.

 <a id=”direct application”

이렇게 버튼 id 값을 부여하게 되면 이 값은 Link Click 변수 중 ‘Click ID’ 값이나 ‘ElementID’로 저장되게 됩니다. 해당 id 값은 해당 페이지에서 겹치지 않거나 사이트 내에서 겹치지 않게 입력해야 버튼을 구분할 수 있는 고유 값으로 활용할 수 있습니다.

이렇게 하드 코딩하고 사이트에 반영하고 GTM 미리보기로 Link Click 변수를 확인해보면 다음과 같이 수집되고 있는 값을 볼 수 있습니다.

 

우선, 처음 설명 드린 Click Text의 ‘바로 신청하기’ 가 해당 페이지에서 고유하다고 가정하고 버튼 클릭 맞춤 이벤트를 셋업해보도록 하겠습니다.

참고 : Click Text 값은 보통 보톤명 값으로, 이미지 형식의 버튼이 아니라면 거의 입력되어 있는 값입니다. 즉, 별다른 작업 없이 활용 가능한 값이기에 가능하면 이 값을 사용하는 것이 편하기는 합니다.

위와 같이 새로운 트리거를 생성하여 줍니다.

새롭게 생성한 트리거는 Click Text 값이 ‘바로 신청하기’ 일 경우 태그를 발동시키는 트리거입니다. 만약 특정 페이지라는 조건을 추가하고 싶다면, + 버튼을 클릭하고 특정 페이지 값을 입력하여 특정 페이지에서만 실행되도록 설정할 수 있습니다.

 

이제 새로 만든 트리거가 사이트에서 발현될 때 GA에 데이터를 전송할 이벤트 태그를 생성하여 봅시다. 새로운 태그를 아래와 같이 생성하여 줍시다.

 

GA 이벤트는 보통 3개의 값을 사용합니다.

-       카테고리

-       액션(작업)

-       라벨

 

UTM과 같이 이벤트들을 구분하기 위해 3개의 값을 사용하여 구분합니다.

이벤트 태그에 대해서는 다음에 다시 한번 설명하도록 하겠습니다.

 

위와 같이 설정하면 아래와 같이 셋업됩니다.

-       추적유형 : 태그의 추적유형이 이벤트 입니다

-       카테고리 : 이벤트 카테고리 값이 ‘신청하기’ 입니다

-       액션(작업) : 이벤트 액셕 값이 ‘바로 신청하기’ 입니다

-       라벨 : 이벤트 라벨 값은 Link Click 의 ‘Click URL’을 저장하고 지정하여 주었습니다. 이렇게 지정하여 주면 ‘Click URL’의 값이 이벤트 라벨에 자동 저장됩니다.

-       비상호작용 조회 : 거짓(거짓으로 해야 버튼 클릭이 상호작용으로 잡힙니다)

-       Google 애널리틱스 설정 : GA 추적 변수 값 설정

나머지는 기본값으로 설정하면 됩니다.

 

트리거는 이전에 만든 ‘바로 신청하기_Click Text’를 설정합니다.

 

이제 설정이 끝났습니다.

이제 미리보기 모드에서 버튼을 클릭하여 생성한 맞춤 이벤트 태그가 잘 구현되는지 확인합시다

 

해당 버튼을 클릭하여 이렇게 새로 생성한 태그가 잘 구현됩니다. 그리고 해당 태그를 클릭하여 세부 내역을 자세히 보면 아래와 같이 설정된 값이 잘 반영된 것을 확인할 수 있습니다.

 

이제 태그 매니저에서 제출하여 실제 사이트에 반영하고 GA에서 데이터를 확인하면 됩니다.

보통 이벤트를 셋업하고 24시간 정도 뒤에 데이터를 확인할 수 있습니다.

GA 메뉴의 행동 > 이벤트 > 인기 이벤트 에서 이벤트를 확인할 수 있습니다.

실시간 데이터에서는 아래와 같이 바로 확인할 수 있으니 잘 설치되어 있는지 확인해봅시다

 

 

이것으로 사이트 내에서 발생하는 사용자의 버튼 클릭(링크 클릭)과 같은 상호작용을 추적하는 맞춤 이벤트 태그 만들기를 설명 드렸습니다. 처음에는 셋업이 어렵지만 두 번 정도 해보면 정말 쉽다는 것을 알 수 있을 것 입니다.

이렇게 생성된 이벤트 태그를 어떻게 '구글 애널리틱스'로 확인하는지, 이를 통해 어떤 인사이트를 얻을 수 있는지는 3편에 이어서 설명 드릴께요:)