[GA4] 구글 애널리틱스4 설치 실습(gtag.js)
강의 링크 : https://www.youtube.com/watch?v=exN0kubP0Kg&list=PLRrkVu2PYLQhRN7f4YvsAcyEDatyYpt25&index=6
23년도에 올라온 강의이기 때문에 23년도 기준 현재와 다른 내용이 있을 수도 있다.
기본적인 Google Analytics4 사용법을 익히기 위함이니 이론적인 부분은 참고만 할 것.
구글 태그 직접 설치에 대해서 알아보겠다
1. '관리 > 데이터 수집 및 수정 > 데이터 스트림'에 접속
추가한 웹사이트를 클릭해 아래의 빨간 박스 안에 있는 '태그 설정 구성'에 들어간다
2. '설치 안내' 클릭
3. '웹사이트 작성 도구 또는 CMS로 설치'가 아닌 '직접 설치'로 접속
접속하면 나오는 아래의 태그 코드를 복사한다
4. 아래 내용을 진행하기 전 유튜브 강의 내용에 링크되어있는 "강의 문서"에 접속하여
netlify 가입과 VS Code 설치, 실습 웹사이트 다운로드, Google Analytics Debugger를 설치해야한다
강의 문서 내용대로 진행하면 되고 링크도 다 있으니 어렵지 않다
해당 내용을 진행하고 다운 받은 웹사이트 파일의 압축을 풀어 해당 폴더를 VS Code로 열어
3번에서 복사한 태그를 <head> 바로 아래에 추가해준다
5. netlify에 웹사이트 upload하기
태그를 추가한 후 이미지와 html 파일이 있는 폴더를 해당 위치에 드래그하거나 파일 추가로 추가해준다
6. 업로드 된 웹사이트 클릭
클릭하여 확인해보면 정상적으로 업로드가 됐을 경우 Set up your site의 1번에 체크표시가 된다
상단에 검은색 박스는 업로드된 웹사이트의 주소가 나온다
7. 설치 확인
정상적으로 설치가 되었다면 '보고서 > 실시간 개요 / 실시간 페이지' 에서 활성 사용자를 확인할 수 있다
8. 디버거 고정
Google Analytics Debugger가 제대로 설치 되었다면 주소창 오른쪽 퍼즐 아이콘 클릭 시 해당 확장 프로그램을 확인할 수 있다
핀을 클릭하여 고정시켜주면 퍼즐 왼쪽으로 디버거 아이콘이 나온다
9. 디버거 활성
웹 사이트에서 디버거 아이콘을 클릭하여 활성화 시켜준다
10. 데이터 수집 확인
9번 진행 후 관리로 들어가 페이지를 내려 'DebugView'를 클릭한다
11. 디버그 확인
정상적으로 동작한다면 아래와 같은 화면을 확인할 수 있다
