[추천]구글 태그 관리자(GTM)에서 구글애널리틱스(GA) 태그 id 연결하여 이벤트(이메일, 전화 문의 하기, 문의하기 폼으로 문의하기, 상담 예약하기, 앱다운로드등 CTA) 추적 자동화 시키기

한계

이 게시글의 ‘모든 링크 클릭’은오로지 <a> 태그의 href 속성에 의해 만들어진 링크만을 대상으로 합니다. <a> 태그를 커버해주는 것만 해도 혁혁하고 세밀한 추적이 가능하나 text를 넣지 않고 ‘카카오톡 채널 연결’ 이미지를 넣고 이 이미지에서 바로 연결하는 <img >태그나 <img> 태그보다 투박한 <button> 태그, <div> 태그의 경우, 아직 추적할 수 없다는 한계가 있습니다.

시작하기 전에 : 구글 애널리틱스 태그로 GA4태그가 아닌 유니버셜 태그를 사용하는 경우

구글 애널리틱스 태그로 GA4태그가 아닌 (GA4태그이전 구버전의) 유니버셜 태그를 사용하는 경우에는 아래의 게시글을 참조하세요.

[추천]구글태그관리자를 활용하여 ‘전화연결 링크/버튼’, ‘카톡상담 링크/버튼과와 같은 링크클릭 이벤트를 추적하기(구글애널리틱스에서 유니버셜 태그를 사용하는 경우)

필요성

구글 태그 관리자(GTM)에서 구글애널리틱스(GA) 태그 id를 연결하고 구글 태그 관리자에서 ‘기본 제공 변수’ 를 잘 구성하면 구글 애널리틱스에서 이메일, 전화번호(전화 문의 하기), 문의하기(문의하기 폼), 상담 예약하기, 회원가입 페이지로 이동, 장바구니 담기 페이지로 이동, 구매하기 페이지로 이동, 앱 다운로드(또는 앱 다운로드 페이지로의 이동), 문서 다운로드(또는 문서 다운로드 페이지로의 이동) 링크 등의 내부 링크는 물론 외부 링크를 추적할 수 있습니다. 저는 구글 광고의 전환 측정항목 중, 전화를 받은 이벤트를 추적하기 위해 이 게시글을 작성하게 되었으나, 앞에서 언급한 다양한 전환에 해당하는 목표를 추적할 수 있는 유용한 방법입니다. 개요를 이해하고 있다면 이 게시글 하단부분에 구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용) 으로 바로 이동하시어 이벤트 설정을 하고 추적을 시작해주세요.

Google 태그(Google Tag)

Google 태그는 사용하는 Google 제품(Google Ads, Google 애널리틱스 4 등)에 웹사이트와 광고의 효과를 측정하기 위한 데이터를 제공합니다.

Google 태그(초록색 네모)를 이용하면 구글 태그 관리자와 Google 애널리틱스, Google Ad 등의 구글 제품과 구글 태그 관리자를 연결하여 기본 태그를 쉽게 구성 및 이용할 수 있습니다.

참고: 전체 사이트 태그(gtag.js)의 이름이 Google 태그로 변경되었습니다. 이번 변경을 통해 이제 신규 및 기존 gtag.js 설치 환경에서 추가 코드 없이 더 많은 작업을 처리하고 데이터 품질을 개선하며 새로운 기능을 채택할 수 있습니다.

Google 태그(gtag.js)는 다양한 Google 제품 및 서비스를 사용하기 위해 웹사이트에 추가할 수 있는 단일 태그입니다. Google 제품 계정마다 여러 태그를 관리하는 대신 전체 웹사이트에서 Google 태그를 사용하여 여러 대상에 연결할 수 있습니다.(출처 : 태그 관리자 고객센터 Google 태그 정보 )

Google 태그를 사용하면 웹사이트에서 연결된 Google 제품 도착 페이지(예, Google Ads, Google 애널리틱스)로 데이터를 전송하여 웹사이트와 광고의 효과를 측정할 수 있습니다. Google 태그는 23.11.27 기준, 현재 Google Ads와 Google 애널리틱스 4에서만 액세스하고 구성할 수 있습니다.

작동 방식

Google 태그(gtag.js)에는 다양한 Google 제품 및 서비스를 사용하기 위해 웹사이트에 추가할 수 있는 단일 태그 ID가 있습니다. Google 제품 계정마다 다른 여러 태그를 관리하는 대신 전체 웹사이트에서 하나의 Google 태그를 사용하고 태그 ID를 여러 대상에 연결할 수 있습니다.

이점

여러 태그: 웹사이트에 태그를 2개 이상 설치한 경우 Google 태그를 조합하여 더 나은 데이터를 수집하고 한곳에서 관리할 수 있습니다.
액세스 관리: 이제 다른 제품에 대한 액세스 권한과는 별도로 태그 설정에 대한 사용자 액세스 권한을 관리하여 중요한 측정 설정을 변경할 수 있는 사용자를 더욱 세부적으로 관리할 수 있습니다.

