구글태그관리자를 활용한 이벤트 설정 링크클릭

2016.05.13 10:40

유리나

조회수 8,767

댓글 5

구글애널리틱스(GA)에서 이벤트란 ‘페이지 로드와는 별개로 추적할 수 있는 컨텐츠와 사용자 간의 상호작용’을 말합니다. 대체로 페이지 로드와 별개로 작동하기 때문에 기본 스크립트만으로는 측정이 어렵고 이에 따라 별도의 세팅을 해주어야 합니다.

 

별도의 세팅이란 이벤트가 발생하는 지점/요소에 GA가 인식할 수 있도록 이벤트 정보를 추가하는 것을 말하며 여기에는 소스 코드를 수정하는 작업이 수반됩니다. 따라서 마케터 등 비개발자가 직접 실행하는 게 쉽지만은 않습니다.  (참조: [Google Analytics] 7. 구글 애널리틱스 이벤트 추적 설정)

 

구글태그관리자(GTM)를 활용하면 소스코드를 수정하지 않고도 ‘상당 부분’ 이벤트 설정을 할 수 있습니다. 앞으로 수 차례에 걸쳐 GTM을 활용하여 다양한 이벤트를 설정하는 방법을 알아보도록 할 예정이며 그 첫 번째로 오늘은  ‘전화연결 링크/버튼’, ‘카톡상담 링크/버튼과와 같은 링크클릭 이벤트를 다뤄보도록 하겠습니다.

 

 

 

본격적인 링크클릭 이벤트 설정에 앞서 우선 위와 같이 기본 제공 변수 중 이벤트, 클릭, 양식 항목의 사용 선택을 통해 GTM에 내장된 이들 변수를 언제라도 사용할 수 있는 상태로 만듭니다.

 

 

 

이벤트 설정은 아래 1) 전화상담2) 카톡상담과 같이 서로 유사한 두 개 링크를 예로 들어 진행하도록 하겠습니다.

 

 

 

 

 

<링크클릭 이벤트 설정 1 – 전화상담>


1단계 :  고유 식별자 확인 – 구글 크롬 (요소) 검사 기능을 통해 개발자 도구에서 해당 링크의 고유한 요소를 확인


2단계 : 이벤트 태그 생성


3단계 : 트리거 생성

 

 

 

1단계 : 고유 식별자 확인

 

 

 

위와 같이 해당 링크/버튼(전화상담)에 커서를 놓고 마우스 오른쪽 클릭 후 나오는 화면에서 최하단에 위치한 ‘검사’ 항목을 클릭합니다. 

 

 

 

 

‘검사’ 항목 클릭 시 위와 같이 개발자 도구 창이 새로 뜨면서 해당 링크의 요소를 보여줍니다. 위 예시에서는 링크가 클릭되었을 때 페이지가 이동하게 되는 <a>태그 값(‘tel:02-785-2557’)을 고유 식별자로 사용될 수 있으며 이 값을 태그를 실행시키는 트리거의 변수로 사용합니다. 

 

 

 

2단계 : 이벤트 태그 생성 


 

 

여기 생성된 이벤트 태그는 위와 같으며, 세부 항목별로 살펴보자면… 

 

1) 제품 선택 : ‘구글 애널리틱스’ 선택 

 

 

 

2) 태그 유형 : ‘유니버설 애널리틱스’ 선택 

 

 

 

 

3) 태그 구성 

 

– 추적 ID : 추적 ID 입력 ⇒ {{ua tracking id}}는 UA-XXXXXXXX-1과 같이 속성 레벨에서 발급되는 추적 ID를 변수로 만들어서 사용

 

– 추적 유형 : ‘이벤트’ 선택

 

– 카테고리 : ‘전화상담’ 입력

 

– 작업 : {{Page Path}} 입력

 

– 라벨 : ‘모바일전화’ 입력

 

 

 

∗ 카테고리/작업/라벨 값은 임의로 지정한 값이나 변수값 모두 사용 가능합니다. 위 예시에서는 카테고리와 라벨 값으로 ‘전화상담’, ‘모바일전화’라는 임의의 문자열을 사용하였으며, 작업 값으로는 페이지 경로(Page Path) 변수를 사용함으로써 해당 이벤트가 어떤 페이지에서 발생했는지를 알 수 있도록 하였습니다. 

 

 

4) 실행 시점 : 트리거 유형으로 ‘클릭’ 선택 > ‘전화상담’ 트리거 선택 

 

 

