04. 구글 태그 매니저로 GA(Universal Analytics & GA4) 구축하기

 

(해당 글은 GA 공부 후 복습용으로 작성하는 글입니다. 정확하지 않은 정보가 포함되어 있을 수 있습니다.)

 

 

지난 시간 동안 구글 태그 매니저(Google Tag Manager, 이하 GTM), 구글 애널리틱스(Universal Analytics & GA4, 이하 GA) 그리고 구글 옵티마이즈(Google Optimize) 계정들을 생성해보았는데요. 오늘은 GTM으로 GA와 GA4를 구축해보려고 합니다. 

 

01번 글에서 GTM 스크립트를 심고, 02번 글에서 GA 추적 코드를 심었던 것을 기억하시나요? GA의 추적 코드와 GTM의 스크립트를 동시에 HTML에 삽입한 것인데요. 이 자체로는 문제가 없지만 추후 코드를 바꾸게 되는 경우 직접 수정을 해야 할 수도 있고, 데이터가 중복으로 들어갈 문제가 생길 수 있어 GTM으로 통합해주는 것이 적절하다고 합니다. 따라서 오늘은 GTM으로 GA와 GA4를 구축하는 방법에 대해서 알아보도록 하겠습니다! (GA 추적 코드와 동시에 사용하면 안되는지에 대해서 찾다가 데이터 중복이 발생할 수 있다고 하여 바로 기존 홈페이지에 있던 GA 추적 코드를 삭제해주었습니다. 아래 캡쳐 이미지를 보시면 GTM 스크립트는 그대로 남아있다는 걸 확인할 수 있습니다.)

 

1. 기존에 삽입해 두었던 GA 추적 코드를 삭제해보도록 하겠습니다.

티스토리 > 관리자 > 스킨 편집 > html 편집으로 들어갑니다.

 

2. GA의 추적 코드(범용 사이트 태그(gtag.js))를 지워주도록 합시다.

Universal Anlytics > 관리(톱니 바퀴 그림) > 추적 정보 > 추적 코드에서 해당 코드가 맞는지 다시 한번 확인하고 삭제해주었습니다. 그 뒤 GTM으로 GA를 연결해주려고 하는데요. 01번 글에서 확인할 수 있겠지만, GTM의 태그, 트리거, 변수에 대해서 잠시 설명해드리자면, "특정 버튼을 클릭한 사람"의 데이터를 추적하고자 할 때 특정 버튼을 변수, 클릭한 액션을 트리거 그리고 그 액션이 발생했을 때 GA로 데이터를 보내는 것을 태그라고 간단하게 설명해드렸는데요. GA 추적 코드를 심으면 바로 GA로 데이터가 날아오지만 클릭 등의 액션 이벤트가 발생했을 때 데이터를 보내라 등의 명령은 직접 코드를 수정해줘야 합니다. 그런 번거로움을 줄이기 위해 GTM에서 GA를 구축해볼까요?

 

 

2.  구글 태그 매니저로 들어가서 GA를 먼저 구축해보도록 하겠습니다. (tagmanager.google.com/)

GA를 구축하려는 GTM 계정을 선택해주세요.

 

3. 변수 클릭 > 새 변수 생성(New) 을 눌러주세요.

4. 레고 블록이 그려진 박스를 클릭해주시면 다양한 선택창이 뜨는데요.

5. 이 중 Google 애널리틱스 설정을 클릭해주세요.

6. 변수의 이름은 universal analytics로 설정했습니다.

GA4는 이후에 구축해볼 것이므로 일단은 universal analytics만 구축해보도록 하겠습니다. 여기서 필요한 정보는 추적 ID인데요. 저번 글에서도 알 수 있듯이 추적 ID는 GA 좌측 상단에서 간단하게 확인해볼 수 있습니다. 복사 붙여 넣기를 하려는 분들은 유니버설 애널리틱스 계정 > 관리(톱니바퀴 모양) > 추적정보 > 추적 코드에서 해당 추적코드를 확인할 수 있어 이 경로를 통해 복사 붙여넣기 하시길 바랍니다.

7. 추적 ID를 기입한 뒤 저장 버튼(Save)을 눌러주세요.

8. 그 후 GTM 작업공간에서 universal analytics 변수가 만들어진 것을 확인할 수 있는데요. 

변수만 있으면 데이터가 GA로 넘어가지 않기 때문에 GA와 연결시켜주는 태그에 변수를 넣어주도록 합시다. 새 태그를 클릭해주세요.

 

 

9. 태그 > 태그 유형 선택 > 유니버설 애널리틱스 클릭

다양한 구글 마케팅 플랫폼의 서비스를 연결할 수 있습니다.

 

 

10. 추적 유형은 일단 페이지뷰를 선택하고, 설정 변수는 7번에서 만들어둔 변수를 선택합니다.

11. 트리거는 페이지뷰 추적 유형에 해당하는 All pages를 선택해줍니다.

 

 

GA의 GTM 구축은 이렇게 끝났습니다! 이제 GA4를 GTM에 구축해줄 차례입니다. 위의 과정과 똑같이 해보겠습니다. 새 태그를 클릭해주세요.

 

 

12. 태그의 이름을 지정한 뒤 태그 유형을 선택해보겠습니다.

 

13. 태그 유형은 GA4로 선택하고.

 

14. GA4로 들어가 측정 ID를 복사해옵니다.

측정 ID는 관리(톱니 바퀴) > 데이터 스트림 > 계정 선택 후 확인할 수 있습니다.

GA4의 경우 페이지뷰 외에도 아래 사항들을 자동으로 측정하기 때문에 추적 유형을 선택하지 않아도 됩니다. (그래서 추적 ID가 아닌 측정 ID인 것입니다!)

 

15. 트리거 유형으로 All pages를 선택해주세요.

 

이제 유니버설 GA와 GA4의 GTM 구축을 위한 기초 작업이 완료되었는데요. 해당 태그들을 미리보기 옆 게시를 눌러주셔야 추적이 시작됩니다!

 

16. 게시(Submit) 버튼을 눌러주세요!

 

 

한 번 잘 작동되는지 GA와 GA4를 기준으로 확인해볼까요? 티스토리 블로그로 돌아가 접속해보겠습니다. 이후 GA로 들어가 실시간 보고서를 확인해보는데요. GA도 실시간 보고서에서 활성 사용자 1, GA4도 실시간 사용자 1인 것을 보아 제대로 작동되는 것 같습니다.

 

이렇게 GA와 GA4 구축을 완료했습니다. 과정이 복잡하고 어려워 보이더라도 차근차근하면 몇 분 안 걸려서 끝나는 작업입니다. 그만큼 쉽게 구축할 수 있는데요. 처음 접하시는 분들은 헷갈릴 수 있어 직접 GA와 GTM을 다뤄보시면서 익히시길 바랍니다. GA를 100% 활용할 수 있는 그날까지 같이 노력하겠습니다!

 

그럼 이만!!