이벤트 설정 - 배너, 버튼, 링크클릭 - 디에이허브 구글애널리틱스 GTM

이벤트 설정 - 배너, 버튼, 링크클릭


2017-07-25

예전 강의에서 구글 애널리틱스를 이용하여 이벤트를 추적하는 방법에 대해 알아보았습니다.  

 

기억이 가물가물하신 분들은 이전 강의를 참고하셔서 이벤트에 대한 부분을 다시한번 정독하시길 추천드립니다.     

 

그럼, 지금부터 구글 태그 관리자를 이용하여 이벤트 설정을 하는 방법을 알아보겠습니다.    

 

이벤트 추적설정은 이벤트가 발생하는 부분에 구글 애널리틱스가 인지할 수 있도록 이벤트 추적코드를 추가하는 것을 말합니다.  

 

하지만, 마케터나 개발자가 아닌 분들이 추적코드를 삽입하는 것이 쉽지만은 않습니다.   

 

이러한 불편함을 해소하고자 직접 소스코드를 수정하지 않아도 구글 태그 관리자를 이용하여 어느정도 이벤트 추적설정을 할 수 있습니다.   

 

그럼, 지금부터 본격적으로 설정을 해보도록 하겠습니다.   

 

먼저, 디에이허브 홈페이지에 오른쪽 상단에 있는 페이스북, 구글플러스, 티스토리 링크를 얼마나 클릭하는지 이벤트 설정을 해보겠습니다.

 

 

    구글태그관리자 이벤트    

 

 

1. 크롬 브라우저에서 이벤트를 설정하고자 하는 버튼을 마우스 우클릭 후 [검사]를 선택합니다. 

 

 

 

 구글태그관리자 이벤트   

 

 

2.   [개발자 도구 창]에서 빨간색 박스를 확인합니다.   

 

 

 

구글태그관리자 이벤트    

 

 

 

빨간색 박스는 버튼 클릭시 해당 URL로 링크되는 URL 값입니다. 

 

이 값은 나중에 트리거에서 실행 조건으로 쓰일 예정입니다.    

 

 

3. 이제 구글 태그 관리자 화면으로 이동하겠습니다.  

 

구글 태그 관리자에서 먼저 이벤트 태그 생성을 하겠습니다.  

 

[새로 만들기] 버튼을 클릭합니다.    

 

 

 

구글태그관리자 이벤트 

 

 

4. 태그 이름을 설정합니다.  

 

태그 이름 : "메인페이지 SNS 버튼 이벤트"      

 

 

5. [태그 구성] 영역을 클릭합니다.   

 

 

 

구글태그관리자 이벤트 

   

 

 

[태그 유형 선택]에서 "유니버설 애널리틱스" 를 선택합니다.   

 

 

6. [추적 ID]는 구글 애널리틱스에서 설정된 속성ID 값을 입력합니다. 

 

(화면에서는 변수로 생성했기 때문에 변수명이 들어갑니다)   

 

[추적 유형]은 "이벤트" 로 설정합니다.   

 

이벤트 추적 매개변수를 보시면 4가지 입력상자를 확인할 수 있습니다.   

 

(1) 카테고리


(2) 작업


(3) 라벨


(4) 값   

 

이 부분에 대해서는 이전 강의에 설명이 되어 있으니 기억이 가물가물(?) 하신 분들은 참고하시기 바랍니다.   

 

이 4가지 입력상자 안에는 사용자가 직접 입력한 값이나 변수값 모두 사용 가능합니다.   

 

그럼, 테스트로 입력상자에 값을 입력하겠습니다.   

 

 

카테고리 : 메인페이지 SNS 버튼


작업 : 클릭 이벤트


라벨 : 페이스북

 

값 : 숫자 "1"   

 

 

아래의 화면은 지금까지 입력한 결과화면 입니다.

 

 

 

    구글태그관리자 이벤트    

 

 

 

7. 이번엔 [트리거]를 설정해 보겠습니다. 

 

트리거 영역을 클릭합니다.  

 

트리거는 실행되는 조건을 의미합니다. 

 

태그가 실행되기 위해서는 반드시 1개이상의 트리거가 존재해야 합니다.   


※ 태그 생성 순서는 트리거 화면을 보시면 아시겠지만 태그 생성하기전에 먼저 트리거를 생성하시는 것이 작업하실때 좋습니다.    

 

[트리거 선택] 화면 우측 상단에 "+" 를 클릭합니다.

 

 

   구글태그관리자 이벤트    

 

 