미리 생성해 놓은 ‘전화상담’ 트리거를 선택한 화면이지만 아래 3단계 설명에 나와 있듯이 태그 생성 시 만들면 됩니다. 

 

 

 

3단계 : 트리거 생성 

 

 

 

이벤트 태그를 생성했으면 이제 이 태그가 실행되는 조건을 지정해야 합니다. 태그가 실행되기 위해서는 반드시 1개 이상의 트리거가 있어야 하며 생성된 트리거의 모습은 위와 같습니다. 사실 이벤트 태그 생성 시 트리거가 사용되기 때문에 원래 순서는 ‘트리거 생성 후 해당 트리거를 이용한 이벤트 태그 생성’이 맞습니다. 하지만 태그를 생성하는 과정에서 곧바로 트리거를 생성하여 사용할 수 있기 때문에 굳이 엄격하게 적용하지 않았습니다. 

 

 

1) 이벤트 선택 : ‘클릭’ 이벤트 선택 

 

 

 

 

2) 트리거 구성 : ‘링크만’ 선택 > 이후 표시되는 두 옵션에 모두 체크 

 

 

* 태그 대기 : 옵션 체크시 모든 태그가 실행되거나 지정된 제한 시간을 초과할 때까지 링크 열기가 지연됨 ⇒ 링크 클릭이 발생하면 브라우저에서 새 페이지를 로드하고 대기 중인 HTTP 요청이 중단되므로 ‘태그 대기’ 옵션 선택을 통해 다음 페이지로 리디렉션이 발생하기 전에 GTM에 의해 실행된 태그가 올바르게 실행되도록 약간의 지연을 추가함 

 

* 유효성 확인 : 옵션 체크시 링크 열기가 유효한 액션으로 간주될 때만 태그가 실행됨

 

 

 

3) 설정 시간 : Page URL이 정규 표현식 ‘.*’와 일치

 

 

위 설정은 트리거 조건이 모든 페이지에서 태그가 실행되도록 되어있음을 의미합니다. 이벤트가 특정한 페이지에서만 발생하는 경우 Page URL이 해당 페이지 주소와 일치하거나 이를 포함하도록 하여 태그 실행이 해당 페이지에 국한되도록 설정할 수도 있습니다. 트리거에 대한 추가 정보는 구글 태그관리자 도움말(http://support.google.com/tagmanager/answer/6106961?hl=ko&ref_topic=3441647)에서 확인 가능합니다.  

 

 

4) 실행 시점 : Click URL이 ‘tel:02-785-2557’을 포함 

 

 

여기서 Click URL은 클릭되는 링크에 포함된 URL 즉, <a>태그의 href 값을 의미합니다. 위 예시의 경우 연산자 ‘포함’을 ‘같음’으로 바꿔서 설정해도 큰 차이가 없습니다. 또한 ‘포함’ 연산자를 사용할 경우 전화번호를 모두 기입할 필요 없이 ‘tel:’ 정도만을 입력해도 측정이 가능합니다.  그리고 만약 운영하고 있는 모바일 웹페이지 내에 여러 전화번호가 등록되어 있고, 한 번의 이벤트 설정으로 모든 전화연결 버튼 클릭을 측정하고자 한다면 이 때는 연산자 ‘포함’에 트리거 변수 값을 ‘tel:’과 같 지정해야 모든 클릭을 포함하는 트리거를 만들 수 있습니다. 

 

 

 

위 단계를 모두 거쳐 태그를 저장한 후 미리보기 모드를 거쳐 컨테이너를 게시하면 태그 설정이 완료됩니다.  그리고 시간이 지나 이벤트 정보가 쌓이면 아래와 같이 GA 보고서에서 관련 이벤트 데이터를 확인할 수 있습니다.

 

 

 

 

두 번째 측정기준을 사용해서 이벤트 카테고리와 액션을 같이 보게 되면 액션 값에 서로 다른 페이지 주소가 들어 있는 것을 확인할 수 있는데요, 이것은 2단계 이벤트 태그 생성 – 3) 태그 구성 내 이벤트 액션 값 설정 시 {{Page Path}}가 입력되도록 세팅함으로써 고정된 값이 아닌 해당 이벤트가 발생한 페이지 주소가 이벤트 액션 값에 저장되도록 설정했기 때문입니다. 

 

 

 

 

<링크클릭 이벤트 설정 2 – 카톡상담>

 

카톡상담 이벤트를 설정하는 방법은 전화상담 이벤트 설정과 일부만 다를 분 거의 동일하기 때문에 중복되는 부분은 이미지 생략하고 간단하게 설명하도록 하겠습니다.

 

 

