구글 태그 관리자(4) - GTM 사용법 기초 : 페이지뷰 추적

구글 태그 관리자(4) 

- GTM 사용법 기초 :  페이지뷰 추적  -

 

 

구글 애널리틱스에서의 '페이지뷰 추적'을 예시로 해서

'구글 태그 관리자'의 사용법을 알아 보자.

이를 구현하는 과정에서 구글 태그 관리자의 구성과 사용법을 자연스럽게 익혀 보도록 한다.

'페이지뷰 추적' 예시를 진행하면서 아래의 작업들을 수행한다.

 

1. 변수 활성화하기

   a. 사용자 정의 변수 생성

   b. 기본 제공 변수 선택

2. 트리거 생성하기

3. 태그 생성하기

4. 미리보기&디버거로 작동 확인하기

5. 제출 & 게시하기

 

 

이 과정을 통해서

태그 관리자의 주요 구성 요소인 변수 설정,

​트리거 및 태그에 대한 정의와 제작 방법,

GTM ​미리보기(태그 어시스턴트) 및 구글 애널리틱스를 이용해서 태그 실행 여부를 확인하는 법,

생성 및 변경사항을 제출/게시하는 법 까지 알아 본다.

 

1. 변수 활성화하기

변수는 구글 태그 관리자의 3가지 주요 요소인 태그, 트리거, 변수 중 하나이다.

변수는 상황에 따라 다른 값을 가질 수 있고

트리거의 실행조건을 정의하거나 태그에 상호적 정보를 전달하는 용도로 사용된다.

 

a. 사용자 정의 변수 생성

GTM과 GA 연동하기를 위해

관심 컨테이너인 티스토리 블로그에 해당되는

사용자 정의 변수인 ‘GA 추적 ID’를 생성한 바 있다.

 

 

b. 기본 제공 변수 선택

자주 사용되는 변수를 태그 관리자가 미리 만들어 놓은 것이며

필요에 따라 기본 제공 변수 구성에 포함시키거나 제외시킬 수 있다.

기본 제공 변수 모음(목록)의 체크박스를 선택해서 포함시켜야만

해당 트리거나 태그에서 사용할 수 있다.

 

 

우리는 구글 애널리틱스에서의 페이지뷰 추적을 목적으로 함으로

기본 제공 변수 우측의 '구성'을 클릭하여

페이지 관련 기본 제공 변수가 체크되어 있는지 확인한다.

Page URL 등 이 체크되었음을 확인했다.

 

2. 트리거 생성하기

'트리거'는 태그의 실행 조건이다.

트리거에서 정의해 둔 조건이 충족되면 연결된 태그가 실행된다.

트리거의 유형이 ‘페이지뷰’일 경우 사용자가 페이지를 조회(view)하면 PageView 태그가 실행된다.

트리거의 유형이 ‘링크 클릭’인 경우 사용자가 링크를 클릭하면 링크클릭 태그가 실행된다.

 

작업공간 메인 화면 왼쪽 메뉴 중 '트리거'를 클릭하고 좌측 상단의 '새로 만들기'를 클릭한다.

 

'새로 만들기'를 클릭하면 다음과 같은 트리거 생성 화면이 나타난다.

이 화면에서 트리거의 이름과 구성을 지정할 수 있다.

 

트리거명을 ‘모든 페이지 트리거’로 입력하고 커저를 트리거 구성으로 옮겨 우측의 연필 아이콘을 클릭한다.

* 실습시 여러분은  ‘모든 페이지 뷰 트리거’로 명명하길 추천한다.

 

트리거 유형을 선택하라는 화면이 나타난다.

트리거 유형 선택에서 '페이지뷰'를 선택한다.

 

‘모든 페이지 트리거’로 명명된 트리거의 구성 요건 중,

'페이지뷰'가 트리거 유형으로 선택됐고,

실행조건으로 '모든 페이지 뷰' 옵션을 확인 한 후 저장 버튼을 클릭한다.

특정 페이지가 아니라 모든 페이지를 추적할 것이므로 실행 조건을 ‘모든 페이지뷰’로 선택한 것이다.

 

저장이 완료되면 트리거 창에서 생성된 트리거를 확인 할 수 있다.

 

3. 태그 생성하기

'트리거'가 실행 조건을 담고 있다면 '태그'는 실행 내용을 담고 있다.

태그 관리자 작업공간 메인 화면 왼쪽 메뉴 중 '태그'를 선택하고

좌측 상단의 '새로 만들기'를 클릭한다.

 

 

‘태그 구성’과 ‘트리거’ 선택창이 나타난다.

트리거와 태그의 연결은

아래 이미지처럼 태그 생성 화면에서 트리거를 추가하는 방식으로 이뤄진다.

 

 

태그명을 ‘GA_페이지뷰’로 입력하고

커저를 태그와 트리거를 연결하는 선택창인 ‘트리거’로 옮겨 우측의 연필 아이콘을 클릭하여

트리거를 우리가 방금 생성한 ‘모든 페이지 트리거’로 선택한다.

* 태그명은 여러분의 취향에 따라 임의로 명명할 수 있다. 

단, 태그가 많아 질테니 분류성, 통일성을 고려해 이름을 짓길 추천한다. 

필자는 'GA Event_PageView' 형식으로 통일하고 있으나 본 페이지에서는 실습용으로 ‘GA_페이지뷰’라 명명했음.

 

 

트리거와 태그가 연결되었다.

 

이제 커저를 ‘태그 구성’으로 옮겨 우측의 연필 아이콘을 클릭하면,

태그 유형을 선택하는 화면이 나타난다.

‘Google 애널리틱스: 유니버셜 애널리틱스’를 선택한다.

 

 

 

