이 게시글은  분석마케팅의 [Google Tag Manager] 4. 구글태그관리자를 활용한 이벤트 설정 – 링크클릭( http://analyticsmarketing.co.kr/digital-analytics/google-tag-manager/985/) 을 약간의 발췌와 실제 실행해 본 결과를 작성한 것이며 구글 애널리틱스에서 유니버셜 태그를 사용하는 경우 링크클릭 이벤트를 추적하는 방법에 관한 것입니다. 유니버셜 태그가 아닌 GA4 태그를 사용하는 경우에는 비공개: 구글 태그 관리자(GTM)에서 구글애널리틱스(GA) 태그 id 연결하여 이벤트(이메일, 전화번호(전화 문의 하기), 문의하기(문의하기 폼), 상담 예약하기, 앱다운로드) 추적 자동화 시키기( https://www.aiforu.kr/%ea%b5%ac%ea%b8%80-%ed%83%9c%ea%b7%b8%ea%b4%80%eb%a6%ac%ec%9e%90-ga%ed%83%9c%ea%b7%b8id-%ec%97%b0%ea%b2%b0%ed%95%98%ea%b8%b0/ ) 를 참조하세요.

구글애널리틱스(GA)에서 이벤트란 ‘페이지 로드와는 별개로 추적할 수 있는 컨텐츠와 사용자 간의 상호작용’을 말합니다.

구글태그관리자(GTM)를 활용하면 소스코드를 수정하지 않고도 ‘상당 부분’ 이벤트 설정을 할 수 있습니다. 전화연결 링크/버튼’, ‘카톡상담 링크/버튼과 같은 링크클릭 이벤트를 다뤄보도록 하겠습니다.

태그관리자 ( https://tagmanager.google.com ) 에 접속하여 상단의 [컨테이너] > [변수]를 차례대로 click합니다. 이렇게 하시면 태그관리자에서 기본 제공 변수 중 이벤트, 클릭, 양식 항목의 사용 선택을 통해 구글태그관리자(GTM)에 내장된 이들 변수를 언제라도 사용할 수 있는 상태가 됩니다.

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

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

2단계 : 이벤트 태그 생성

3단계 : 트리거 생성

만들어 놓은 전화 상담 / 문자 상담을 위한 웹페이지( http://www.i-help.kr/popup_window.php?serial_num=11 ) 를 이용하겠습니다.

1단계 : 고유 식별자 확인

2단계 : 이벤트 태그 생성

태그관리자 ( https://tagmanager.google.com ) 에서 1. [컨테이너] -> 2. [태그] -> 3. [새로 만들기]를 차례대로 선택해줍니다.

이름없는 태그에 이름을 넣어주고 1)제품선택은 Google Analytics 를 선택해주며 2)태그 유형은‘유니버설 애널리틱스’ 선택합니다.

3) 태그 구성

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

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

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

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

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

다음은 태그를 구성해야하는데, 추적ID를 찾는 방법은

가. Google 애널리틱스 계정에 로그 인합니다.

나. 관리 탭을 선택합니다.

다. 계정 항목의 드롭다운 메뉴에서 계정을 선택합니다.

라. 속성 항목의 드롭다운 메뉴에서 속성을 선택합니다.

마. 속성에서 추적 정보 > 추적 코드를 클릭합니다.

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

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

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

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

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

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

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

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

위 설정은 트리거 조건이 모든 페이지에서 태그가 실행되도록 되어있음을 의미합니다. 이벤트가 특정한 페이지에서만 발생하는 경우 Page URL이 해당 페이지 주소와 일치하거나 이를 포함하도록 하여 태그 실행이 해당 페이지에 국한되도록 설정할 수도 있습니다. 트리거에 대한 추가 정보는 구글 태그관리자 도움말(https://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 보고서( 행동 > 이벤트 )에서 관련 이벤트 데이터를 확인할 수 있습니다.

아래의 이미지는 전화상담이벤트에 대한 분석 보고서는 아니고 이 사이트(www.aiforu.kr)에 설치되어 있는 share this 와 공지사항에 대한 이벤트 추적 보고서입니다. share this 의 경우, 이벤트 액션을 통해 얼마나 많이 페이스북, 핀터레스트, 트위터 등에 공유되었는지 알 수 있습니다.

전화상담 이벤트를 잘 설치하시면 전화상담에 대한 이벤트 카테고리와 이벤트 액션이 표시될 것입니다. 

---

참고자료 1. http://analyticsmarketing.co.kr/digital-analytics/google-tag-manager/985/

2. http://www.i-boss.co.kr/ab-74772-654