새로 계정을 만들어 구글 태그 매니저(Google Tag Manager) 이용하기

새로운 도메인에 구글 태그 매니저를 연결하고자 하는 경우, 구글 태그 관리자( https://tagmanager.google.com/#/home )에서 [계정 만들기]를 통 계정을 새로 만들어야하고 설정하는 것은 아래의 글을 참조하세요.

구글 태그 매니저 : 1. 개요, 2. 설정하기

구글 애널리틱스에 있는 Google 태그를 이용하여 태그 매니저 이용하기

GA4 연결

구글 태그매니저에 등록하고자 하는 사이트의 GA4속성에서 [관리] -> [속성] -> [데이터 수집 및 수정] -> [데이터 스트림]탭으로 들어가 해당하는 데이터 스트림을 클릭합니다.

우측에 복사 버튼을 클릭하여 해당 추적 ID를 복사합니다.

태그 관리자 계정 페이지( https://tagmanager.google.com/#/home )에서 [Google 태그]를 선택하고 우측 상단 검색창에 복사한 id를 입력하고 찾은 후 클릭하여 연결을 계속합니다.

기본 제공 변수들 중 click과 관련된 변수를 사용하기 위해 Google 태그 관리자 스니펫(컨테이너 스니펫) 설치

기본 제공 변수들중 Click과 관련된 변수들을 사용하기 위해 Google 태그 관리자 스니펫(컨테이너 스니펫) 설치해야 하는 이유

GA4에서 ‘page_view’나 ‘click처럼 전체 사이트 태그만 설치하면 자동으로 수집 되는 이벤트를 ‘자동 수집 이벤트’라고 합니다. 자동 수집 이벤트 중 click은 click된 숫자는 확인할 수 있으나 어떤 페이지에서 일어난 클릭인지, 어떤 버튼을 클릭을 했는지 이벤트로 보여주지 않습니다.

GA4에는 ‘자동 수집 이벤트’외에 사용자가 비즈니스 목적에 따라 직접 만들어서 수집하는 이벤트를 선언하여 이용할 수 있습니다. 이것을 ‘맞춤 이벤트’라고 합니다. 맞춤 이벤트에는 다양한 매개변수를 제공합니다. 그런데, ‘전화하기’를 추적하여 받은 전화숫자를 확인하기 위해서는 click이나 buton과 관련된 매개 변수가 있어야 하는데, 맞춤 이벤트의 매개변수에는 click이나 buton과 관련된 매개 변수가 없어 맞춤 이벤트를 만들 수 없습니다.

한편, 구글 태그 매니저의 변수중 기본 제공 변수에는 아래와 같은 변수들이 있고, Click과 관련된 6개(Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text)의 내장 변수들이 있습니다. Click과 관련된 6개의 변수들을 이용하여 전화하기를 추적하려면, Google 태그 관리자 스니펫(컨테이너 스니펫)를 설치해주셔야만 합니다.

(태그관리자를 처음 설치하고 있다면)[설치 안내]를 클릭하여 Google 태그 관리자 스니펫(컨테이너 스니펫, 컨테이너 태그)을 설치해 주세요. (처음이 아니라면 아래의 [관리자] -> [Google 태그 관리자 설치]로 이동하여 태그 스니펫을 확인후 설치해주세요.

[직접 설치]를 선택하여 추적코드를 복사한 후, 사이트에 설치해줍니다.

[관리자] -> [Google 태그 관리자 설치] 에서 태그 스니펫 확인 및 설치

위에 설치 과정 중에 Google 태그 관리자 스니펫(컨테이너 스니펫, 컨테이너 태그)을 설치하지 않았거나 Google 태그 관리자 스니펫(컨테이너 스니펫, 컨테이너 태그)를 나중에 설치하고자 하는 경우 [관리자] -> [Google 태그 관리자 설치]에서 스니펫을 복사하여 웹사이트나 앱에 추가해주세요.

태그 설치가 제대로 되었는지 확인하기

GTM 컨테이너 스니펫만 설치하고 태그를 따로 만들어주지 않은 최초 상태에서는 태그를 새로 만들때까지는 태그가 설치되었는지 확인되지 않습니다.

미리보기(디버거)로 추적 확인

(출처 : 마케톨로지의 구글 태그 관리자 설치 및 사용법 )

구글 태그 관리자에서 제공하는 디버거(미리보기)를 통해 실행 여부를 확인 합니다.

태그 관리자 우측 상단의 ‘미리보기’ 버튼을 누른 후 웹페이지로 이동해서 F5 키(refresh 새로고침)를 누르면 화면 하단에 디버거 콘솔 창이 열립니다.

( 이미지 출처 : 마케톨로지의 구글 태그 관리자 설치 및 사용법 )

왼쪽 메뉴에서 Summary나 Page View 메뉴를 클릭한 후, 상단 메뉴에서 Tags 메뉴를 열면 실행된 태그를 확인할 수 있습니다.
Google 태그 관리자(GTM)에서 Tags Fired는 태그가 성공적으로 실행되었음을 의미합니다. Tags Not Fired는 태그가 실행되지 않았음을 의미합니다.

애널리틱스 관리자 페이지에서 [데이터 표시] -> [DebugView]로 추적 확인

애널리틱스 ‘실시간’ 보고서로 추적 확인하는 것이 더 쉽고 직관적으로 확인할 수 있는데, 아주 조금 늦게 이벤트가 보이는 경우가 있습니다. 이 경우, 애널리틱스 관리자 페이지에서 [데이터 표시] -> [DebugView]로 추적 확인하시면 더 시각적이고 실시간보다 더 실시간으로 확인할 수 있습니다.

애널리틱스 ‘실시간’ 보고서로 추적 확인

(출처 : 마케톨로지의 구글 태그 관리자 설치 및 사용법 )

웹페이지를 조회한 후 애널리틱스의 ‘실시간/콘텐츠’ 보고서로 이동하면페이지 제목 및 화면 이름이 실시간으로 표시됩니다. 표시되지 않는다면 태그 관리자가 제대로 실행되지 않는 것입니다.

크롬 확장 프로그램(Tag Assistant, 태그 어시스턴트)으로 확인

Tag Assistant Legacy (by Google)

제공Google

버전21.266.18

업데이트됨2021년 9월 23일

Tag Assistant는 Google 애널리틱스, Google 태그 관리자 등 다양한 Google 태그의 설치 문제를 해결하는 데 도움이 됩니다.

Tag Assistant를 사용하면 페이지에 다양한 Google 태그를 올바르게 설치했는지 확인할 수 있습니다.

페이지로 이동하기만 하면 Tag Assistant가 어떤 태그가 있는지 알려주고, 발견한 오류를 보고하고, 구현할 수 있는 개선 사항을 제안합니다.

Google 애널리틱스, 애드워즈 전환 추적, Google 태그 관리자 등 대부분의 Google 태그를 확인합니다. Google Tag Assistant Recording을 사용하여 웹사이트를 오가는 일반적인 사용자 흐름을 기록하고 Google 애널리틱스 구현과 관련된 문제를 즉시 확인, 진단 및 해결합니다.

Learn About The New & Improved Google Tag Assistant(3:48)

Tag Assistant 실행으로 확인

태그 관리자의 [관리자]페이지의 [도구]중 [Tag Assistant 실행]하여 확인할 수 있습니다.

구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용)

구글 태그 관리자(GTM)에서 구글애널리틱스(GA) 태그 id를 연결하고 구글 태그 관리자에서 ‘기본 제공 변수’ 를 잘 구성하면 구글 애널리틱스에서 이메일, 전화번호(전화 문의 하기), 문의하기(문의하기 폼), 상담 예약하기, 회원가입 페이지로 이동, 장바구니 담기 페이지로 이동, 구매하기 페이지로 이동, 앱 다운로드(또는 앱 다운로드 페이지로의 이동), 문서 다운로드(또는 문서 다운로드 페이지로의 이동) 링크 등의 내부 링크는 물론 외부 링크를 추적할 수 있습니다.

이하 초록색은 구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용)의 글입니다.

UA의 기본 추적 태그가 페이지뷰만을 추적하고 클릭이나 스크롤 이벤트 추적을 위해서는 별도의 태그를 만들어야 했던 것과 달리 GA4 기본 태그는 별도의 태그 작업 없이도 클릭이나 스크롤 이벤트를 추적합니다. 클릭이나 스크롤 이벤트를 추적하려면, 구글애널리틱스의 [관리자]페이지 -> [테이터 수집 및 수정] -> [데이터 스트림]에서 아래와 같이 ‘향상된 측정’을 켜 두기만 하면 됩니다.

하지만 향상된 측정을 사용으로 해도 GA4에서 제공하는 click 이벤트는 외부로 이동하는 링크(이탈 클릭)만, 스크롤은 90% 스크롤 뎁스만 추적한다는 한계가 있습니다. 그래서 내부에서 이뤄지는 클릭이나 25%, 50% 스크롤 뎁스와 같이 보다 세부적인 추적을 원할 경우 태그 관리자를 이용해서 별도의 작업을 해줘야만 합니다.

이하에서는 ‘click’ 이벤트 추적 중 ‘모든 링크’를 추적하는 방법에 대해 설명합니다.

‘모든 링크 클릭’은 button 태그나 input의 submit 속성 등에 의해서가 아니라 오로지 a 태그의 href 속성에 의해 만들어진 링크만을 대상으로 합니다.

GA4의 ‘향상된 측정’에서 수집하는 ‘click’과 달리 외부로 빠져나가는 링크 뿐 아니라 사이트 내 이동을 위한 내부 링크, 이메일, 전화번호 등에 대한 링크가 모두 해당 됩니다. 물론 외부 링크도 포함됩니다.

‘모든 링크’에 포함되는 링크의 예시입니다.

사이트 도메인 : abc.com

내부링크 : abc.com/aboutus/
소스 : <a href=”https://abc.com/aboutus/”>About Us</a>

외부링크 : efg.com/supports/
소스 : <a href=”https://efg.com/support/”>efg Supports</a>

이메일 : info@abc.com
소스 : <a href=”mailto:[email protected]”>[email protected]</a>

전화번호 : 00-1111-2222
소스 : <a href=”tel:0011112222”>00-1111-2222</a>

클릭 정보를 담을 기본 제공 변수 추가하기

태그 매니저( https://tagmanager.google.com/)에서 (측정하고자 하는 도메인에 대한) 계정을 선택해주세요. (계정이 없으면 계정을 새로 만들고 GTM tag 를 사이트에 설치한후 연결이 잘 되었는지 test를 해주셔야 합니다.) GTM 메뉴에서 ‘변수’를 클릭하고 ‘기본 제공 변수’ 섹션의 우측 상단에 있는 ‘구성’ 버튼을 누릅니다. ‘기본 제공 변수’ 들중 클릭수와 관련된 ‘변수’들을 사용에 체크하여 사용 가능한 상태로 만들어줍니다.

클릭수와 관련된 정보를 담아둘 변수들이 선택되어 있지 않다면 그림과 같이 모두 체크해서 추가해 줍니다. 이미 체크되어 있다면 그대로 둡니다.

‘기본 제공 변수 구성’ 패널을 닫았을 때 ‘기본 제공 변수’ 목록에 아래와 같이 클릭 관련 변수들이 추가되어 있어야 합니다.

( 이미지 출처 : 마케톨로지의 구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용) )

클릭 이벤트 추적이 이뤄질 때 클릭의 대상이 되는 링크에서 클릭 관련 정보를 수집한 후 이 변수에 담아두게 됩니다.

(링크 예시) :

<a href=”https://abc.com/aboutus” id=”menu-item-aboutus” class=”menu-item” target=”_self”>About Us</a>

위 링크에서 a 태그 안에는 href와 id, class라는 속성이 있고 여는 태그 <a>와 닫는 태그 </a> 사이에는 앵커 텍스트(클릭 텍스트)가 있습니다.

위 예시에서 태그 관리자는 클릭 관련 변수에 링크 관련 정보를 아래와 같이 저장합니다.

Click Text : About Us(앵커 텍스트)
Click ID : menu-item-aboutus
Click Classes : menu-item
Click URL : https://abc.com/aboutus
Click Target : _self

이 클릭 관련 변수들은 GA4의 ‘모든 링크 클릭’ 추적 태그를 만들 때 태그 구성에 포함시켜서 클릭 이벤트에 할당되도록 할 것입니다.

www.seenbuy.kr의 홈페이지를 열어보니 아래와 같은 a 태그들이 보이고 이용할 수 있는 변수로는 ‘Click Text : 앵커 텍스트’가 있음을 알 수 있었습니다.

전화하기
<a href="tel:024042463">024042463</a>
<a href="tel:01032667931">01032667931</a>

메일보내기
<a href="mailto:[email protected]">[email protected]</a>

문의하기
<a href="https://www.seenbuy.kr/%ec%83%81%eb%8b%b4-%eb%ac%b8%ec%9d%98%ed%95%98%ea%b8%b0/"><span>문의하기</span></a>

로그인
<a href="https://www.seenbuy.kr/login/"><span>로그인</span></a>

회원가입
<a href="https://www.seenbuy.kr/register/"><span>회원 가입</span></a>

다국어이용자
<a href="https://www.seenbuy.kr/en/" class="">English</a>

GA4 클릭 이벤트 추적 태그를 위한 준비사항(변수, 태그, 트리거 설정)

GA4 측정 ID 변수 만들기
GA4 구성(기본 추적) 태그 만들기
모든 페이지에서 ‘링크 클릭’ 트리거

GA4 측정 ID 변수 만들기

이 변수는 기본 제공 변수가 아니고 기본 제공 변수 아래에 있는 [사용자 정의 변수]를 클릭하여 만들 수 있습니다.

변수명 : GA4 측정 ID(G-L1ZVNY****)
변수 유형 : 상수
변수 값 : 웹 데이터 스트림의 측정 ID

변수명은 위와 똑같은 이름으로 만들 필요는 없습니다. 식별이 용이하고 사용 중인 변수나 트리거, 태그들의 이름을 부여할 때 사용하는 규칙으로 만드시면 됩니다.

변수명 뒷부분 괄호안에 실제 측정 ID는 넣어도 되고 안 넣어도 됩니다. 만약 여러개의 웹사이트를 운영중이라면 식별을 위해 ID가 필요하지만 한개의 사이트만 운영할 경우 괄호 안 측정 ID를 생략해도 됩니다.

주의 하셔야 할 점은 여기 사용되는 ID는 ‘속성 ID’가 아니라 ‘데이터 스트림’의 ‘측정 ID’라는 점입니다.

상수 : 변수 유형중 상수는 ‘유틸러티’아래에 있습니다.

변수 값은 ‘데이터 스트림’의 ‘측정 ID’을 값으로 넣어주세요.

GA4 구성(기본 추적) 태그 만들기

( 출처 : 구글 태그 관리자 사용하여 구글 애널리틱스 GA4 기본 추적 설정하기 )

측정 ID를 담아둘 변수를 만들었으면 이제 태그를 만들 차례입니다.

태그명 : GA4 구성(G-L1ZVNY****)
태그 유형 : Google 애널리틱스 : GA4 구성

태그명

변수명과 같은 이유로 기본 구성 태그의 이름도 상황에 맞게 측정 ID를 포함시키거나 생략합니다.

태그 구성

태그 유형

Google 애널리틱스: GA4 구성 태그는 23.11.30 기준 [Google 태그]로 변경되었습니다. 아래의 태그 유형에서 ‘Google 애널리틱스 : GA4 구성’ 대신 ‘Google 태그’를 선택해주세요.( 사용 중이던 GA4 구성 태그는 Google 태그로 자동 업그레이드되었습니다. 측정 및 기능은 이전과 동일한 방식으로 작동하므로 별도로 취할 조치는 없습니다.)

태그 ID

[태그 ID]를 선택 후 위에서 만들어 두었던 GA4 측정 ID 변수(상수, 사용자 정의 변수)를 선택해줍니다.

트리거를 태그에 연결 : 태그가 작동하는 조건(트리거)을 설정

트리거태그 ID를 만들었으면 태그로 이동하여 만들어 두었던 GA4 구성(G-3GRCG9*****) 태그를 선택한 후 트리거를 연결해줍니다. 트리거는 태그 관리자에서 기본 제공하는 ‘All Pages’를 연결합니다.

태그 관리자 변경사항 적용(배포)하기

변수와 태그 생성, 트리거 연결이 마무리 된 후 ‘제출’ 후 ‘게시’ 버튼을 눌러 ‘배포’를 마무리 하면 GA4의 추적이 시작됩니다.

버전 이름과 설명을 입력하는 창에서는 적당한 내용을 입력하거나 빈칸으로 놓아두고 [건너뛰기]한 후 [게시] 합니다.

‘모든 링크 클릭’ 트리거 만들기

전 단계에서는 필요한 ‘변수’를 사용 가능한 상태로 만들었고 이제 트리거를 만들 차례입니다. 여기서 만들 트리거는 사이트의 모든 페이지에 상주하며 이벤트를 감시하다가 <a> 링크에 의한 클릭이 발생하면 연결된 태그를 실행할 것입니다.

태그나 트리거를 명명할 때 정해진 규칙은 없습니다. 나중에 다시 열어볼때 알아보기 쉬운 이름으로 해주면 됩니다.

그래서 이 트리거의 이름도 ‘모든 링크 클릭’ 이라고 알기 쉽게 지었습니다.

[트리거] -> [새로 만들기]을 클릭하여 트리거 만들기를 시작해주세요.

트리거 유형은 ‘클릭 – 링크만’을 선택하고 트리거 사용 조건은 아래와 같이 합니다.

태그 대기 : 체크 – 최장 대기시간 2,000밀리초
유효성 확인 : 체크
트리거 조건 : Page URL | 정규 표현식과 일치 | .* (트리거 조건에 Page URL 이 없으면 [변수] -> [기본제공 변수]에서 페이지 중 [Page URL]을 사용함으로 체크해주세요. 이 방식으로 [Page URL]을 선택하면 {{Page URL}}로 표시되는데 이것은 정상입니다. 저장하면 Page URL로 저상적으로 표시됩니다. ) Tip: ” .*”이 정확히 입력되어야 합니다. 주의해주세요.

모든 페이지에서 유효한 링크 클릭에 대해 추적을 하겠다는 설정입니다.

GA4에서 사용될 ‘모든 링크 클릭’ 태그 만들기

‘GA4 모든 링크 클릭’ 태그 설정

준비사항이 다 구성되었으면 이제 구글 애널리틱스 서버로 ‘클릭 관련’ 정보를 전달할 태그를 만들어야 합니다..

이를 위해서는 GA4 측정 아이디를 담아둔 변수와 GA4 구성 태그가 준비되어 있어야 합니다.

태그명

GTM ‘태그’ 페이지에서 ‘새로 만들기’를 클릭한 후 태그 이름을 ‘GA4 모든 링크 클릭’처러 적당히 넣어주고

태그 구성

태그 구성 중 [태그 유형]으로 ‘Google 애널리틱스 : GA4 이벤트’를 선택합니다.

[측정 ID]는 위(GA4 측정 ID 변수 만들기)에서 만들어 둔 ‘GA4 구성(G-9GLWM2*****))’ 변수(보다 정확히는 변수 유형인 ‘상수’인 변수)를 선택하고

