티스토리 뷰

개발../Nextjs

Nextjs14 에서 @next/third-parties 를 이용하여 GTM, GA 적용하기

링재호 2024. 10. 21. 16:58

Nextjs14 에서 타사 라이브러리 사용하기

해당 라이브러리를 활용하여 타사 라이브러리를 쉽고 빠르게 사용할 수 있는 라이브러리 입니다.
이를 이용해서 GTM, GA 를 Nextjs 에서 적용해봅시다.

@next/third-parties 라이브러리 설치

해당 라이브러리는 인기있는 타사 라이브러리를 로딩할 때 성능과 개발자 경험을 개선하기 위한 라이브러리로 현재 v14.2.15 에서도 아직 활발하게 개발 중인 실험적 라이브러리입니다.

npm install @next/third-parties@latest next@latest

pnpm, yarn 을 쓰시는 분들은 맞는 문법으로 다운받으시면 됩니다. 필자는 pnpm 썻음.

GTM, GA 연동해보기

구글 태그 매니저(GTM)과 구글 애널리틱스(GA) 를 연동하기 위해서는 @next/third-parties/google 에서 가져올 수 있습니다.
layout.tsx 에서 가져와서 적용해봅시다.
상용의 경우에만, 해당 라이브러리를 적용하기 위해서 nextjs 에 headers 를 이용해 domain 을 뽑아서 설정하도록 합니다.
각 id 들은 환경변수에 저장하여 사용합니다.

import { GoogleTagManager, GoogleAnalytics } from '@next/third-parties/google'
import { headers } from 'next/headers'

const RootLayout = ({ children, params }: RootLayoutPropsType) => {
  const headersList = headers()
  const domain = headersList.get('host')
  const isProdDomain = domain === 'example.com'

  return (
    <html lang={params.locale} className="font-['Pretendard']">
       {
        isProdDomain &&
        <>
          <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID} />
          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
        </>
      }
      <body className="bg-back-default">{children}</body>
    </html>
  )
}

export default RootLayout

설정되었는지는 이제 네트워크단에서 확인하면, gtm, ga 가 설정되는 것을 확인할 수 있습니다.

'개발.. > Nextjs' 카테고리의 다른 글

Nextjs15 로 마이그레이션 하기  (7) 2024.11.12
Nextjs14 에서 cors 해결방법  (0) 2024.10.18
Nextjs14 에서 서버, 클라이언트에서 URL 가져오는 방법  (0) 2024.10.18
Nextjs 에서 서버 간 통신 (서버 to 서버) 할 때 경로 관리 주의사항  (0) 2024.09.20
Nextjs14 app 기반 폴더/라우팅 구조 만들기  (0) 2024.08.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함