들어가며
티스토리 블로그에 GA4와 GTM을 연결하기 위해선 티스토리 블로그 HTML 편집에 대해 알아야 합니다!
이전 글에 간단하게 설명한 글이 있으니 필요하신 분은 읽어주시기 바랍니다.
티스토리 HTML 수정으로 내 블로그 꾸미기
계속되는 취업 실패로 인해 자존감이 바닥으로 떨어졌습니다...그래도 포기하지 않고 꼭 데이터 분석가가 되고자 하는 바람으로 객관적으로 나를 파악해 보고자 생각하였습니다. '나'라는 사람
re-hwii.tistory.com
티스토리 블로그에 *GA4와 GTM을 연결하는 방법에 대해 알아보고자 합니다.
GA4, GTM이란?
GA4와 GTM은 구글에서 제공하는 마케팅 도구로 웹사이트 방문자 데이터를 수집하여 분석할 때 유용하게 사용하는 도구입니다. 티스토리에서 간략하게 방문자 수와 유입경로를 간략하게 보여주기도 하지만 제한적인 데이터만 보여주기에 GA4와 GTM을 통해 더욱 상세한 데이터를 수집할 수 있습니다.
티스토리에 GA4 설치하기
일단 '구글 애널리틱스'에 들어가 계정을 생성해야 합니다.
따로 주의해서 선택할 사항은 없으니 일단 가입해 주세요! 나중에 설정에서 변경 가능합니다.
가입을 완료했다면 데이터 스트림을 만들 수 있습니다.
데이터를 수집하고자 하는 티스토리 블로그 URL을 입력해 주어야 애널리틱스에서 추적이 가능합니다!
스트림을 만들었으니, 이제 GA4 코드를 블로그에 심어주어야 합니다.
상단에 '태그 안내 보기' 버튼을 클릭하면 플랫폼을 통해 설치가 가능하지만 저는 직접 설치하였습니다.
'직접 설치' 탭으로 들어가면 GA4 코드가 있습니다.
이걸 복사하여 티스토리 HTML <head> 태그 가장 위에 설치해 주어야 합니다.
meta 데이터 밑에 설치해도 인식은 되긴 하지만, 웬만하면 혹시 모를 오류를 방지하기 위해 <head> 가장 위에 설치해 주는 게 좋습니다.
설치에 문제가 없었다면 하루에서 이틀정도 지나면 대시보드가 활성화됩니다.
티스토리에 GTM 설치하기
GA4로도 충분히 많은 데이터를 얻을 수 있지만, 방문자들이 제 블로그에 들어와 어떤 활동을 하는지 자세히 알아보고 싶었습니다. 특히 블로그의 글들이 제 작업물에 관심을 갖게 하였는지 알아보는 것이 핵심 지표라고 생각합니다.
페이지뷰, 세션, 전환 이벤트 같은 웹/앱 활동 데이터를 수집하는 데 집중되어있는 GA4로는 원하는 데이터를 얻을 수 없다고 판단했기에 Google Tag Manager를 설치하기로 결정하였습니다.
계정 만들기 버튼을 눌러주어 계정을 만들어 줍니다.
국가는 해당 국가를 선택하고, 컨테이너 이름은 블로그 주소를 입력해주었습니다.
이용약관 동의해주시면 Google 태그 관리자 설치 화면이 나오며 GA4 코드를 티스토리 HTML에 심었던 것과 비슷한 코드가 나타납니다.
GA4와 다른 것이 있다면, GTM은 <head>, <body>에 코드를 넣어주어야 합니다.
주의!!!
위치는 GA4 코드를 설치했던 것과 동일하게 가장 위에 설치하면 됩니다.
그러면 GA4 코드와 GTM 코드 두개 다 설치되어 있어야 하는가?라는 의문이 생겼습니다.
이를 해결하기 위해, 며칠동안 두 태그를 모두 심거나 하나의 태그만 심어보며 GA4에서 작동이 잘 되는지 체크 해보았습니다.
GA4와 GTM 연결만 잘 해준다면 GTM 태그만 있어도 정상적으로 작동하는 것을 확인할 수 있었습니다.
두 태그를 함께 사용해도 작동에는 문제가 없지만, 동일한 데이터가 GA4와 GTM 양쪽에서 동시에 수집되어 중복 집계될 위험이 있습니다. 따라서 GA4 코드와 함께 설치하는 것 대신 GTM 태그만 설치하는 것이 권장됩니다.
그래서 이미지에서 볼 수 있듯이 기존의 GA4 코드를 삭제하고 GTM 코드만 설치해주었습니다.
태그 관리자가 생겼습니다. 이제 새 태그를 만들어 줍니다.
태그 구성을 클릭하여 태그 유형 선택에서 Google 애널리틱스를 선택하여 Google 태그로 들어갑니다.
처음엔 웹 안에 Google 태그가 있어야하기에 Google 애널리틱스 : GA4 이벤트가 아닌 Google 태그를 우선 만들어줍니다.
태그 ID는 Google 애널리틱스 웹 스트림 세부 정보의 측정 ID입니다.
트리거는 All Pages를 선택하여 저장을 하면 GTM 설치까지는 끝!
GTM 코드와 태그가 잘 만들어졌다면, 미리보기 버튼을 클릭하여 잘 작동하는지 확인할 수 있습니다.
Google Tag Assistant라는 확장 프로그램을 통해 티스토리 블로그 내에 코드가 잘 설치되어있는지 확인도 가능하고, 티스토리 블로그 내에서 방문자의 행동 데이터가 저장이 되고 있는지 확인이 가능합니다!
이제 GTM을 통해 얻고싶은 데이터를 기호에 맞게 태그를 만들어 GA4로 데이터가 잘 읽히는지 확인했을 때 문제없다면 미리보기 옆에 '제출' 버튼을 클릭하여 태그 변경사항에 대한 내용을 저장해주면 됩니다.
GA4 코드만 사용할 때는 대시보드가 정상적으로 작동하지만, GTM을 설치한 직후에는 실시간 데이터가 며칠간 보이지 않는 오류가 있습니다. 보통 약 48시간 정도 지나면 정상 작동하니, Google Tag Assistant로 코드 설치 여부만 확인되면 걱정하지 않으셔도 됩니다.
쓰다보니 글이 너무 길어졌는데요... 다 읽어주셨다면 정말 감사합니다.
'STUDY' 카테고리의 다른 글
| <SQL> IN vs EXISTS - [Programmers] 특정 기간동안 대여 가능한 자동차들의 대여비용 구하기 (0) | 2025.10.09 |
|---|---|
| <SQL> MAX 함수 이해하기 - [Programmers] 자동차 대여 기록에서 대여중 / 대여 가능 여부 구분하기 (0) | 2025.10.08 |
| 티스토리 글 검색 포털에 노출시키기 (0) | 2025.09.25 |
| <Tableau> 커스텀 도형 사용하기 (0) | 2025.09.24 |
| 티스토리 HTML 수정으로 내 블로그 꾸미기 (0) | 2025.09.10 |