수정하기 - Vercel 배포 후 Google Analytics를 연결하는 과정은?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

Vercel에 배포한 웹사이트에 Google Analytics를 연결하는 과정은 다음과 같습니다. 이 과정은 간단한 단계로 이루어져 있으며, Google Analytics의 트래킹 코드를 Vercel 프로젝트에 포함시키는 방법을 설명합니다.           1. Google Analytics 계정 생성  1. Google Analytics 웹사이트에 방문하여 계정을 생성합니다.  2. 새 속성을 추가합니다. 여기서 웹사이트의 정보를 입력합니다.  3. 속성을 만들면 특정 측정 ID(예: `G-XXXXXXXXXX`)가 제공됩니다. 이 ID를 복사해 놓습니다.           2. Google Analytics 설정  1. Google Analytics 대시보드에서 "Admin" 섹션으로 이동합니다.  2. "Data <a href='https://sangseek.com/sangseeks/Stream/ko'>Stream</a>s"를 클릭한 후 만들어 놓은 웹사이트 속성을 선택합니다.  3. 여기서 "Tagging Instructions"를 찾아서 "Global Site Tag (gtag.js)" 방법을 선택합니다.  4. 제공된 코드를 복사합니다. 이 코드는 아래와 비슷합니다.       ```html     <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>     <script>         window.dataLayer = window.dataLayer || [];         function gtag(){dataLayer.push(arguments);}         gtag('js', new Date());         gtag('config', 'G-XXXXXXXXXX');     </script>     ```           3. Vercel 프로젝트에 코드 추가  1. Vercel Dashboard에서 해당 프로젝트를 선택하고, 소스 코드 편집기를 엽니다.  2. 웹사이트의 `pages/_app.js` (또는 `pages/_app.tsx` if using <a href='https://sangseek.com/sangseeks/Type/ko'>Type</a>Script) 파일을 찾아 열어줍니다. `_app.js` 파일은 애플리케이션의 레이아웃을 정의하는 곳입니다.  3. 복사해 놓은 Google Analytics 코드를 `_app.js` 파일의 상단에 추가합니다. 아래와 같은 구조가 됩니다.       ```javascript     import { useEffect } from 'react';       function MyApp({ Component, pageProps }) {         useEffect(() => {             // Google Analytics 코드             window.dataLayer = window.dataLayer || [];             function gtag(){dataLayer.push(arguments);}             gtag('js', new Date());             gtag('config', 'G-XXXXXXXXXX');         }, []);                  return <Component {...pageProps} />;     }       export default MyApp;     ```    4. 웹 페이지가 로드될 때 Google Analytics 코드가 호출되도록 `useEffect` 훅을 사용하여 코드 실행을 관리합니다.           4. 배포  1. 코드를 변경한 후 Vercel에 코드를 푸시하여 사이트를 다시 배포합니다. Vercel은 Git 레포지토리와 자동으로 통합되므로, Git에 커밋하고 푸시하면 됩니다.  2. 배포가 완료되면 웹사이트를 방문하여 Google Analytics가 정상적으로 작동하는지 확인합니다.           5. 확인  1. Google Analytics 대시보드로 돌아가서 "Real-Time" 보고서로 이동합니다.  2. 웹사이트에 접속한 사용자가 실시간으로 확인되는지 확인합니다.     위의 단계를 따르면 Vercel에 배포한 웹사이트에 Google Analytics를 성공적으로 연결할 수 있습니다. 이제 웹사이트 트래픽 데이터가 Google Analytics에 수집되어 분석할 수 있습니다.