계정, 콘테이너 생성
구글 태그 관리자의 계정과 컨테이너가 이미 만들어져 있다면 이 단계는 건너뛰셔도 됩니다. 그렇지 않으면 안내에 따라 계정과 컨테이너를 만들도록 합니다.
‘컨테이너 스니펫’이라고 불리는 이 스크립트를 발급 받으려면 태그 관리자에 가입하고 계정과 컨테이너를 만들어야 합니다.
태그 관리자 사이트에 접속한 후 가입을 합니다.
구글 애널리틱스나 구글 Ads에 가입할 때 메일주소로 가입하는 게 좋습니다. 여러 개의 구글 솔루션을 하나의 동일한 계정으로 사용하면 솔루션마다 사용자를 추가하고 권한을 부여하는 수고를 덜수 있습니다.
가입 후 ‘계정’을 생성하고 계정에서 관리할 ‘컨테이너’를 생성합니다. 한 개의 계정에 여러 개의 컨테이너를 만들 수 있습니다.
계정을 회사, 컨테이너를 웹사이트 혹은 앱 단위로 구성하는 게 관리상 좋습니다.
회사가 웹사이트 두 개와 앱 한 개를 운영 중이라면 계정 하나를 만들고 그 계정 안에 두 개의 웹사이트 컨테이너와 한 개의 앱 컨테이너를 만듭니다. 회사도 하나, 웹사이트도 하나라면 하나의 계정 밑에 하나의 웹사이트 컨테이너를 만들면 됩니다.
GTM 컨테이너 스니펫
태그 관리자 우측 상단의 ‘미리보기’ 버튼 옆에 ‘GTM’으로 시작하는 파란 색 텍스트의 링크가 보입니다.
이 텍스트가 현재 컨테이너가 가진 고유의 컨테이너 ID입니다.
이 컨테이너 ID를 클릭하면 ‘GTM 컨테이너 스니펫’이라고 하는 짧은 코드가 두개가 나오고 각 코드 위에 설치 방법이 한줄로 안내되어 있습니다.
첫번째 조금 긴 코드는 <head>의 최대한 위에, 두번째 코드는 여는 <body>의 바로 뒤에 코드를 붙여넣으라고 되어 있습니다.
가이드대로 웹사이트 소스의 공통 부분에 삽입하면 태그 관리자 설치가 완료되는 것이고 태그 관리자가 관리하는 태그들이 작동을 하게 됩니다.
공통 부분에 삽입한다는 것은 모든 페이지에 하나씩 붙여 넣지 않고 웹페이지가 로드될때 공통으로 불러오는 파일들(헤더, 메뉴, 푸터 등) 중 해당 되는 파일에 한번만 넣는다는 뜻입니다.
아래 이미지처럼 첫번째 스니펫을 넣어야 하는 <head> 태그가 header.php라는 공통 파일에 들어가 있습니다. 이 사이트의 모든 페이지들이 header.php을 불러다 그 내용들을 실행시키므로 이 파일에 코드를 붙여넣으면 되는 것입니다.
이 이미지는 수년전에 설치방법 안내를 위해 캡쳐해 놓은 것이고 요즘은 워드프레스에서 소스를 직접 수정하는 기능을 제한하고 있습니다. 방법을 찾아서 접근할 수는 있겠지만 가급적 소스는 건드리지 않는 게 좋습니다. 윅스나 카페24 같은 다른 솔루션도 마찬가지입니다. html 소스에 직접 삽입하는 것은 다른 방법을 시도해 본후 그 방법이 불가할 때 최후의 선택으로 사용해야 합니다.
웹사이트에 컨테이너 스니펫 추가하기
이 게시물에서는 코드에 직접 추가하는 방법이 아닌 솔루션에서 지원하는 기능과 앱, 플러그인을 통해 구현하는 방법을 안내해 드리도록 하겠습니다. 꼭 html 소스를 수정하는 방법을 택해야 한다면 위 에시 이미지처럼 <head>가 포함된 공통 파일을 찾아서 첫번째 코드를 <head> 내에서 최대한 위쪽에, 두번째 코드를 <body>바로 뒤에 추가하면 됩니다.
코드 추가 예시 1: 워드프레스 테마(Avada)
Avada 테마: 옵션
워드프레스 Avada 테마 메뉴 중 ‘옵션 > Advanced > Code Fields(Tracking, etc.)’에서 ‘</head> 앞’ 입력란과 ‘<body> 다음’ 입력란에 1번과 2번 스니펫을 넣어 줍니다.
이렇게 솔루션 자체 또는 설치된 테마/스킨에서 제공하는 기능을 사용하는 게 가장 쉽고 안전합니다. 공통 파일을 찾아 코드를 수정하는 위험성 없이 입력란에 붙여넣기 하면 알아서 지정된 위치에 코드를 추가해 줍니다.
코드 추가 예시 2: 워드프레스 플러그인(GTM4WP)
만약 솔루션이나 테마/스킨에서 이 기능을 제공하지 않으면 앱 또는 플러그인 설치해서 스니펫을 설치합니다.
예시로 사용한 플러그인은 ‘GTM4WP: Google Tag Manager plugin for WordPress’입니다. 이름대로 워드프레스용 GTM 설치 플러그인입니다.
컨테이너 ID 만 입력란을 통해 저장해 주면 됩니다.
코드 추가 예시 3: 카페24 기본 제공 기능(직접 코드입력)
카페24 쇼핑몰 관리자 페이지에서 ‘쇼핑몰 설정 > 기본 설정 > 검색엔진 최적화(SEO) > 고급설정 > 코드 직접입력’ 화면으로 이동 후 ‘Head 영역’과 ‘Body 영역’에 코드를 각각 붙여넣고 저장합니다.
코드 추가 예시 4: 카페24 앱(GA 자동스크립트)
‘GA 자동스크립트’ 앱 사이트: https://store.cafe24.com/kr/apps/3800
카페24 전용 앱 스토어(https://store.cafe24.com/kr/apps)에서 무료 또는 유료로 설치해서 사용할 수 있는 앱을 이용할 수 있지만 아쉬운 점은 GTM용 앱은 없고 주로 GA, 페이스북, 카카오, 네이버 등 광고나 로그분석 솔루션의 코드를 구현해주는 앱만 있다는 것입니다. 아래 예시도 GTM이 아닌 GA용 앱입니다. GTM의 주요 용도가 GA 구현이고 전자상거래 추적이 필요한 경우에는 이런 앱이 좋은 선택이 될수 있습니다.
코드 추가 예시 5: 아임웹 기본 제공 기능(GA 자동스크립트)
아임웹에서 ‘설정 > SEO ‘ 페이지의 ‘고급 설정’ 카드에서 ‘공통 코드 삽입’ 옵션을 on 으로 바꾸면 위 이미지와 같이 세개의 입력란이 나타납니다.
여기서는 Header 영역을 Header Code와 Header Code 상단으로 분리해 놨습니다. GTM은 헤더 상단에 넣어야 하니 ‘Header Code 상단’ 입력란에 넣으면 됩니다.
Header Code 상단 블럭의 안내문을 보면 데이터 연결에서 지원하지 않는 항목은 입력해도 되지만 주문금액, 수량 등의 변수는 처리되지 않는다고 되어 있는데 GA4나 구글 애즈, 페이스북 등 마케팅 채널은 ‘마케팅 채널 연동’이라는 별도의 기능을 사용해야 하면 그렇지 않으면 전자상거래 데이터가 정상적으로 수집되지 않는다는 얘기입니다. 카페24 앱에서도 설명 드린 것처럼 이런 기능(마케팅 채널 연동)을 사용하는 것은 전자상거래 추적이 필요하고 GTM에서 전자상거래를 직접 구현하는 게 어려울 경우 좋은 선택이 될수 있습니다.
‘마케팅 채널 연동’은 ‘설정 > 마케팅 채널 연동’에서 이용할 수 있습니다.
마무리
지금까지 구글 태그 관리자를 설치하는 방법에 대해 여러 예시를 통해 살펴봤습니다.
솔루션의 자체 기능을 이용하거나 앱, 플러그인을 이용하는 법, 그중에는 GTM이 아닌 마케팅(광고, 로그분석) 솔루션의 코드를 코딩 없이 설치하는 기능들도 있었고 이런 기능은 비록 GTM을 설치해서 확장성 있게 태그를 관리하는데는 도움이 안 되지만 전자상거래를 구현해 준다는 점에서 사용을 고려해볼만한 옵션으로 볼수 있습니다. GTM 설치가 꼭 필요한 경우는 솔루션의 기능을 사용하는 게 가장 안정적이면서 간단한 방법이란 걸 알수 있습니다. 솔루션에서 제공하지 않을 때는 앱이나 플러그인을 사용해야 하고 그것마저 사용이 어려울 경우는 마지막 선택지로 소스에 직접 추가하는 방법을 택해야 할 것 같습니다.
구글 태그 관리자 사용법
구글 설치 후 기초부터 활용까지 다양한 사용법은 아래 링크들을 참고해 주시기 바랍니다.