웹사이트에 GA4 연결하기 (3) GTM 계정 만들고 웹사이트에 설치하기
Note: 이 글은 GA, GTM이 모두 처음인 분을 위한 튜토리얼입니다. 기존에 UA(Universal Analytics)를 사용하고 계시던 분이 GA4를 추가 연결하는 방법을 찾고 있다면 UA(Universial Analytics)에서 GA4(Google Analytics 4)로 전환하기 글을 참고해주세요.
자! 이제 거의 다왔습니다. GTM(Google Tag Manager) 계정을 만들어봅시다.
GA에서 모든 계정 > portfolio 버튼을 클릭하면 나왔던 팝업 창을 기억하시나요? 여기부터 시작해볼게요.
스크린샷 2022-07-01 오후 1.59.31.png
스크린샷 2022-07-01 오후 4.08.54.png
GTM 계정 만들기
팝업창에서 두 번째 아이콘을 클릭해주세요. GTM 계정이 없다면 아래와 같이 시작하기 버튼이 보일거예요. 시작하기 버튼을 눌러주세요.
스크린샷 2022-07-01 오후 4.10.56.png
계정 만들기를 클릭해주세요.
스크린샷 2022-07-01 오후 4.53.58.png
계정 이름을 설정해주세요. GA에서는 계정 아래에 여러개의 속성을 설정했었죠. GTM 역시 GA와 비슷하게 계정 아래에 여러개의 컨테이너를 설정할 수 있습니다. 그리고 각 컨테이너는 태그를 관리하는 단위로 보통은 하나의 웹사이트에 하나의 컨테이너를 붙여 관리합니다. 저는 포트폴리오 용도로 사용할 웹사이트 이외에는 다른 웹사이트를 운영할 계획이 없다고 가정하고, 계정명을 portfolio 라고 설정해주었습니다. 만약 법인이고, 하나의 계정에서 여러 컨테이너를 관리할 계획이라면 법인 명을 계정 명으로 설정하기도 합니다.

여러개의 웹사이트를 하나의 컨테이너로 관리하는 것도 가능한가요?
가능합니다. 여러 웹사이트들의 HTML 구조가 비슷하고, 일관적으로 태그를 관리하고 싶다면 하나의 컨테이너로 여러 웹사이트들에 같은 태그가 적용되도록 설정할 수 있습니다. 
하지만 장점이 있다면 단점도 있겠지요. 컨테이너를 수정하면 동시에 여러 웹사이트들에 수정 사항이 반영되기 때문에 어느 웹사이트에서는 예상하지 못한 동작을 할 수도 있습니다. 또한 권한 관리가 어려워집니다. 그래서 보통은 하나의 웹사이트에 하나의 GTM 컨테이너를 설치해 사용합니다. 설치 방법은 뒤에서 안내하겠습니다.
스크린샷 2022-07-01 오후 4.55.21.png
컨테이너 설정을 완료해주세요. 저는 이 컨테이너를 웹사이트 하나와 연결할 계획이기 때문에 컨테이너 이름을 웹사이트 주소로 설정했습니다. 타겟 플랫폼은 웹을 선택했습니다.
스크린샷 2022-07-01 오후 4.56.19.png
이제 태그 관리자 서비스 이용 약관에 동의하면 계정과 컨테이너 만들기는 끝입니다!
스크린샷 2022-07-01 오후 4.56.38.png
아래와 같은 팝업창이 뜰거예요. 두 코드 블럭을 복사해 메모장에 붙여넣으세요. 웹사이트에 GA4 연결하기 (2) GA 계정 만들기편에서 복사했던 GA의 측정 ID 도 아직 잘 가지고 있지요?
스크린샷 2022-07-01 오후 4.56.53.png
확인을 눌러 팝업창을 닫으면 첫 GTM 계정, 컨테이너 생성이 완료되었습니다! 👏🏻👏🏻👏🏻
스크린샷 2022-07-01 오후 4.57.53.png
웹사이트에 GTM 설치하기
GTM을 설치하기 위해서는 앞에서 복사해놨던 두 블록의 코드를 웹사이트 HTML 코드의 head 영역과 body 영역에 붙여넣기만 하면 됩니다. 코드를 삽입하는 과정은 어렵지 않지만, 웹사이트의 작동 구조를 잘 알아야 코드를 제대로 된 위치에 넣을 수 있습니다. 만약 HTML이 처음이거나, 소스코드를 수정할 수 있는 권한이 없다면 개발자나 담당자에게 협조를 구하는 것이 좋습니다.
복사했던 코드를 잃어버렸어요!
현재 있는 ‘작업 공간' 탭에서 ‘관리자’ 탭으로 이동해서 ‘Google 태그 관리자 설치' 메뉴를 클릭하면 설치 코드를 다시 볼 수 있습니다.
스크린샷 2022-07-01 오후 4.56.53.png
앞 단계에서 복사했던 코드를 웹사이트의 모든 페이지에 붙여 넣으세요. head, body 각각의 영역에서 가능한 한 가장 높은 위치에 코드를 붙여넣는 것이 좋습니다. 브라우저가 코드를 읽기 전에 사용자가 이탈하면 추적이 되지 않는데, 코드가 아래에 있을수록 실행되는데 시간이 걸리기 때문입니다. 놓치지 않고 모든 데이터를 수집하기 위해 GTM 코드는 가능한 한 높은 위치에 넣어주세요.
우피라는 서비스의 경우 웹사이트의 모든 페이지에 적용되는 HTML 코드를 관리할 수 있는 HTML 편집이라는 기능을 제공하고 있습니다. 저는 이 기능을 이용하여 각각 <head>, <body> 에 코드를 삽입했습니다. 비슷하게 HTML 편집 기능을 제공하는 블로그 플랫폼이 많으니 활용해보세요!
스크린샷 2022-07-12 오후 12.09.58.png
자 이제 여러분들은 GTM을 이용해 웹사이트에 여러 태그들을 추가하고 삭제하는 등 태그 관리를 할 수 있게 되었습니다. 다음 글에서는 GTM을 이용해, 웹사이트에 GA4 이벤트를 수집하는 태그를 만들어보겠습니다.


