티스토리 뷰
🔥 학습목표
① 구글 태그매니저, 구글 애널리틱스 설치
② 트리거, 태그 연결 이해하기
잠깐 쓸데없는 한 줄 적자면,
쇼핑몰 운영도 해봤고 엑셀도 어느 정도 쓸 줄 알게 됐는데
구글 애널리틱스 써본 적 없다고 서류 광탈 당하는 게 개빡쳐서
이렇게 방치된 티스토리 블로그에 직접 구글 애널리틱스와 구글 태그 매니저를 설치해 보려고 한다.
학습에 사용한 강의
🔗 https://youtu.be/a52ICwANdbU?si=mtUJBdkf0vbph2e-
이 강의를 선택한 이유는
첫 번째, 나같이 구글 애널리틱스 자체를 써본 적이 없는 사람도 강의를 따라갈 수 있도록 강사가 실제 운영 중인 웹사이트로 하나하나 자세히 예시 들어가면서 가르쳐 주고 있다.
두 번째, 튜토리얼을 따라 하다가 종종 설치 에러가 뜨는 경우가 있었는데, 다른 유튜브 강사들은 무조건 된다라고 가정하고 강의를 막 넘어가버린다. 그런데 이 오씨네학교는 '이러이러한 이유로 에러가 뜰 수 있다'라고 말하면서 해결책도 제시해 준다. 물론 그 해결책으로도 안 되는 경우가 있어서 애먹었지만, 확실히 다른 유튜브 강사보다 자세히 알려주려고 해서 너무 감사할 뿐이다.
세 번째, 누구라고 단정 짓지는 않겠지만 전환 세팅에 대해 어중간하게 아는 지식을 배포하는 일부 강사들 때문에 많은 착오를 겪었는데 그 부분에 대해선 스터디 노트에 적으려고 한다.
💡구글 태그매니저와 구글 애널리틱스 연결 관계
홈페이지(여기서 말하는 홈페이지는 웹사이트에 해당- TMI 긴 한데, 우리나라에서는 홈페이지와 웹사이트를 같은 의미로 쓰고 있는데, 외국에서는 '웹사이트 안에 여러 장의 홈페이지가 있다'는 식으로 이해한다고 함)
다시 본론으로 돌아오자면, 이 오씨네 강사님은 웹사이트 안에 구글 태그매니저를 설치하고, 구글 태그매니저 안에 구글 애널리틱스를 설치하는 거라고 함
태그매니저의 역할 1
구글 태그매니저(줄여서 GTM)는 여러 가지 태그들을 관리하는 곳
태그 종류로는 구글 애널리틱스 스크립트, 페이스북 픽셀, 틱톡 픽셀 등등이 있음
이 강의에서는 구글 애널리틱스(줄여서 GA4)를 구글 태그 매니저 안에 설치하고 전환세팅하는 것이 목표
일부 어중간하게 아는 유튜버들은 그냥 애널리틱스를 웹사이트에 설치하라고 하고, 이걸 왜 여기에 설치하는지, 어떻게 사용하라는지도 안 알려주고 강의를 끝내버린다. 이들 강의만 보면 GTM과 GA4는 따로 운영해야 하는 툴인가 의문이 들었지만!!!!!!!😡😡🤬
이번 강의를 듣고 이 두 가지 툴의 관계에 대해서 알게 되었다. GTM은 GA4와 같은 스크립트를 설치해서 관리하는 곳이다.
태그매니저의 역할 2
웹사이트 내에서 사용자들이 클릭하는 행동을 정의하고 활용할 수 있다.
회원가입 버튼, 상담 버튼, 구매 버튼 등등
영상시청 유무 체류 시간, 스크롤의 이동 등등 다양한 활동을 추적할 수 있지만 대부분 웹사이트 운영자들이 필요로 하는 사용자의 행동은 클릭이다.
위 활동의 일부는 GTM을 연동하지 않고 GA4만으로도 활용할 수 있지만,
내 경험 상, 티스토리가 GA4 메타 태그를 인식 못 하고 GTM 연동도 안 되고 이상하게 꼬여버려서 스킨을 다 뒤엎어버리는 결과를 낳았다.😡🤬 관리하기 쉬우려면 GTM만 티스토리에 설치하고 GTM에서 GA4를 연결시키는 게 맞다!
💡GTM+GA4 설치 튜토리얼
설치 가능
<head>...</head>가 편집 가능한 대부분 웹사이트, 티스토리블로그, 워드프레스 등등
설치 불가능
<head> 편집 불가능한 웹사이트, 네이버블로그, 네이버카페, 인스타그램, 스마트스토어 등등
강의에서 이렇게 말하긴 하지만, 이전에 운영한 쇼핑몰은 거의 90년대 익스플로러로만 제 기능할 것 같은 폐급몰이라서 html 편집이 가능한데도 GA4 설치가 불가능했다. 개발자 동료도 몇 번 만져보더니, '이건 안 돼요'라고 했었음
GTM 설치하기
티스토리는 관리>꾸미기>스킨편집>html 편집
주의! 편집 전 html은 메모장에 백업해 두자! 대부분 웹사이트 편집기는 헤더 편집기가 따로 있는데 티스토리는 그런 거 없음. 에러 나면 스킨 엎어버려야 함
GA4 설치?
이건 오씨네 강의영상 복붙... 이해는 했는데 나는 설명을 잘 못해서 ㅎㅎ
하드 태깅이 아마도 그 어중간한 유튜버들이 알려준 방법인 것 같다.
이 오씨네 강의에서는 나중에 관리도 편리하도록 GTM에 내 GA4 추적 아이디를 넣는 것을 권장한다.
튜토리얼 한다면서 이제야 시작! https://tagmanager.google.com/ ㄱㄱ
계정 만들기 클릭> 계정 설정, 컨테이너 설정에 입력 후 만들기 클릭> google 태그관리자 설치 팝업 뜨면 코드 복사해서 내 웹사이트에 입력! 끝
마지막으로 웹사이트 테스트에서 완료된 것 확인하........???????????
이렇게 안 되는 경우 body 코드도 넣어보라고 한다.
나는 그래도 안 됐다.😭😭 여기저기 정보 찾아보니 하루 지나면 된다고 하더라. 그랬더니,
연결 성공!!!!????????????? 이유는 모르겠다. 티스토리 쓰는 사람 중에 에러 난다는 사람 많길래, 세팅 간편한 워드프레스로 옮길.. 계획은 없고, GTM+GA4 스터디한다고 쓰는 거니까 그냥 이대로 두려고 함
나중에 의심된 사실
head 바로 뒤에 넣으랬는데, meta 뒤에 넣어서 감지 못 했었나 보다. 아래처럼 넣어야 한다.
GA4 계정 생성 후 GTM에 계정 등록
GA4 설치라고 해버리면 메타추적코드 넣는 걸로 오해해서 부제목을 위와 같이 넣었다.
일단 GA4 계정 생성하러 https://analytics.google.com/ ㄱㄱ
계정 만들기 클릭> 계정 생성... 쭉쭉쭉 입력해 나간다
계정 이름은 GTM과 똑같이 맞추는 것이 나중에 관리하기 편한다
쭉쭉 입력하다 마지막에 데이터 스트림 설정에서
웹사이트 url 넣고 스트림 이름은 내가 인지하기 쉽게 입력하는 것이 좋음
스트림 만들기를 눌러서 완료한다.
여기서 뭐 매타코드 그런 거 설치 절대 하지 말고!
스트림 세부정보에 측정 ID란게 생김 (경고창 무시)
그걸 구글 태그매니저(GTM)에 넣어서 연결한다.
태그관리자로 다시 ㄱㄱ
GTM에 측정ID 연결
태그 관리자에 들어가서 내가 연결할 컨테이너 클릭
이 과정은
측정 ID를 상수 형식으로 만든 후 이를 GTM의 태그에 넣는 과정이다.
이렇게 하는 이유는,
나중에 이런저런 한 이유로 GA4에서 생성한 측정 ID를 바꿔야 한다면 상수값만 바꾸면 됨
만약에 스크립트에 GA4를 직접 연결한 거였다면... 아!!! 생각만 해도 복잡하다 (회사였으면 개발자 부르고, 그 개발자나 마케터가 퇴사했으면 퇴사자한테 전화해야 되고, 전화... 안 받을 거 아냐ㅋㅋ 나만 그런가.....)
왼쪽에 변수 클릭 후 새로 만들기 클릭
상수 이름은 식별 가능하도록 GA4 ID로 (필수는 아님)
상수 이름을 입력했으면 아래 레고 블록을 누른다.
변수 유형 선택에서 상수를 클릭한다. (레고모양 클릭> 변수 유형 선택> 유틸리티> 상수)
변수 구성에 내 측정 ID를 넣고 저장한다.
태그+트리거 조건으로 GA4가 실행되도록 하는 방법
이 설치 강의에서 이게 제일 중요하다고 생각한다. 여기저기 강의 다 찾아봐도 이걸 알려주는 강의 못 찾았다.
정말 감사해요. 강사님. 그렇다고 강의 유료 결제하는 건 아님
태그란? 무엇을 실행할 거냐
트리거란? 실행 조건은 무엇이냐
여기서는
태그-GA4 실행
트리거-내 웹사이트에 들어감
식으로 태그를 구성해 볼 것이다.
태그>새로 만들기 클릭> 태그 이름을 GA4 Pageview 입력 (이름은 아무거나 입력해도 됨. 식별용)
태그구성 클릭> 태그 유형선택> Google 태그 클릭
아래 태그 아이디 오른쪽 블록을 클릭하면 이전에 만든 변수인 'GA4 ID'가 있다. 선택!
다음으로, 그 아래에 트리거 클릭
All pages 선택!
아래와 같이 입력했으면 저장하고 세팅 완료!
애널리틱스에 다음 눌러서 데이터 수집하도록 해야 되는데, 나는 이게 안 뜸.. 왜 그런지 모르겠음.. 정상 작동은 함
GTM에서는 우측 상단 미리 보기를 통해서 내 이벤트가 잘 작동하는지 꼭 확인해야 한다.
내 GA4 설치가 잘 되었는지 꼭 확인할 것
그리고 이벤트가 정상 작동하면 제출을 꼭 누른다. 제출해야 내 이벤트가 실제로 측정됨
GTM+GA4 스터디 노트 티스토리 설치 세팅 1편은 여기까지
2편에서는 GTM에서 클릭 이벤트 세팅 하는 방법을 기록하려고 한다.
포스트 한 편 하나 내용이 너무 방대하고 두서없어졌다.
어차피 내 공부 기록용 노트로 쓰고 있는 거고, 거의 나만 보는 블로그라 광고도 안 붙였는데 ㅠ
'실무 스터디' 카테고리의 다른 글
| GTM+GA4 스터디 노트- 이벤트ㆍ전환 이론, 완료 페이지가 있는 이벤트 세팅 튜토리얼 (0) | 2025.11.29 |
|---|