본문으로 건너뛰기

Docusaurus에 구글 애널리틱스 연결하기

· 약 9분
Braun Park
Braun Park
Curious Developer

지난 포스팅들을 통해 간단하게 Docusaurus 프로젝트를 생성하고 AWS Amplify를 활용해서 배포하는 방법에 대해서 정리해봤습니다. 이후에는 Docusaurus를 운영하는데에 도움이 될만한 요소들을 제가 이것저것 해보고 있습니다. 직접 해보면서 여러가지 팁을 공유할 수 있도록 해보겠습니다. 이번 포스팅에서는 구글 애널리틱스를 연결하는 방법에 대해서 간단하게 확인해보겠습니다.

구글 애널리틱스란?​

구글 애널리틱스란, 제공하는 웹사이트 및 모바일 애플리케이션의 방문자와 트래픽을 분석하는 도구입니다. 이를 통해 웹사이트 운영자는 사용자 행동, 트래픽 소스, 전환율 등을 측정하고 분석할 수 있어, 효과적인 마케팅 전략을 수립하고 사용자 경험을 개선할 수 있습니다.

주요 기능들은 다음과 같습니다.

  • 방문자 트래픽 분석: 웹사이트 방문자의 수, 방문 시간, 방문 경로(검색엔진, 소셜 미디어, 직접 방문 등)를 분석할 수 있음.
  • 사용자 행동 분석: 사용자가 어떤 페이지에서 얼마나 오랫동안 머물렀는지, 어떤 링크를 클릭했는지, 어느 페이지에서 이탈했는지 등 사용자 행동 데이터를 추적할 수 있습니다.
  • 전환 추적: 사용자가 원하는 행동을 완료했는지 추적할 수 있습니다. 목표를 설정하고, 목표에 도달한 사용자 수를 확인하여 마케팅 캠페인의 성과를 측정할 수 있습니다.
  • 실시간 데이터 제공: 현재 웹사이트를 방문 중인 사용자의 정보를 실시간으로 확인할 수 있습니다. 실시간 데이터는 실시간 캠페인 모니터링이나 즉각적인 반응을 파악하는 데 유용합니다.

구글 애널리틱스 계정 만들기​

구글 애널리틱스 가입 페이지에 접속합니다. 그리고 계정을 추가해줍니다. 딱히 어려운 내용은 없죠?

gtag 가입 페이지
그리고 플랫폼을 선택하면 되는데요, 저는 웹을 선택했습니다. 그러면 팝업이 나올텐데요, 우선은 URL과 스트림 이름만 간단하게 작성해서 넘어가면 됩니다.

데이터스트림

측정 ID 확인하기​

블로그 데이터를 수집하기 위해서는 연동이 필요한데요, 그 매개가 되는 것이 바로 측정 ID 라는 것입니다. 데이터스트림 추가 후 나오는 팝업 창에 측정 ID가 있을 텐데요(G-XXXXX의 형태). 이걸 복사해둡니다. 애널리틱스 계정별로 발급되는 코드라고 생각하면 좋을 것 같습니다.

Docusaurus에 구글 애널리틱스 연동하기​

Docusaurus에서 구글 애널리틱스를 손쉽게 연결할 수 있는 플러그인을 라이브러리 형태로 제공하고 있습니다. 공식 홈페이지 참조.

plugin-google-gtag 라이브러리 설치하기​

yarn add @docusaurus/plugin-google-gtag

해당 명령어를 실행하면 라이브러리가 설치됩니다. 이제는 다음 단계로 넘어가보겠습니다. 여기서 gtag라는 개념이 나오는데요, 이 포스팅에서는 gtag까지 연동은 하지 않습니다. 블로그 운영하는 데에 있어서 필요할 것 같지 않기 때문에 패스합니다. 간단하게 gtag가 무엇인지만 정리하고 넘어가겠습니다.

팁

gtag란, Google에서 제공하는 Global Site Tag의 약자입니다. 그리고 gtag.js는 Google에서 제공하는 웹사이트의 사용자 활동을 추적하고 분석하는 JavaScript 라이브러리입니다. 주요 기능들은 다음과 같습니다.

  • Google Analytics 통합: 웹사이트의 트래픽과 사용자 행동 데이터를 수집하여 분석할 수 있습니다.
  • Google Ads 통합: 광고 캠페인의 성과를 추적하고 사용자 전환을 모니터링할 수 있습니다.
  • 유연한 추적 코드: gtag.js를 사용하면 하나의 코드로 다양한 Google 서비스와 쉽게 연동할 수 있습니다.

docusaurus.config.ts 파일 수정하기​

프로젝트 설정 파일(docusaurus.config.ts) 수정이 필요합니다. 방금 설치한 라이브러리를 활성화 시켜줘야 하는데요, 이 때 필요한게 바로 측정ID 입니다. docusaurus.config.ts의 가장 마지막 쯤에 추가해주시면 됩니다.

plugins: [
    [
      '@docusaurus/plugin-google-gtag',
      {
        trackingID: 'G-XXXXXXXXXX',
        anonymizeIP: true, 
      },
    ],
  ]

여기 trackingID를 아까 확인해둔 측정 ID로 변경해주시면 됩니다.

연동 확인​

처음에 구글 애널리틱스 계정을 생성하고 나면, 아직 아무것도 확인이 안되실겁니다. 우선은 작업한 내용을 배포하여 구글 애널리틱스에서 데이터를 확인해봅시다. 크롬 시크릿모드나 다른 기기들을 이용해서 사이트에 접속한 뒤, 데이터를 확인해보면 됩니다. 최대 48시간 정도 걸릴 수 있다고 합니다.

마치며​

이전에 티스토리 블로그나 네이버 블로그를 운영할 때 방문자 데이터에 관심을 많이 가졌습니다. 방문자 수부터 방문자의 접근 경로, 키워드 등을 확인하는 게 또 하나의 재미이기도 했습니다. 이번 블로그에서는 구글 애널리틱스를 많이 활용해보려고 합니다. 블로그 플랫폼들에서는 여러가지 보고서를 기본적으로 제공하지만, Docusaurus는 그런 게 따로 제공되지 않기 때문에 확인할 방법이 마땅치 않기 때문입니다.

물론 구글 애널리틱스를 저도 많이 써보진 않았기 때문에 잘 모르지만, 이번 블로그를 통해서 저도 많이 배워서 좋은 정보 많이 공유할 수 있도록 하겠습니다.

출처​

Docusaurus 공식 홈페이지
gtag 공식 홈페이지
구글 애널리틱스 공식 홈페이지