conversion_type

시리즈 내 순서

conversion_text

멤버 전용

대표 이미지

공개 가능

작성일

예상 읽기 시간

전환 텍스트

글쓴이

시리즈

상단 노출

전환 유형

요약

제목

GTM을 포함한 GA를 연결하는 다양한 방법들에 대해서 가볍게 소개해보겠습니다.

웹사이트에 GA4 연결하기 (1) GA4를 웹사이트와 연결하는 세 가지 방법

웹사이트에 GA4 연결하기 (2) GA 계정 만들기

GTM(Google Tag Manager) 계정을 만들어봅시다.

웹사이트에 GA4 연결하기 (3) GTM 계정 만들고 웹사이트에 설치하기

이 글은 GA4 구성 태그가 Google 태그로 개정된 이후 내용을 담고 있습니다.

웹사이트에 GA4 연결하기 (4) GTM에 첫 GA4 태그 만들기 - Google 태그

웹사이트에 GA4 연결하기 (3) GTM 계정 만들고 웹사이트에 설치하기

Contents

데이터 분석 소식을
매월 받아보세요

웹사이트에 GA4 연결하기

함께 읽어보면 좋은 글

GA4 스크롤 이벤트 커스텀하기

무한도전 밈 여기서 찾으세요, ‘그밈’이 사용성 250% 개선한 방법

기여 분석 (1) 마케팅 채널의 성과 판단하기

데이터 분석 소식을
매월 받아보세요데이터 분석 소식을 받아보세요

웹사이트에 GA4 연결하기 (3) GTM 계정 만들고 웹사이트에 설치하기

Contents

데이터 분석 소식을 매월 받아보세요

웹사이트에 GA4 연결하기

함께 읽어보면 좋은 글

GA4 스크롤 이벤트 커스텀하기

무한도전 밈 여기서 찾으세요, ‘그밈’이 사용성 250% 개선한 방법

기여 분석 (1) 마케팅 채널의 성과 판단하기

데이터 분석 소식을 매월 받아보세요데이터 분석 소식을 받아보세요

데이터 분석 소식을
매월 받아보세요

데이터 분석 소식을
매월 받아보세요데이터 분석 소식을 받아보세요