feat : ga/gtm 설치

[caseBread]

요약

• ga연동
• gtm연동

ga <-> gtm <-> 프론트 일케 연동 했습니다.

구현 사항

• [ ]
• [ ]
• [ ]
• [ ]

📸 스크린샷

Need Review

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!

Reference

📜 리뷰 규칙

Reviewer는 아래 P5 Rule을 참고하여 리뷰를 진행합니다.
P5 Rule을 통해 Reviewer는 Reviewee에게 리뷰의 의도를 보다 정확히 전달할 수 있습니다.

• P1: 꼭 반영해주세요 (Comment)
• P2: 적극적으로 고려해주세요 (Comment)
• P3: 웬만하면 반영해 주세요 (Comment)
• P4: 반영해도 좋고 넘어가도 좋습니다 (Approve)
• P5: 그냥 사소한 의견입니다 (Approve)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
fe	Ready	Preview, Comment	Dec 31, 2025 11:03am

[gemini-code-assist]

Summary of Changes

Hello @caseBread, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 Pull Request는 프로젝트에 Google Analytics(GA) 및 Google Tag Manager(GTM)를 통합하는 것을 목표로 합니다. 이를 위해 @next/third-parties 라이브러리를 추가하고, 메인 레이아웃에 GTM 스크립트를 설정하여 웹사이트의 사용자 행동 데이터를 효율적으로 추적하고 분석할 수 있는 기반을 마련했습니다.

Highlights

• Google Tag Manager (GTM) 라이브러리 추가: Next.js 프로젝트에서 Google Tag Manager를 쉽게 통합하기 위해 @next/third-parties 라이브러리가 package.json에 새로운 의존성으로 추가되었습니다.
• GTM 스크립트 통합: 프로젝트의 메인 레이아웃 파일인 src/app/layout.tsx에 @next/third-parties/google에서 GoogleTagManager 컴포넌트를 임포트하고, GTM-PH2N3NWM ID를 사용하여 GTM 스크립트를 삽입했습니다.
• 의존성 잠금 파일 업데이트: 새로운 라이브러리 추가에 따라 pnpm-lock.yaml 파일이 업데이트되어 @next/third-parties 및 관련 종속성 정보가 반영되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이번 PR은 @next/third-parties 의존성을 추가하고 루트 레이아웃에 GoogleTagManager 컴포넌트를 포함하여 Google Tag Manager를 연동하는 변경 사항을 담고 있습니다. 제 리뷰는 GTM ID를 하드코딩하는 대신 환경 변수를 사용하도록 제안하여 보안과 유지보수성을 개선하는 데 중점을 두었습니다.

[gemini-code-assist]

하드코딩된 GTM ID는 보안 및 유지보수 측면에서 좋지 않습니다. 환경 변수를 사용하여 관리하는 것이 좋습니다.

Next.js에서는 .env.local 파일에 환경 변수를 저장하고, NEXT_PUBLIC_ 접두사를 사용하여 브라우저에 노출시킬 수 있습니다.

예를 들어, .env.local 파일에 다음과 같이 추가합니다:

NEXT_PUBLIC_GTM_ID=GTM-PH2N3NWM

그리고 코드에서는 process.env.NEXT_PUBLIC_GTM_ID로 접근할 수 있습니다. 이렇게 하면 개발, 스테이징, 프로덕션 환경마다 다른 GTM ID를 쉽게 적용할 수 있고, 민감한 정보가 코드에 직접 노출되는 것을 방지할 수 있습니다. GTM ID가 없는 환경에서는 스크립트가 렌더링되지 않도록 조건부 렌더링을 사용하는 것이 좋습니다.

Suggested change

	<GoogleTagManager gtmId='GTM-PH2N3NWM' />
	{process.env.NEXT_PUBLIC_GTM_ID && <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID} />}