[이벤트 이름]은 태그 관리자에서나 애널리틱스에서나 알아보기 쉬운 이름으로 명명합니다. 생성 목적에 맞게 ‘click_all_links’라고 해보겠습니다.

‘all_links_click’이 더 와 닿지만 애널리틱스 이벤트 목록에서 click 이벤트와 같이 정렬되는게 더 보기 편할테니 ‘click_all_links’로 합니다.

[매개변수]로는 첫번째 이벤트 매개변수 이름은 link_id 로 하고 값은 {{Click ID}} 변수를 지정합니다

( 이미지 출처 : 마케톨로지의 구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용) )

매개변수 값을 넣으려면 레고 블럭처럼 생긴 변수 아이콘을 눌러서 변수 목록 패널을 열거나 입력창 안에 {{ 를 입력해서 드롭다운 방식으로 변수 목록이 표시되게 할수 있습니다.

( 이미지 출처 : 마케톨로지의 구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용) )

뒤 이어서 두번째, 세번째 매개변수로 필요하다고 생각되는 클릭 관련 정보들을 지정해 줍니다.

link_classes : {{Click Classes}}
link_url : {{Click URL}}

link_element : {{Click Element}} – 저희는 이 매개변수도 추가하여 사용하는데, 이 경우, 애널리틱스에서 https://www.kpco.kr/blog/%eb%a9%80%ed%8b%b0%ec%a1%b0%ec%9d%b8%ed%8a%b8/, https://www.kpco.kr/blog/category/%eb%b8%94%eb%a1%9c%ea%b7%b8/%eb%b0%b0%ea%b4%80-%ea%b3%b5%ec%82%ac/, mailto:[email protected], tel:02-430-8804와 같은 이벤트를 확인할 수 있습니다. url은 text 클릭후 이동한 웹페이지 url을 의미하고 mailto:[email protected]은 관리자 페이지로 메일 보내기를 클릭했음을 tel:02-430-8804은 사무실 일반전화로 전화하기를 시도했음을 알 수 있어 더 깊이 있는 이벤트(정보)를 얻을 수 있습니다.

트리거 설정

태그 구성을 맞추었으면 태그가 작동할 조건인 트리거를 설정해야합니다. 트리거는 모든 링크 클릭-링크만을 선택해주세요.

지정하고 나면 아래와 같은 그림이 될 것입니다.

매개변수 이름은 아래 링크를 참고해서 GA4에서 사용되고 있는 것을 사용하는게 좋습니다. 같은 성격의 매개변수가 따로 수집되어 데이터 분석이 난해해 지는 것을 막을 수 있습니다.

https://support.google.com/analytics/answer/9216061?hl=ko&ref_topic=9756175( 좌측 링크를 열면 3열의 테이블이 보인는데, 3번째 열을 보다 보면 매개변수들이 보입니다. )

이벤트 이름과 매개변수 이름 & 값을 모두 입력했다면 저장을 눌러줍니다.

(제출->게시하여)변경 내용 배포하고 이벤트 작동 여부 확인하기

실시간 보고서로 확인

‘제출’, ‘게시’ 버튼을 클릭해서 변경 내용을 배포한 후 구글 애널리틱스로 이동해서 실시간 보고서를 확인해 봅니다.

실시간에 표시가 안되는 경우, 스마트폰에서 [전화하기]를 클릭해 보니는 것이 실시간 보고서에 가장 빨리 그리고 정확하게 반영되오니 참고하세요.

( 이미지 출처 : 마케톨로지의 구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용) )

