구글 태그 매니저(GTM)는 웹사이트에 마케팅 용도로 삽입되는 다양한 태그들을 쉽게 관리하고 배포할 수 있게 할 수 있게 해주는 도구입니다. 여기서 말하는 태그란, 데이터를 수집하여 구글 애널리틱스, 구글 광고 또는 기타 다양한 마케팅 플랫폼으로 전송하는 코드 조각입니다.
구글 태그 매니저 사용 목적
구글 태그 매니저는 웹사이트 내의 모든 태그들을 한 곳에서 관리할 수 있게 해줍니다. 태그를 웹사이트에 삽입하려면 웹사이트의 소스 코드를 변경해야 하므로, 기본적으로 태그 삽입은 웹사이트 구조 및 소스에 대해 어느 정도 알고 있어야 가능한 작업입니다. 하지만 태그 매니저를 이용하면 태그를 업데이트 하기 위해 굳이 소스에 접근할 필요가 없습니다. 모든 태그 작업에 대해 사용자 친화적인 웹 인터페이스를 제공하고 있어, 코딩 지식이 없는 마케터나 애널리스트도 개발자의 도움 없이 언제든 손쉽게 태그를 추가, 편집, 게시할 수 있습니다. 아울러, 버전 관리 기능이 포함되어 있어 사용자가 태그의 변경 사항을 추적할 수 있고, 필요시 이전 버전으로 되돌리는 것도 가능합니다. 업데이트 된 태그를 라이브 사이트에 배포하기 전, 미리보기 모드를 통해 태그가 올바로 작동하는지 테스트하고 디버그할 수 있다는 것도 태그 매니저의 장점입니다.
태그 매니저를 사용하면 구글 애널리틱스, 구글 광고 등 자주 사용되는 서비스에 대한 태그 템플릿을 이용하여 태그 추가 프로세스를 간소화할 수 있으며, 특정 태그가 활성화되어야 하는 조건 즉, 트리거와 실행 규칙을 정의함으로써 태그가 실행되는 시기와 위치를 제어할 수 있습니다. 구글 태그 매니저는 구글 애널리스틱스와 함께 사용되는 경우가 많습니다. 애널리스틱스와 통합하면 웹사이트 내 다양한 이벤트 및 목표에 대한 추적을 쉽게 설정하고 관리할 수 있습니다.
전반적으로 태그 매니저는 웹사이트 내 태그를 효율적으로 관리해주고 프로세스를 간소화하여 시간을 절약해주며 태그 작업에 대한 개발자의 의존도를 줄여주는 유용한 툴이라 할 수 있습니다.
구글 태그 매니저 설치하기
구글 태그 매니저 웹사이트 https://marketingplatform.google.com/intl/ko/about/tag-manager/
구글 태그 매니저 웹사이트에서 우측 상단의 ‘무료 사용’ 버튼을 클릭하여 진행합니다.
계정은 여러개의 컨테이너를 가질 수 있고, 웹사이트 한 개 당 하나의 컨테이너를 할당한다고 생각하시면 됩니다. 계정 이름, 국가, 컨테이너 이름, 타겟 플랫폼 등을 설정해주고 ‘만들기’ 클릭합니다.
GDPR 데이터 처리 약관에도 동의 체크하고, ‘예’ 버튼을 클릭하여 구글 태그 매니저 이용약관에 동의합니다.
구글 태그 매니저 설치를 위해 <head> 태그 내에 삽입해야 할 코드와 <body> 태그 내에 삽입해야 할 코드가 팝업으로 안내됩니다. <head>와 <body> 태그 내에 코드를 삽입하려면 FTP나 파일 매니저를 이용해 사용중인 워드프레스 테마의 header.php 파일에 접근해야 하지만, 워드프레스 관리자 대시보드에서 좀 더 쉽게 작업할 수도 있습니다.
워드프레스 관리자 대시보드 [외모 Appearance] – [테마 파일 편집기 Theme File Editor]로 이동합니다. 우측 상단에서 현재 사용중인 테마가 선택되어 있는 것을 확인하고, 그 아래에 나오는 테마 파일 목록에서 Theme Header (header.php)을 클릭합니다. 제가 사용중인 테마는 이례적으로 <head>와 <body> 태그가 header.php 대신 document-open.php라는 파일에 들어있어 그 파일에서 작업하였습니다. 지시대로 복사한 코드를 <head>에서 최대한 위에, 그리고 <body> 바로 뒤에 붙여넣고 ‘파일 업데이트 Update File’ 버튼을 눌러서 변경 사항을 저장합니다.
코드 삽입이 완료되면 다시 팝업으로 돌아와, 코드 삽입이 무사히 되었는지 확인해보기 위해 웹사이트 테스트 란에 웹사이트 주소를 입력하고 ‘테스트’ 버튼을 클릭합니다. 녹색 체크 마크가 나오면 무사히 삽입이 된 것이므로 ‘확인’ 버튼을 클릭하여 완료합니다. 노란색 경고 마크가 나오면 코드 입력이 정상적으로 되지 않은 것이니 입력 상태를 다시 확인해보도록 합니다. 캐시로 인해 코드 삽입 변경 사항이 바로 반영되지 않아 경고 마크가 나오는 경우도 있으니, 이 때는 브라우저 캐시를 삭제하고 다시 테스트 해보면 됩니다.
컨테이너가 무사히 생성되면 이와 같은 작업공간 화면이 나옵니다.
기본 구성 요소로 태그 생성하기 (GA4 GTM 연결)
구글 태그 매니저는 작업공간, 버전, 관리자 탭으로 되어 있으며, 팀원들과 협업을 하는 경우 작업공간을 추가하여 버전관리를 할 수 있습니다. 작업공간에서의 주요 작업은 태그, 트리거, 변수 이 3가지 구성 요소를 중심으로 이루어지게 됩니다. 실제로 간단한 태그를 생성해보면서 한 번 살펴보겠습니다.
1. 트리거 (Trigger)
좌측 [트리거] 메뉴로 이동하여 ‘새로 만들기’ 버튼을 클릭하면 ‘트리거 구성’ 영역이 나옵니다. 이 영역을 클릭하면 우측에서 페이지뷰, 클릭, 사용자 참여, 기타 유형으로 구분된 ‘트리거 유형 선택’ 목록이 나타납니다. 트리거는 이벤트를 캡춰하여 지정된 작업을 실행하는데 사용되는 조건이라 할 수 있습니다. 즉, 어떤 이벤트에서 태그를 활성화할지 지정해주는 것입니다.
2. 변수 (Variable)
변수는 특정 값을 담아놓는 공간이라고 생각하면 됩니다. 좌측 [변수] 메뉴로 이동하면 ‘기본 제공 변수’ 영역과 ‘사용자 제공 변수’ 영역이 나옵니다. 사용자 제공 변수에서 ‘새로 만들기’ 버튼을 클릭하면 ‘변수 구성’ 영역이 나옵니다. 변수 구성 영역을 클릭하면 우측에서 탐색, 페이지 변수, 페이지 요소, 유틸리티, 컨테이너 데이터 등으로 구분된 ‘변수 유형 선택’ 목록이 나타납니다. 구글 애널리틱스 GA4의 측정 ID를 할당하기 위한 변수를 만들어보겠습니다.
유틸리티 내의 ‘상수’를 선택합니다. GA4 측정 ID를 입력하고 ‘저장’을 클릭합니다.
3. 태그 (Tag)
태그는 수집된 데이터를 어디로 보낼지 지정해주는 곳입니다. 좌측 [태그] 메뉴로 이동하여 ‘새로 만들기’ 버튼을 클릭하면 ‘태그 구성’ 영역과 ‘트리거’ 영역이 나옵니다. 태그 구성 영역을 클릭하면 우측에서 추천, 맞춤설정, 더보기 등으로 구분된 ‘태그 유형 선택’ 목록이 나타납니다. 추천 섹션에서 ‘Google 태그’를 선택합니다.
태그 ID에는 우측 아이콘을 클릭하여 아까 만들어둔 ‘GA4 측정 ID’ 변수를 넣어주고, 하단의 트리거 영역을 클릭하여 페이지뷰 섹션의 ‘All Pages’로 설정해줍니다. 좌측 상단에서 태그 이름을 지정해주고 우측 상단의 ‘저장’ 버튼 클릭하여 태그를 저장합니다.
컨테이너 미리보기 및 제출하기
태그를 생성한 후 실제 플랫폼에 적용하려면 ‘제출’을 해야 합니다. 제출하기 전에 미리보기 기능을 통해 태그가 정상적으로 적용되었는지 확인해볼 수 있습니다. 컨테이너 작업공간의 우측 상단에서 ‘미리보기’를 클릭합니다.
태그 어시스턴트를 웹사이트에 연결하기 위한 창이 뜹니다. 태그 매니저가 설치된 웹사이트 주소를 넣고 ‘Connect’를 클릭합니다.
정상적으로 연결이 되었다는 문구와 함께 미리보기용 웹사이트 창이 별도로 뜨면서, 그 안에 태그 어시스턴트가 연결되었다는 팝업이 함께 나옵니다. ‘Continue’ 버튼을 클릭하여 태그 어시스턴트 화면으로 돌아갑니다.
태그 어시스턴트 화면에서, 웹사이트에 연결이 잘 되었고 해당 태그도 잘 실행되었다는 내용을 확인할 수 있습니다.
실제 라이브에 적용하기 위해 ‘제출’ 버튼을 클릭합니다.
버전 이름과 버전 설명을 입력해주고 ‘게시’ 버튼을 클릭하면 게시가 완료됩니다.
버전 번호와 함께 게시되었다는 확인 패널을 볼 수 있습니다. 추가한 태그, 트리거, 변수명이 함께 표시됩니다. 이제 구글 태그 매니저가 설정한 내용에 따라 태그 관리를 시작하게 됩니다.
