오늘은 구글 태그매니저를 설치한 후 구글 애널리틱스(GA4)와 연동하여 내 웹사이트에 있는 정보를 태그매니저가 수집하여 애널리틱스로 전송하는 방법에 대해서 알아보려고 합니다.
자동목차
구글 태그매니저란 무엇인가?
태그는 데이터(웹분석, 광고성과 등)를 수집해서 전달하는 자바스크립트로 만든 추적 코드를 말합니다. 구글뿐만 아니라 네이버, 다음 등도 광고 성과 추적 등을 위해 태그를 사용합니다. 구글 태그 매너저는 한 번만 웹사이트에 심어 놓으면 페이스북, 네이버 등 다양한 곳에 데이터를 전달할 수 있습니다. 필요에 따라, 복잡한 코딩이나 웹사이트 스크립트 변경 없이 관련 작업을 처리할 수 있다는 것이 가장 큰 장점입니다. 또한 태그매니저는 애널리틱스만 갖고는 설정하고 수집하기 힘든 데이터들을 쉽게 가능하도록 해줍니다. 사이트 내에서 일어나는 다양한 활동에 대한 설정을 미리 해놓으면 필요한 것을 언제든지 갖다 쓸 수 있습니다.
결국, 태그란 특정 조건이 만족되었을 때(예를 들면 '버튼이 클릭되었을 때"), 그에 해당하는 데이터를 수집해서(예를들면 '어떤 버튼을 언제, 누가') 태그 업체(구글, 페이스북, 네이버 등)에 전달을 수행하는 코드이고 구글태그매니저는 이런 태그들을 관리하는 도구입니다.
태그매니저는 설정을 위한 툴이지 데이터 분석을 위한 툴이 아닙니다. 태그 매니저를 통해 수집한 데이터는 구글 애널리틱스에서 확인해야 합니다. 그래서 이 포스팅에는 2개를 연동하는 방법에 대해서도 같이 다룰 예정입니다.
구글 태그매니저 설치하기
GTM-xxxxx 키를 가진 구글 태그매니저 스크립트를 내 웹사이트에 설치부터 해야합니다.
1. 태그매니저 로그인하기
본인의 구글계정으로 로그인하면 됩니다.
계정을 새로 만들기 위해 계정 만들기를 클릭합니다.
2. 계정과 컨테이너 만들기
"계정이름"을 입력하고 국가를 "대한민국"으로 선택합니다. "컨테이너 이름"을 입력한 후 "웹"을 선택합니다.
(계정은 회사, 컨테이너는 웹사이트라고 생각하시면 됩니다. 개인이므로 계정이름은 대충 넣습니다)
"만들기"를 클릭합니다. 약관페이지가 뜨면 동의함에 표시한 후 "예"를 클릭합니다.
3. 구글 태그 매니저 코드 복사
이제 위의 코드를 복사해서 각각 <head> 와 <body> 바로 밑에 붙여 넣기 합니다.
여기서 주의할 점은 기존에 추가했던 애널리틱스 코드는 삭제해야 합니다.
기존에 플러그인으로 애널리틱스를 추가했다면 그것도 역시 해제해야 됩니다.
4. 기존 애널리틱스 코드 삭제 및 플러그인 해제
웹사이트 > 구글태그매니저 > 구글애널리틱스 형태로 정보를 제공하는데 기존 것이 그대로 남아 있으면
웹사이트 > 구글애널리틱스 도 정보를 넘어주기 때문에 이중으로 집계되는 현상이 발생하게 됩니다.
기존에 추가했던 위의 코드를 삭제합니다. 추가하지 않은 경우에는 스킵합니다.
사용 중인 구글서치콘솔 플러그인도 선택해서 해제합니다.
여기까지 하면 일단 태그매니저는 설치되었습니다.
구글태그매니저에서 GA4 연동하기
이제 구글태그매니저에서 수집한 정보를 애널리틱스(GA4)로 전송하기 위해 연동하는 작업을 해야 합니다.
GA4로 연동하기 위해서 태그와 트리거를 만들어야 합니다.
태그와 트리거에 대해서 간략하게 설명하면 트리거가 발생하면 태그가 실행된다고 이해하시면 됩니다.
즉, 아래의 작업은 모든 페이지의 페이지뷰가 발생하면(트리거) GA4구성을 실행(태그)시키라는 내용입니다.
1. 태그 만들기
태그매니저 작업공간에서 "태그"를 선택한 후 "새로 만들기"를 클릭합니다.
1-1. 태그 유형 선택
태그 구성을 클릭하여 태그 유형을 선택합니다.
태그 유형 중에 Google 애널리틱스:GA4 구성을 선택합니다.
1-2. 측정 ID 입력
본인의 측정 ID를 입력하고 설정할 필드에서 행추가를 클릭한 후 debug_mode와 true를 입력합니다.
그리고 밑에 있는 트리거를 클릭합니다.
debug_mode를 설정한 이유는 GA4로 정상적으로 이벤트가 전달되는지 테스트를 해보기 위함입니다. 필요 없으면 안 하셔도 됩니다. 디버깅하는 방법은 아래에서 설명합니다.
2. 트리거 만들기
트리거에서 "All Pages"를 선택합니다.
"저장"버튼을 클릭합니다.
정상적으로 애널리틱스에 전달되는지는 디버깅으로 확인 가능합니다.
GA4 실시간 디버깅하기
GA4 실시간 디버깅하기 위해서는 구글애널리틱스 디버거를 설치해야 합니다.
설치를 완료하고 크롬 브라우저의 주소표시줄 옆에 아이콘을 클릭해서 "googel anlytics Debugger"를 선택하면 활성화됩니다. 다시 한번 클릭하면 해제됩니다.
애널리틱스 홈페이지 관리화면으로 들어갑니다.
DebugView를 선택합니다. 아래와 같이 실시간 디버깅화면이 출력됩니다.
내 웹사이트에 있는 모든 페이지가 열릴 때마다 해당 정보를 태그매니저가 GA4로 전송되는 것을 확인이 가능합니다.
여기까지만 구성하게 되면 태그매니저를 사용할 필요 없이 구글 애널리틱스만 설치해도 동일합니다.
구글 태그매니저의 구성 요소를 활용하면 더 중요한 정보를 획득할 수 있습니다.
구글 태그매니저 구성 요소
구글 태그매니저는 4가지의 요소로 구성되어 있습니다.
- 컨테이너 : 태그를 담아두는 그릇. 웹사이트 개수만큼 필요합니다. 웹사이트가 하나밖에 없으면 컨테이너도 한 개
- 태그 : 수집하고자 하는 데이터의 이름표. '페이지방문', '구매버튼', '파일다운로드' 등
- 트리거 : 태그가 작동하기 위한 조건. '구매버튼'이라는 태그는 클릭했을 때 작동할 경우 '버튼클릭'하는 행위가 트리거
- 변수 : 행위에 대한 값. '클릭'이라는 변수가 구글매니저에 등록되어 있어야 함.
즉, 컨테이너는 여러 가지 태그를 담아두도 있고, 태그는 수집될 데이터 형식을, 트리거는 태그가 동작될 조건을, 변수는 어떤 행위에 대한 값을 가지고 있습니다.
위에서도 설명했듯이 컨테이너는 웹사이트이므로 변경해야 할 부분은 없습니다. 우리가 구성하고 추가해야 할 것은 태그, 트리거, 변수입니다. 이 부분은 무효트래픽 검출을 위한 IP수집 관련 포스팅을 할 예정인데 그때 자세히 설명드리겠습니다.
(IP수집이 기존 UA로만 가능하고 GA4로는 아직 확인이 안 되고 있습니다. 제가 못 찾았을 수도.. UA로 하는 부분은 바로 포스팅이 가능한데 어차피 곧 없어질 것이라 시간이 걸리더라도 GA4로 포스팅하는 것이 나을 것 같습니다)
'재테크' 카테고리의 다른 글
| 청년도약계좌 7월 은행별 금리, 이의신청 (0) | 2023.07.03 |
|---|---|
| 티스토리 하위블로그 도메인 연결 - 가비아 (8) | 2023.07.02 |
| 아로스 올인원강의 솔직후기, 단점(아백 월 100만원 달성) (6) | 2023.06.29 |
| 구글 애널리틱스(GA4)는 무엇인가? 설치방법 (0) | 2023.06.28 |
| 페이지 문제점 검사 - Bing을 이용한 URL 검사 (0) | 2023.06.27 |