1단계 : 고유 식별자 확인  

 

 

 

위 이미지는 두 번째 위치한 카톡상담 링크/버튼의 요소입니다. <a>태그 값(‘http:// plus.kakao.com/home/@…’)이 전화상담 버튼과 다르다는 걸 확인할 수 있습니다. 

 

 

 

2단계 : 이벤트 태그 생성 

​ 

 

 

1) 제품 선택 : ‘구글 애널리틱스’ 선택


2) 태그 유형 : ‘유니버설 애널리틱스’ 선택


3) 태그 구성

 

– 추적 ID : {{ua tracking id}} – 추적 ID

 

– 추적 유형 : ‘이벤트’ 선택

 

– 카테고리 : ‘카톡상담’ 입력

 

– 작업 : {{Page Path}} 입력

 

– 라벨 : {{Click Classes}} 입력

 

 

 

카톡상담 이벤트의 라벨 값은 전화상담과 다르게 클릭 클래스(Click Classes) 값을 사용하도록 설정하였습니다. 카톡상담 버튼이 여러 개 존재하고 각 버튼의 클래스 값이 다르기 때문에 이를 구분할 수 있도록 설정하였습니다.

 

4) 실행 시점 : 트리거 유형으로 ‘클릭’ 선택 > ‘카톡상담’ 트리거 선택

 

 

 

3단계 : 트리거 생성

​ 

 

 

1) 이벤트 선택 : ‘클릭’ 이벤트 선택


2) 트리거 구성 : ‘링크만’ 선택 > 이후 표시되는 두 옵션에 모두 체크


3) 설정 시간 : Page URL이 정규 표현식 ‘.*’와 일치


4) 실행 시점 : Click URL이 <a>태그 값인 ‘plus.kakao.com/home/’을 포함

 

 

 

이렇게 설정을 완료해 놓으면 아래와 같이 데이터가 수집됩니다. 

 

 

 

 

카톡상담도 두 번째 측정기준을 사용해서 이벤트 카테고리와 라벨을 같이 보면 라벨 항목에 서로 다른 값이 포함된 것을 확인할 수 있는데요, 이벤트 태그 구성에서 이벤트 라벨 값 설정 시 변수 {{Click Classes}} 선택함으로써 고정된 값이 아닌 (링크클릭)이벤트가 발생한 링크의 클래스 값이 저장되도록 설정했기 때문입니다.

 

그리고 클래스 요소를 라벨 값으로 지정한 이유는… 카톡상담 신청 링크가 여러 개 있어 각 링크의 성과를 파악하고자 함이었습니다.

 

 

 

 

 

포스팅 상단에서 보여드린 예와는 또 다른 카톡상담 신청 링크와 해당 링크의 요소검사 이미지입니다.  이 이미지와 아래 포스팅 상단 카톡상담 링크의 요소검사 이미지를 비교해 보시면 클래스 값이 각 “kakao_w1″과 “kakao_w3″으로 서로 다른 것을 확인할 수 있습니다. 

 

 

 

위 예시의 경우 원래 웹사이트 제작 시 서로 다른 클래스 값을 부여하였기에 이를 고유 식별자로 활용을 하였습니다만, 클래스 값이 동일하였다 하더라도 필요하다면 개발자에게 클래스를 달리 부여해달라고 요청한 후 이를 토대로 설정을 할 수도 있었을 것입니다.

 

 

 

여기까지 비교적 간단한 편에 속하는 링크클릭 이벤트를 설정하는 방법을 알아보았는데요, 앞으로 아웃바운드 링크클릭 , 자료다운로드와 같은 버튼클릭, 양식제출, 유튜브 동영상 재생 등 다양한 이벤트를 설정하는 방법을 포스팅할 예정입니다.

 

 

출처 : http://analyticsmarketing.co.kr/digital-analytics/google-tag-manager/985/

GA

스크랩

공유하기

신고

하트 아이콘꼬맹DL님 외 9명이 좋아합니다.

목록글쓰기
아이보스 알림

지금 이 글은 유리나 보스님의 아이보스 인기 게시글입니다.

SNS에 공유하여 정보를 나누어 보세요. 페이스북 트위터 카카오스토리
하루동안 보지 않기
댓글 5
댓글 새로고침

로그인 후 더욱 많은 기능을 이용하세요!

네이버 계정으로 로그인
페이스북 계정으로 로그인
구글 계정으로 로그인
카카오톡 계정으로 로그인
이메일 또는 아이디로 로그인
X
회원가입ID/PW 찾기 소셜 계정 로그인