[Google Tag Manager] 4. 구글태그관리자를 활용한 이벤트 설정 - 링크클릭

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

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_01

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_02

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

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

2단계 : 이벤트 태그 생성

3단계 : 트리거 생성

1단계 : 고유 식별자 확인

구글태그관리자_이벤트설정_링크클릭이벤트_03

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

구글태그관리자_이벤트설정_링크클릭이벤트_04

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

2단계 : 이벤트 태그 생성

구글태그관리자_이벤트설정_링크클릭이벤트_06

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_07

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

구글태그관리자_이벤트설정_링크클릭이벤트_08

3) 태그 구성

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

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

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

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_09

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_10

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

3단계 : 트리거 생성

구글태그관리자_이벤트설정_링크클릭이벤트_11

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_12

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

구글태그관리자_이벤트설정_링크클릭이벤트_13

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

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_14

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_15

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

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

구글태그관리자_이벤트설정_링크클릭이벤트_16

구글태그관리자_이벤트설정_링크클릭이벤트_17

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