이벤트 목록에서 click_all_links 를 클릭하면 매개변수 목록이 표시되고 매개변수를 클릭하면 그안에 할당된 값이 표시됩니다.

실시간 보고서에서 click_all_links 이벤트와 매개변수 이름 & 값이 정상적으로 표시되고 있다면 지금까지의 과정이 모두 순조롭게 이뤄진 것입니다.

한두 시간쯤 후에 구글 애널리틱스에서 ‘이벤트’ 보고서를 열어 보면 click_all_links 이벤트가 수집되고 있는 걸 확인할 수 있으실 겁니다.

(실시간 보고서가 아닌) 일반 보고서 확인

실시간 보고서 외의 다른 보고서는 시간 지연(1일)이 있으므로 태그 실행 여부를 바로 확인하기 위해서는 ‘실시간 보고서’로 확인하는 것이 바로 확인도 되고 방문자가 많은 사이트의 경우, 정확한 확인이 됩니다.

GA4에서 이벤트 조회

구글 애널리틱스의 [보고서] > [참여도(Engagement)] > [이벤트(Event)] 에 이벤트가 표시되는지 확인합니다. 분석할 이벤트를 선택하면 아래와 같은 상세화면이 나옵니다.

상세화면에서 term, Tel Number, Link Text와 같은 (이벤트) 측정기준 이름별(측정기준 이름은 애널릭틱스 이용자(분석자)가 이벤트 매개변수를 알아볼 수 있도록 명명한 이름이라고 할 수 있습니다.) 보고서를 상세하게 살펴볼 수 있습니다.

