해당 포스팅은 구글 애널리틱스의 속성 생성 방법에 대해서는 따로 다루지 않습니다. 측정 ID 가 존재하는 것을 전제로 합니다. (GA4)
측정 ID : G-xxxxxx
과정
먼저 생성한 측정 ID 를 프로젝트 내부에서 사용하기 위해서 .env 파일에 추가해준다.
그 다음 gtag.ts 파일을 생성해서 구글 애널리틱스를 수집할 때 사용되는 함수를 생성해준다.
gtag.ts 파일을 생성하고 나면 window.gtag 코드에서 타입 에러가 발생하기 때문에
@types/gtag.js 를 설치해준다.구글 애널리틱스를 적용하는 Analytics 컴포넌트를 생성해준다.
useEffect()와 Next.js 의useRouter()를 통해 페이지가 변경되는 경우gtag.pageview()를 실행하도록 적용하였다.
next/script를 통해 페이지의 Hydration 이 완료되면(afterInteractive)dangerouslySetInnerHTML의 애널리틱스 코드가 실행되도록 적용하였다. 이때 .env 에 추가해준 측정 ID 를 적용해준다. (gtag.GA_TRACKING_ID)
- 배포된 사이트에서만 애널리틱스 정보가 수집되도록 하기 위해
cookie_domain에 프로토콜(http, https) 을 제외한 배포 사이트 주소를 적용하였다.
생성한 Analytics 컴포넌트를 _app.tsx 에 적용해준다.
내부 트래픽의 정보를 제외하고 싶은 경우
내부 트래픽 필터링을 통해서 내 노트북이나 핸드폰으로 접속하는 경우를 제외하고 수집을 진행할 수 있다.
- 구글 애널리틱스 페이지에서 [관리 → 데이터 스트림 → 프로젝트 상세] 로 이동
- [태그 설정 구성] 으로 이동
- ‘모두 표시’ 클릭 후 [내부 트래픽 정의] 로 이동
- 내부 트래픽 규칙을 생성해준다.
- 규칙 이름, traffic_type, 적용시킬 IP 주소를 입력해주고 생성해준다.
- traffic_type 값은 따로 설정하지 않는다면 기본값인 internal 를 적용시켜준다.
- IP 주소의 검색 유형을 통해 다양한 조건에 맞는 IP 를 적용해줄 수 있다.
- 만약 여러개의 IP 를 적용시키는 경우 하단의 ‘조건 추가’ 를 통해 추가해줄 수 있다. (나 같은 경우 핸드폰LTE 와 집 와이파이 주소, 총 2개의 IP 를 적용시켜주었다.)
- 다시 설정 페이지에서 [데이터 설정 → 데이터 필터 → 데이터 필터 상세] 로 이동한다.
- 필터 상태를 활성으로 적용해준다.
- 상태값을 ‘활성’ 으로 설정하면 기존에 존재했던 필터링 데이터가 제거되기 때문에 ‘테스트’ 를 진행 한 뒤에 적용해야 한다.
내부 트래픽을 설정하였지만 아이폰 사파리를 통해 측정되는 경우
아이폰 설정에서 [safari → IP 주소 가리기 → 끔] 을 통해 측정 여부를 확인할 수 있다.
이렇게 Next.js 환경에 구글 애널리틱스 4 (GA4) 를 설정하는 과정에 대해 정리를 해보았다.
해당 포스팅은 페이지에 관련된 이벤트만 적용하였기 때문에 다른 이벤트를 적용하는 경우나 구글 애널리틱스의 추가적인 정보를 확인하고 싶은 경우는 참고 자료나 공식문서에서 더 자세하게 확인할 수 있다.
참고
