Next.js14 에서 gtag 적용하고 user_id 넣기

까먹방지를 위해 적는 글.

 

1. gtag 적용하기

gtag 적용하는 방법은 아래 링크 참고해주세요. (이 글에서는 생략!)

 

https://coyo-hm.github.io/post/nextjs-gtag

https://kimyanglogging.tistory.com/3

 

다만, 위 글은 Next.js 14 이전 버전인듯 합니다.

 

Next.js 14 에서는 _app.tsx 파일이 없으므로 Script 선언은 layout.tsx 에서 해주시면 됩니다.

 

 

2. gtag config 에 user_id 넣기

저의 경우 authenticate.ts 파일을 만들어 로그인 로직을 이곳에 두었습니다.

 

// authenticate.ts 

import { GA_KEY } from "./gtag";

export async function authenticateUser(): Promise<UserResponse | null> {
  let user: UserResponse | null
  
  ...

  // 대충 액세스 토큰과 리프레시 토큰으로 인증을 하고 user 객체를 가져오는 로직.
  
  ...
  
  gtag("config", GA_KEY, {
    user_id: user?.user_id, // <- 이곳에 유저 아이디를 넣으세요.
  });

  return user;
}

 

 

위의 1번 과정을 했다면 gtag 를 전역적으로 사용할 수 있게 됩니다.

 

이때, 위 예시 코드의 형태로 user_id 를 넣어주면 됩니다.

 

GA4 이벤트를 모니터링하는 크롭익스텐션으로 확인해보니 잘 들어오고 있네요!