맞춤 정의(맞춤 측정기준, 맞춤 측정항목)이 안보이는 경우, 구글 애널리틱스 관리자 페이지에서 맞춤 측정기준 또는 맞춤 측정항목을 만들어주어야 합니다.

맞춤 측정기준 또는 맞춤 측정항목을 만들려면 다음 단계를 따르세요.

보고서 페이지에서 [설정] > [데이터 표시] -> [맞춤 정의]를 선택합니다.

^{참고 : 위에 이미지중 설명문을 보면 MonsterInsights custom dimension라는 문구가 많이 보이는데 이것은 워드프레스 플러그인중 아래의 플러그인을 설치 이용하면서 설치된 것입니다. 아래의 플러그인은 이 많은 맞춤 측정항목을 만들어서 추적한다는 점에서 훌륭한 분석 플러그인을 알 수 있습니다.}

MonsterInsights – Google Analytics Dashboard for WordPress (Website Stats Made Easy)

분홍색 네모안을 보시면 link_action, link_label, link_text 매개변수는 이미 만들어져 있음을 알 수 있습니다.

측정기준 이름	설명	범위	사용자 속성/매개변수
Link Action	MonsterInsights custom dimension	이벤트	link_action
Link Label	MonsterInsights custom dimension	이벤트	link_label
Link Text	MonsterInsights custom dimension	이벤트	link_text

