지난 포스팅은 GA4 기본 설치 과정에 대해서 이야기 해 보았다. 물론 기본 보고서만 볼 생각이라면 지난번 포스팅에 있는 방식으로만 설치해도 무관하다. 하지만 좀 더 다양한 분석 태그를 넣거나 뺄 생각이라면 꼭 GTM을 이용해서 설치하길 바란다.
본 포스팅은 GA4로 기본 속성을 만들었다는 가정하에 쓰는 포스팅으로, GA4 속성을 아직 만들지 않았다면 아래 링크로 들어가 기본 속성부터 만들기 바란다.
Link : 구글 애널리틱스4 (GA4)의 개념과 기본 설치
1. GTM 설치하기
1.1.GTM 계정(account) 만들기
우선 태그매니저(https://tagmanager.google.com)에 접속하자. 구글 아이디가 로그인 되어있다면 아래와 같이 나오는데, 만약 처음 이라면 사각박스 아무데나 클릭하면 되고, 나중에 계정을 추가한다면 우측 상단에 계정 만들기를 클릭해서 추가 하면 된다.
 |
| 계정 만들기 메뉴 |
계정 만들기를 클릭하면 아래와 같은 화면이 나오는데 애널리틱스 계정 만들기와 유사한 모습이다. 애널리틱스와 마찬가지로 계정 이름은 구분하기 쉬운 이름을 넣어주자.
국가는 당연히 대한민국을 선택한다.
 |
| 계정 및 컨테이너 만들기 화면 |
계정에는 반드시 하나 이상의 컨테이너를 만들게 되기 때문에 계정 만들기 아래에 컨테이너까지 만들 수 있게 되어있다. 컨테이너 이름도 구분하기 쉽게 넣으면 되는데 보통 블로그 혹은 사이트 이름을 넣는다.
그리고 우리는 블로그를 관리할 것이기 때문에 웹을 선택해 준다.
입력이 다 끝나고 만들기를 누르면 약관 동의 화면이 나오는데 동의 하고 넘어가자
2. 태그 관리자 블로그에 설치하기
약관까지 동의 하면 팝업이 하나 뜨는데 블로그 테마에 삽입할 코드를 보여준다.
 |
| 태그 관리자 코드 |
코드는 두 가지를 제공하는데 위에 있는 코드는 <head> 태그 바로 아래 넣어주고, 아래에 있는 코드는 <body> 태그 바로 아래 넣어주면 된다.
추가로 설명을 하면, 두 종류의 코드에서 위에 있는 코드는 script로 작성 되어있고, 아래에 있는 코드는 noscript로 되어있다. 사실 아래에 있는 noscript는 일종의 예비 코드로 간혹 스크립트를 막아 놓은 환경에서 접속 했을 때에도 정보를 수집할 수 있도록 하는 역할을 한다.
때문에 원칙적으로는 위에 있는 코드만 넣어도 스크립트를 막아 놓은 환경이 아니면 정보를 수집할 수 있다.
각각의 2종의 코드는 빨간 동그라미 안에 있는 복사 아이콘을 누르면 복사가 되고 그대로 블로그 테마에 붙여넣기를 하면 된다.
주의
구글 블로그(blogspot)의 경우에 코드를 제대로 복사/붙여넣기를 하고 저장을 하면 아래와 같은 에러가 뜬다.
org.xml.sax.SAXParseException; lineNumber: 8; columnNumber: 43;
The reference to entity "l" must end with the ';' delimiter.
내용을 보면 해당 줄(lineNumber)에 문제가 있다는 말인데 삽입한 코드에 보면 빨간색으로 친절하게 문제가 생긴 곳을 지적해 준다. 해결 방법은
&l 이라고 되어있는 표시된 부분을 &와 l 사이에 amp;를 추가하면 되는데 &l 을 &l 로 변경해 주면 해결이 된다.
2. GA4 설정하기
2.1. 태그 만들기
태그 관리자 코드 확인 창을 닫으면 만들어 놓은 컨테이너 관리 메뉴가 나타나는데 여기서 태그를 선택한다.
 |
| 컨테이너 관리화면 (태그를 클릭한다) |
아직 만들어 놓은 태그가 없기 때문에 새로 만들기를 클릭한다.
 |
| 태그 메뉴 (새로 만들기를 클릭한다.) |
새로 만들기를 선택하면 창이 하나 나오는데 태그와 트리거를 묶어서 설정할 수 있게 구성되어 있다. 우선 좌측 상단에 이름 없는 태그라고 써있는 곳을 클릭하고 원하는 이름을 지정해 준다.
필자는 GA4-config 라고 지었지만 GA4 구성, GA4-pageview 등 본인이 알아보기 쉬운 이름을 적어준다.
 |
| 태그 및 트리거 설정 화면 |
태그 이름을 지정하고 태그 구성을 누르면 태그 유형을 물어보는데 올해 초와는 메뉴 구성이 조금 바뀌었다. 추천 태그와 맞춤설정 으로 그룹을 나누었는데, 그 중 애널리틱스 메뉴를 누르면 애널리틱스 관련 태그 목록이 나온다.
기존에는 "google 애널리틱스 : GA4 구성" 이라는 유형이 있었는데, 지금은 바뀌어서 Google 애널리틱스 메뉴 안에 있는 "Google 태그"를 선택해 주어야 한다.
(23/09/09 추가) "Google 태그"는 태그 유형 선택 첫 화면에도 나오는데 첫 화면에 나오는 "google 태그"와 "Google 애널리틱스 > Google 태그" 아무거나 선택해도 결과는 같았다. 때문에 굳이 Google 애널리틱스 메뉴에 들어가지 않고 처음 나오는 "Google 태그"를 선택해도 된다.
 |
| 태그 유형 선택화면 |
Google 태그를 선택해 주면 태그 ID를 입력해야 하는데 여기서 GA4 추적코드를 넣는다.
 |
| GA4 추적코드 입력 |
만약 애널리틱스의 추적코드를 모른다면
애널리틱스에 접속해서 좌측 하단에 있는 관리 > 속성 > 데이터 스트림 > 해당 블로그를 클릭하면 G로 시작하는 코드가 보인다.
 |
| 애널리틱스의 추적코드 |
2.2. 트리거 만들기
트리거는 태그가 동작하는 발동 조건을 지정하는 것이라고 앞선 포스팅에 언급한 바 있다. 태그를 만들고 발동 조건이 없다면 태그가 동작을 하지 않을 것이다.
태그 구성 밑에 트리거 메뉴를 클릭하면 세 가지의 트리거가 나오는데 우리는 블로그의 어떤 페이지에 들어가도 추적을 해야 하기 때문에 발동 조건을 All Pages 를 선택해야 한다.
 |
| 트리거 선택 (all pages) |
트리거 까지 선택 했으면 저장을 누르자.
3. 미리보기 및 제출
일단 태그 매니저로 설정은 다 끝났다 그러나 아직 애널리틱스에 연결이 된것이 아니다. 준비까지 끝낸 것이다.
3.1. 미리보기
태그매니저는 태그를 만들면 제대로 동작을 하는지 실제로 사이트에 적용하기 전에 테스트 할 수 있는 환경을 제공한다. 태그가 정상적으로 저장이 되면 태그에 새로 만든 태그가 목록에 뜨는데 그 위에 우측 상단을 보면 미리보기와 제출 아이콘이 보인다.
여기서 미리보기로 만들어진 태그가 정상 동작을 하는지 테스트 할 수 있다.
 |
| 미리보기와 제출 아이콘 |
미리보기 아이콘을 클릭해보면 새 창이 하나 열리는데, 여기서 컨테이너에 연결된 블로그의 주소를 입력한다.
주소를 입력하면 연결된 블로그가 새 창으로 뜨는데 정상적으로 연결이 되면 connected! 라는 메세지가 뜨는데 continue 버튼으로 창을 닫자.
 |
| 미리보기 연결화면 |
이제 새 창으로 뜬 블로그 화면을 여기저기 클릭 해보면 블로그에서 한 일들이 화면에 보여진다. 테스트 화면 상단을 보면 GTM 코드 탭과 G 코드 탭이 있는데 각각 태그매니저 에서의 동작 애널리틱스에서의 동작을 보여준다.
만약 동작하는 이벤트들이 안보이면 뭔가 문제가 생긴 것이다.
3.2. 제출
정상동작이 되는것으 확인했으면 테스트 화면을 닫고 미리보기 아이콘 옆에 있는 제출을 클릭하자.
제출을 클릭하면 변경 사항을 넣으라고 하는데 꼭 넣을 필요는 없고 다음을 계속 눌러주면 된다. 미리보기로는 바로 반응이 오는데 실제 태그를 제출하면 애널리틱스에 적용되는건 다소 시간이 걸릴 수 있다.
정상적으로 설치가 완료되면 내 블로그를 방문했을때 애널리틱스에서 실시간 메뉴로 확인이 가능하다.
4. 마치며
좀 복잡해 보이지만 실질적으로는 몇 분 안걸리는 간단한 작업이다. 한번 설치해 놓으면 손댈일이 많지 않기 때문에, 알아두면 좋다. 특히 추가로 몇 개의 태그를 더 설치할 예정인데 태그를 여러개 설치해 보면 왜 태그매니저를 써야하는지 느껴질꺼라 생각이 된다.