페이지 또는 화면에서 특정 상황(=트리거)이 발생했을 때 스크립트(=태그)를 자동 실행할 수 있도록 돕는 도구
관련 설명은 구글 태그 매니저(GTM) 알아보기 (feat. 사용 이유 및 방법) 가 가장 잘 되어있어 도움을 많이 받았다. 해당 블로그의 tistory gtm & ga4(24.2.16 기준 google analytics의 최신 버전) 연동 내용을 따라해보았다.
1. GA4 추적코드 찾는 법
위의 블로그에서 예시로 든 것처럼 구글 태그매니저(GTM)의 3요소인 변수, 트리거, 태그를 대략적으로 이해하고 작업을 해보는 것이 전체 맥락을 이해하는데 도움이 된다. 사이트의 모든 페이지에 트래픽이 들어올 시 GA에서 데이터를 추적하고 싶다고 가정할 때, 변수는 '사이트의 모든 페이지', 트리거는 '트래픽이 들어옴', 태그는 'GA로 데이터를 보내라! (명령)'이 된다.
google analytics 계정 생성 > 속성 생성 후 관리로 들어간다.
속성 설정 > 데이터 수집 및 수정 > 데이터 스트림 > 스트림 추가로 해당 티스토리 사이트를 등록한다.
2. 구글 태그 만들기
여기서 추적 ID를 복사해서 구글 태그 메니저로 이동한 뒤 다음과 같이 붙여 넣는다. 그러면 구글 태그가 없다는 안내창이 뜬다.
‘Google 태그가 없습니다’ 안내창이 뜨는 이유는 공식 문서의 그림처럼 도메인별로 Google 태그를 1개씩 만들어야 이 태그가 ga4로 등록한 이벤트를 전달할 수 있기 때문이다.
추적 ID를 반복해서 사용하므로 변수 - 상수 하나를 다음과 같이 만들어준다.
태그에서 해당 변수를 태그 ID에 넣어준다.
그 후에 ga4 이벤트를 등록해주면 google 태그가 발견되었다는 성공 안내창이 뜬다.
3. tistory gtm 설치하기
태그 관리자에서 ‘Google 태그 관리자 설치’ 코드를 다음과 같이 ‘html 편집’ 버튼을 눌러 나온 창에 붙여넣는다.
4. Tag assistance extension을 설치하기
구글 태그 메니저에서 ‘미리보기’ 버튼을 클릭한다.
자동으로 tag assistant로 이동한다. 테스트할 도메인을 추가하기 위해 티스토리 URL을 등록해준다.
나의 경우는 위와 같은 순서로 진행했음에도 다음과 같이 google tag를 못찾는 문제가 발생했다.
Google Tag: GTM-XXXXXX not found를 보니 원인이 XB 라는 크롬 익스텐션이 해당 사이트를 막고 있어서인 걸 발견했다.
gtm, ga4 연결 성공!
reference
Share article
![[vue3] ‘ResizeObserver loop completed with undelivered notifications.’ 에러 해결하기](https://image.inblog.dev?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3D%255Bvue3%255D%2520%25E2%2580%2598ResizeObserver%2520loop%2520completed%2520with%2520undelivered%2520notifications.%25E2%2580%2599%2520%25EC%2597%2590%25EB%259F%25AC%2520%25ED%2595%25B4%25EA%25B2%25B0%25ED%2595%2598%25EA%25B8%25B0%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3Dveganee&w=750&q=75){kind=logo}