태그 생성이 거의 마무리 됬다.

이제 (태그 유형 선택에 이어) ‘추적유형’과 ‘Google 애널리틱스 설정’을 선택할 수 있다.

추적 유형은 ‘페이지뷰’를 선택한다.

 

‘Google 애널리틱스 설정’에서는 Google 애널리틱스와 연동시키기 위한 변수를 지정한다.

‘Google 애널리틱스 설정’은 우리가 사용자 정의 변수로 생성한 ‘GA 추적 ID’를 선택한다.

이때 ∇를 클릭해서 {{GA 추적 ID}} 변수를 불러와서 사용한다.

앞으로 해당 컨데이너에서 GA의 이벤트나 전자상거래를 추적하기 위해 태그를 만들 때는

미리 만들어 둔 {{GA 추적 ID}} 변수를 불러와 편리하게 사용할 수 있다.

 

 * 태그 관리자에서 {{ }} 로 둘러싼 텍스트는 변수로 인식됨.

 

이상으로 설정을 완료하고 저장을 누르면 태그가 생성된 것을 확인할 수 있다.

 

 

4. 미리보기&디버거로 작동 확인하기

새로 생성하거나 변경된 내용을 제출하여 컨테이너에 적용하기 전에

태그가 의도대로 작동되는지 오류 없이 잘 실행되는지

구글 태그 관리자에서 제공하는 디버거(미리보기)를 통해 확인하는 것을 추천한다. 

 

참고로 최근 미리보기 작동 모드가 변경되었다.

'태그 어시스턴트에 의한 최신 미리보기'는 다음 내용 아래 * 을 참조하세요.

 

(구 미리보기 작동 모드)

 

태그 관리자 우측 상단의 ‘미리보기’ 버튼을 클릭하면

다음과 같이 주황색 안내 화면이 나타난다.

 

해당 컨테이너 웹페이지로 이동하면 웹페이지 하단에 태그가 제대로 작동함을 확인할 수 있다.

 

디버그창이 로드되지 않을 경우, F5 키(refresh)를 누르면 화면 하단에 디버거 콘솔 창이 열린다.

 

 

*  2020년 10월 15일 Google Analytics 4가 출시되었다.

이에 미리보기 작동 모드가 변경되어

미리보기를 클릭하면,  '태그 어시스턴트'가 가동되어 다음 화면이 뜬다.

 

URL을 입력하고, '스타트' 버튼을 클릭한다.

미리보기가 제대로 작동되었는 지는 다음을 확인하면 된다.

 

 

즉, 다음과 같이  실행 테스트를 하기 위한 해당 컨테이너 창과 미리보기 창이 각각 표시된다. 

 

 

 

 

 디버거(미리보기)를 통해 ‘GA_페이지뷰’ 태그가 실행됐음을 확인할 수 있다.

 

 

5. 제출 & 게시하기

'트리거'와 '태그'를 저장한다고 해서 변경된 내용이 바로 적용되지는 않는다.

'미리보기'를 통해 제대로 작동하는지가 확인되었으면 우측 상단의 ‘제출’ 버튼을 클릭한다.

 

이어 나타나는 화면에서 다시 ‘게시’ 버튼을 눌러서 웹에 게시해야 비로소 변경 내용이 적용이 된다.

제출버튼을 클릭하면 새로운 버전을 적용하기 전에 히스토리를 남길 수 있게 하는 것이다.

꼭 작성하지 않아도 태그 게시에는 전혀 문제가 없으나, 

버전 별 변경사항을 기록하면 추후에 히스토리를 파악할 때, 필요한 부분을 빠르게 찾아 낼 수 있을 것이다.

모두 완료 되었으면 ‘게시’ 버튼을 누르자.

 

 

 

‘게시’를 실행하면 생성된 GA 태그들이 최종적으로 웹페이지에 적용된다.

다음은 게시 결과로 새로 생성하거나 수정한 태그들의 목록이다.

 

 

 

 

참고로 태그 관리자는 변경사항을 버전 별로 저장해서 다시 원하는 시점으로 복원시킬 수 있는데

새로운 버전을 저장하는 작업이 ‘제출’이고

제출된 버전을 실제로 웹 또는 앱에 적용하는 작업이 ‘게시’이다.

적용 방법이 복잡한 이유는 태그를 효율적으로 관리하기 위함이라고 생각하면 될 것이다.

  

게시 후,

웹페이지를 조회한 후 애널리틱스의 ‘실시간/콘텐츠’ 보고서로 이동하면

조회한 페이지의 경로와 제목이 실시간으로 표시된다.

표시되지 않는다면 태그 관리자가 제대로 실행되지 않는 것이다.

 

확인해보자.

 

 

 

 

 

생성된 태그에 대한 작동 진단은 아래 두 가지 방법을 이용할 수 있다.

 

a. 미리보기(디버거)/'태그 어시스턴트'로 확인

b. '구글 애널리틱스' 실시간 보고서로 확인

 

 

지금까지 '구글 태그 관리자'를 이용해서 애널리틱스의 '페이지뷰 추적'을 구현해 봤고

그 과정에서 태그 관리자의 3 요소인 변수, 트리거, 태그에 대한 정의와 사용법을 살펴 봤다.

복잡해 보이지만 몇 번 실행해보면 단순한 구조이고 작동 방식이다.

 

‘트리거로 조건을 설정하고 조건이 충족되면 태그가 실행된다.

트리거의 조건과 태그의 상호간의 정보를 위해 변수가 사용된다’

 

이 작동 원리만 기억하면

구글 태그 관리자를 이해하고 활용하는데 큰 문제는 없을 것이다.