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

Note: 이 글은 GA, GTM이 모두 처음이신 분들은 위한 튜토리얼입니다. 기존에 UA(Universal Analytics)를 사용하고 계시던 분이 GA4를 추가 연결하는 방법을 찾고 계신다면 UA(Universial Analytics)에서 GA4(Google Analytics 4)로 전환하기 글을 참고해주세요.

자! 이제 거의 다왔습니다. GTM(Google Tag Manager) 계정을 만들어봅시다.

GA에서 모든 계정 > portfolio 버튼을 클릭하면 나왔던 팝업 창을 기억하시나요? 여기부터 시작해볼게요.

*모든 계정 > portfolio 버튼 버튼을 클릭하면 아래와 같은 팝업창이 열립니다.*

이 팝업창에서 다른 계정, 속성으로 이동할 수 있을 뿐만 아니라 ‘태그 관리자’, ‘데이터 스튜디오’ 등 GA와 연결하여 사용할 수 있는 구글의 다양한 데이터 솔루션들에 접근할 수 있습니다

GTM 계정 만들기

팝업창에서 두 번째 아이콘을 클릭해주세요. GTM 계정이 없다면 아래와 같이 시작하기 버튼이 보일거예요. 시작하기 버튼을 눌러주세요.

계정 만들기를 클릭해주세요.

계정 이름을 설정해주세요. GA에서는 계정 아래에 여러개의 속성을 설정했었죠. GTM 역시 GA와 비슷하게 계정 아래에 여러개의 컨테이너를 설정할 수 있습니다. 그리고 각 컨테이너는 태그를 관리하는 단위로 보통은 하나의 웹사이트에 하나의 컨테이너를 붙여 관리합니다. 저는 포트폴리오 용도로 사용할 웹사이트 이외에는 다른 웹사이트를 운영할 계획이 없다고 가정하고, 계정명을 portfolio 라고 설정해주었습니다. 만약 법인이고, 하나의 계정에서 여러 컨테이너를 관리할 계획이라면 법인 명을 계정 명으로 설정하기도 합니다.

💡

여러개의 웹사이트를 하나의 컨테이너로 관리하는 것도 가능한가요?

가능합니다. 여러 웹사이트들의 HTML 구조가 비슷하고, 일관적으로 태그를 관리하고 싶다면 하나의 컨테이너로 여러 웹사이트들에 같은 태그가 적용되도록 설정할 수 있습니다.

하지만 장점이 있다면 단점도 있겠지요. 컨테이너를 수정하면 동시에 여러 웹사이트들에 수정 사항이 반영되기 때문에 어느 웹사이트에서는 예상하지 못한 동작을 할 수도 있습니다. 또한 권한 관리가 어려워집니다. 그래서 보통은 하나의 웹사이트에 하나의 GTM 컨테이너를 설치해 사용합니다. 설치 방법은 뒤에서 안내하겠습니다.

컨테이너 설정을 완료해주세요. 저는 이 컨테이너를 웹사이트 하나와 연결할 계획이기 때문에 컨테이너 이름을 웹사이트 주소로 설정했습니다. 타겟 플랫폼은 웹을 선택했습니다.

이제 태그 관리자 서비스 이용 약관에 동의하면 계정과 컨테이너 만들기는 끝입니다!

아래와 같은 팝업창이 뜰거예요. 두 코드 블럭을 복사해 메모장에 붙여넣으세요. 웹사이트에 GA4 연결하기 (2) GA 계정 만들기편에서 복사했던 GA의 측정 ID 도 아직 잘 가지고 있지요?

확인을 눌러 팝업창을 닫으면 첫 GTM 계정, 컨테이너 생성이 완료되었습니다! 👏🏻👏🏻👏🏻

웹사이트에 GTM 설치하기

GTM을 설치하기 위해서는 앞에서 복사해놨던 두 블록의 코드를 웹사이트 HTML 코드의 head 영역과 body 영역에 붙여넣기만 하면 됩니다. 코드를 삽입하는 과정은 어렵지 않지만, 웹사이트의 작동 구조를 잘 알아야 코드를 제대로 된 위치에 넣을 수 있습니다. 만약 HTML이 처음이거나, 소스코드를 수정할 수 있는 권한이 없다면 개발자나 담당자에게 협조를 구하는 것이 좋습니다.

💡

복사했던 코드를 잃어버렸어요! 현재 있는 ‘작업 공간' 탭에서 ‘관리자’ 탭으로 이동해서 ‘Google 태그 관리자 설치' 메뉴를 클릭하면 설치 코드를 다시 볼 수 있습니다.

앞 단계에서 복사했던 코드를 웹사이트의 모든 페이지에 붙여 넣으세요. head, body 각각의 영역에서 가능한 한 가장 높은 위치에 코드를 붙여넣는 것이 좋습니다. 브라우저가 코드를 읽기 전에 사용자가 이탈하면 추적이 되지 않는데, 코드가 아래에 있을수록 실행되는데 시간이 걸리기 때문입니다. 놓치지 않고 모든 데이터를 수집하기 위해 GTM 코드는 가능한 한 높은 위치에 넣어주세요.

우피라는 서비스의 경우 웹사이트의 모든 페이지에 적용되는 HTML 코드를 관리할 수 있는 HTML 편집이라는 기능을 제공하고 있습니다. 저는 이 기능을 이용하여 각각 <head>, <body> 에 코드를 삽입했습니다. 비슷하게 HTML 편집 기능을 제공하는 블로그 플랫폼이 많으니 활용해보세요!