[트리거 이름] 을 입력합니다.   

 

이름 : 메인페이지 SNS 버튼 클릭   

 

 

[트리거 구성] 영역을 클릭합니다.  

 

[클릭] > [링크만] 유형을 선택합니다. 

 

 

   구글태그관리자 이벤트     

 

 

[트리거 유형] 설정이 완료 되었으면 아래와 같은 화면을 확인 할 수 있습니다. 

 

 

구글태그관리자 이벤트   

 

 

 

위의 화면에서 나오는 항목들을 설명 드리겠습니다.    

 

 

(1) 태그 대기  

 

태그 대기 체크 시 모든 태그가 실행되거나 지정된 제한 시간을 초과할 때까지 페이지 이동이 지연됩니다.   

 

 

(2) 유효성 확인  

 

유효성 확인 체크 시 페이지 이동이 유효한 액션으로 간주될 때만 태그가 실행됩니다.   

 

 

(3) 모든 링크 클릭  

 

해당 페이지 내의 모든 링크를 클릭하면 실행됩니다. 

 

버튼, 게시물, 메뉴 등등 링크가 설정된 모든 요소들이 클릭되는 순간 태그가 실행됩니다.   

 

 

(4) 일부 링크 클릭  

 

특정한 조건을 만족한 링크가 클릭될 때 태그가 실행됩니다.  

 

위 화면에서는 [일부 링크 클릭]을 선택한 경우입니다.    

 

그럼, 실제로 조건을 작성해 보겠습니다. 

 

 

 

구글태그관리자 이벤트   

 

 

 

위 화면에 대해 설명드리겠습니다.  

 

버튼 클릭시 연결된 페이지 URL에 "www.facebook.com" 이라는 글자가 포함이 되면 태그를 실행하라는 뜻입니다.   

 

여기서는 Click URL에 대한 조건을 주었지만 이외에도 수많은 조건들이 기본적으로 구글 태그 관리자에 포함되어 있고 이러한 조건들을 사용자가 직접 작성하여 변수로 등록시킬 수 있습니다.  

 

이 부분에 대해서는 향후 다시 설명 드리겠습니다.    

 

위와 같이 입력을 하고 [저장] 버튼을 클릭하시면 지금까지 입력한 내용을 아래의 화면 같이 확인 할 수 있습니다. 

 

 

 

구글태그관리자 이벤트   

 

 

 

이 화면 우측 상단에 있는 [저장] 버튼을 다시한번 클릭하면 태그가 새로 생성된것을 확인할 수 있습니다. 

 

 

   구글태그관리자 이벤트    

 

 

그럼 이제 [게시] 하시기 전에 설정 사항이 올바르게 적용 되었는지 확인해보겠습니다.   

 

 

구글 태그 관리자로 이벤트를 설정한 페이스북 버튼을 클릭해 보시고 구글 애널리틱스 [보고] > [실시간] > [이벤트] 화면을 보시면 아래와 같이 정상적으로 이벤트 추적이 된것을 확인할 수 있습니다.  

 

 

 구글태그관리자 이벤트   

 

 

만약, 정상적으로 이벤트 데이터가 나오지 않는다면 이벤트 설정이 잘못된 것이오니 설정 부분을 다시 한번 확인 바랍니다.   

 

그럼, 정상적으로 이벤트 데이터가 올라오는것을 확인 하셨으면 꼭!! 구글 태그 관리자에서 [게시] 버튼을 클릭하셔서 실제로 이벤트를 적용하시기 바랍니다.    

 

그리고, 나머지 버튼(구글플러스, 티스토리)에 대해서는 따로 설명드리지 않겠습니다.   

 

오늘은 개별적으로 버튼마다 이벤트를 설정하였지만 향후에는 그룹으로 묶어서 설정해 보도록 하겠습니다.    

1

추천하기

0

반대하기
  • 페이스북 공유
  • 트위터 공유
  • 밴드 공유
  • Google+ 공유
  • 인쇄하기

대표전화 : 02-715-0715 | 이메일 : da-hub@da-hub.net   |  주식회사 디에이허브 | 대표 : 한지현 | 주소 : 서울특별시 용산구 원효로 153 원효빌딩 8층 802호
사업자번호 : 825-81-00505 | 법인번호 : 110111-6124153  |  Copyrights (c) 2016 DA-HUB co.ltd. All Rights Reserved.