[맞춤 측정기준 만들기]

link_text에 해당하는 Link Text는 있으므로 link_id, link_classes, link_url, link_element를 새로 만들어주면 될 것 같습니다.

[맞춤 측정기준 만들기]를 클릭하여 만들기를 시작해 주고

(맞춤) 측정기준 이름을 입력합니다.
범위(측정 기준 유형)로 “이벤트”를 선택합니다.
설명을 넣어주고 이벤트 매매변수를 넣어줍니다. 이벤트 매개변수 선택을 클릭하여 구글 애널리틱스에서 제공하는 자동 수집 이벤트에서 사용하는 매개변수을 이용할 수도 있고 사용자가 임의로 매개변수를 선언하고 사용자 속성을 부여하여 이용할 수도 있습니다.

참고로 link_action, link_label, link_text과 같은, [GA4] 자동 수집 이벤트에서 사용할 수 있는 다양한 매개변수들은 [GA4] 자동 수집 이벤트 를 참조하세요. [GA4] 자동 수집 이벤트에 있는 매개변수들은 구글애널리틱스에서 이미 사용하고 있는 매개변수들이므로 이들 매개 변수들과 중복되지 않도록 사용자 정의 매개변수를 부여하여 이용하세요.

저장을 클릭합니다.

맞춤 측정기준 또는 맞춤 측정항목이 만들어지면 보고서에 값이 표시됩니다.

