Gatsby에 Google Analytics 추가하는 방법

2023-04-05

안녕하세요. 이번 포스팅에서는 Gatsby에 Google Analytics를 추가하는 방법에 대해서 알아보겠습니다.

Gatsby로 웹사이트를 만들었다면, 트래픽을 분석하기 위해서 google analytics를 추가해야 합니다. Gatsby 가이드 문서를 보면, gatsby-plugin-google-analytics를 사용하라고 되어 있습니다. 하지만, gatsby-plugin-google-analytics는 이전 버전 내용이고 더이상 지원되지도 않고 작동하지 않습니다. 그래서 이번 포스팅에서는 gatsby-plugin-google-gtag 플러그인을 사용해서 Google Analytics를 추가하는 방법에 대해서 알아보겠습니다.

우선 gatsby-plugin-google-gtag 플러그인을 설치합니다.

$ npm install gatsby-plugin-google-gtag

gatsby-config.js 파일에 다음과 같이 추가합니다.

// gatsby-config.js
module.exports = {
  plugins: [
    //...
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: ['GA-TRACKING_ID'],
        pluginConfig: {
          head: true,
        },
      },
    },
  ],
  //...
}

그리고 GA-TRACKING_ID 부분에는 Google Analytics의 추적 ID를 입력하면 됩니다.

Google Analytics의 추적 ID 값은 다음 위치에서 확인할 수 있습니다.

관리 > 속성 > 데이터 스트림

이렇게 Gatsby로 만든 웹사이트에 Google Analytics를 추가하는 방법을 알아보았습니다.

감사합니다.