유니버셜 코드에서 이벤트 조회

구글애널리틱스를 접속하시면, 아래와 같이 지능형 이벤트와 방문형태 > 이벤트에서 그 결과를 확인할 수 있는데, 이벤트 흐름을 따라 가시면 잠재고객이 어떤 액션을 했는지 추적을 할 수 있습니다. 즉, 상기 옥션에서 “추석연휴한정특가”이벤트를 선택한 고객은 첫페이지에서 나갔는지, 위시리스트에 담기만하고 구매하지 않았는지, 구매결정은 하였으나 결정하지 않았는지 추적할 수 있습니다.

기술적 구현에 대한 웹 세미나(동영상)

영어로 되어 있으나 영어자막을 눌러보시면 도움이 되실겁니다.

문제 해결(Trouble Shooting)

url이 *.php인사례

http://한글도메인.com/event/event1.php으로 사이트에 GTM을 설치하고 구글 애널리틱스에서 이벤트 보고서를 살펴보았는데 추적이 안되는 문제가 발생했습니다.

웹사이트 주소가 *.php로 끝나는 경우, 해당 웹사이트 주소는 PHP 파일 경로를 나타냅니다. 즉, 해당 주소로 접속하면 PHP 파일이 실행되어 웹페이지가 생성됩니다. www.abc.com/*def.pdf의 경우, 어도비뷰어가 def.pdf를 여는 것과 같은 원이로 웹페이지가 생성되는 것인데, 이 경우, 위에서 설명한 GTM 태그가 작동하지 않습니다.

이 사이트의 경우, 광고 랜딩페이지의 CTA를 아래와 같이 코딩하였는데, 전화하기가 <div>태그를 사용하여 추적이 안되는 문제가 발생하였으며

<div class="promotion_btn">
            <a class="ask_enter" href="http://xn--on3bn1f1ta6wn4qprp.com/?home=1#section6">
                    프로모션 문의 하기
            </a>
            <a class="home_enter" onclick="location.href='http://xn--on3bn1f1ta6wn4qprp.com/?home=1'">
                    홈으로
            </a>
            <div class="call_enter" onclick="document.location.href='tel:010-9116-1694'">
                    전화하기
            </div>
        </div>

이 사이트의 경우, 광고 랜딩페이지의 CTA를 아래와 같이 코딩하였는데, 전화하기가 <div>태그를 사용하여 추적이 안되는 문제가 발생하였으며 아래와 같이 <a>태그로 수정하니 잘 작동되었습니다.


<a class="call_enter" onclick="document.location.href='tel:010-9116-1694'">
                    전화하기
            </a>

참고자료 : 1. 구글 태그매니저(GTM) 사이트 설치 방법

2. 구글 태그 관리자(GTM)로 구글 애널리틱스(GA4) 설치하기 총정리! – GA4/유니버셜 애널리틱스(feat.설치부터 확인까지)

3. 분석마케팅의 [GTM기본] 4. 구글 태그관리자를 통해 GA 태그 설치하기

4. 태그 관리자 고객센터 Google 태그 정보

5. 마케톨로지의 구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용)

6. 마케톨로지의 구글 태그 관리자 설치 및 사용법

상희 김

검색엔진최적화, 인바운드마케팅, 유튜브최적화 전문

[추천]구글 태그 관리자(GTM)에서 구글애널리틱스(GA) 태그 id 연결하여 이벤트(이메일, 전화 문의 하기, 문의하기 폼으로 문의하기, 상담 예약하기, 앱다운로드등 CTA) 추적 자동화 시키기

한계

시작하기 전에 : 구글 애널리틱스 태그로 GA4태그가 아닌 유니버셜 태그를 사용하는 경우

필요성

Google 태그(Google Tag)

새로 계정을 만들어 구글 태그 매니저(Google Tag Manager) 이용하기

구글 애널리틱스에 있는 Google 태그를 이용하여 태그 매니저 이용하기

GA4 연결

기본 제공 변수들 중 click과 관련된 변수를 사용하기 위해 Google 태그 관리자 스니펫(컨테이너 스니펫) 설치

기본 제공 변수들중 Click과 관련된 변수들을 사용하기 위해 Google 태그 관리자 스니펫(컨테이너 스니펫) 설치해야 하는 이유

태그 설치가 제대로 되었는지 확인하기

미리보기(디버거)로 추적 확인

애널리틱스 관리자 페이지에서 [데이터 표시] -> [DebugView]로 추적 확인

애널리틱스 ‘실시간’ 보고서로 추적 확인

크롬 확장 프로그램(Tag Assistant, 태그 어시스턴트)으로 확인

Tag Assistant 실행으로 확인

구글 애널리틱스 GA4 – 모든 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용)

클릭 정보를 담을 기본 제공 변수 추가하기

GA4 클릭 이벤트 추적 태그를 위한 준비사항(변수, 태그, 트리거 설정)

GA4 측정 ID 변수 만들기

GA4 구성(기본 추적) 태그 만들기

태그명

태그 구성

태그 유형

태그 ID

트리거를 태그에 연결 : 태그가 작동하는 조건(트리거)을 설정

태그 관리자 변경사항 적용(배포)하기

‘모든 링크 클릭’ 트리거 만들기

GA4에서 사용될 ‘모든 링크 클릭’ 태그 만들기

‘GA4 모든 링크 클릭’ 태그 설정

태그명

태그 구성

트리거 설정

(제출->게시하여)변경 내용 배포하고 이벤트 작동 여부 확인하기

실시간 보고서로 확인

(실시간 보고서가 아닌) 일반 보고서 확인

GA4에서 이벤트 조회

맞춤 정의(맞춤 측정기준, 맞춤 측정항목)이 안보이는 경우, 구글 애널리틱스 관리자 페이지에서 맞춤 측정기준 또는 맞춤 측정항목을 만들어주어야 합니다.

[맞춤 측정기준 만들기]

유니버셜 코드에서 이벤트 조회

기술적 구현에 대한 웹 세미나(동영상)

문제 해결(Trouble Shooting)

url이 *.php인사례

상희 김

Related posts

그누보드(gnuboard)에 애널리틱스 추적 코드 넣기와 서치콘솔 소유권 인증 코드 넣기

[구글 애널리틱스(GA)] 특정 페이지 분석하기

에이치랩스(ahrefs)

답글 남기기 응답 취소