티스토리 뷰

개발 일기

데이터 수집을 위한 Google Analytics 설정기

WegglePlus 2025. 10. 8. 15:13
반응형

첫 서비스로 반려동물 MBTI를 만든 뒤, 여러 SNS와 블로그 글을 통해 간단한 홍보를 진행했습니다.

하지만 홍보보다 더 중요한 건 결국 얼마나 많은 사용자가 실제로 서비스에 들어오는가입니다.

제가 생각하는 가장 기본적이면서 중요한 데이터는 활성 사용자 수(Active Users)입니다. 서비스에 특별한 기능이 많지 않더라도, 사용자가 블로그 글을 통해 얼마나 유입되는지를 아는 것이 핵심이었죠.

이를 가장 쉽게 확인할 수 있는 도구가 바로 Google Analytics(GA)였습니다.

설정

  1. 일단 Google Analytics 사이트에 접속 후 측정 시작 버튼을 클릭합니다.

2. 계정 이름을 입력합니다. (저는 weggle-plus로 설정)

  • 계정은 하나의 조직 단위라고 생각하면 됩니다. 회사, 팀, 개인 단위로 생성하며 GA 권한을 관리합니다.

 

3. 속성 설정을 진행합니다. 이 과정에서 이름과 시간대, 통화를 설정합니다.

  • 저희는 weggle-plus-prod로 하였습니다. 이유는 운영환경과 개발환경(차후 생길수도 있으니.)를 구분하고 싶었습니다.
  • 우리 팀의 현재 방향성으로 여러개의 서비스를 만드는것이지만, 이걸 모두다 속성을 설정하면 통합해서 보기도 어렵고, 초반에는 충분히 path로 구분해서 가능할것으로 생각됩니다.
  • 속성이란?
    • 웹사이트, 앱, 제품 하나를 추적하는 단위로 각 속성은 ID를 가지게 됩니다. 쉽게 생각하면 추적할 대상이라고 생각하면 좋습니다.

 

4. 업종, 규모, 비즈니스 목표 등을 입력합니다. (저는 업종: 인터넷 및 통신, 규모: 1~10명)

 

5. 그리고 비지니스 목표를 선택합니다.

  • 이건 각자 읽어보시고 편하신거 선택하시면 됩니다. 저희는 모두다 선택하긴 했습니다.

 

6. 플랫폼을 선택합니다. 저희는 “웹”을 선택하였습니다.

 

7. 사이트 URL을 입력합니다.

  • 저희 웹 사이트 주소는 https://weggle-plus.co.kr 을 입력하였습니다.
  • 데이터 스트림이란?
    • 속성 안에서 실제 데이터가 들어오는 입구 역할을 의미합니다. 속성에는 여러개의 스트림을 가질수 있습니다. 스트림의 종류는 웹, iOS, Android 가 있습니다.

 

8. 데이터 스트림을 생성하면 측정 ID가 발급됩니다.

  • 이 ID를 프로젝트 코드에 추가해주면 GA와 연결됩니다.

 

9. 클릭하면 태그 설정 하는 방법이 나옵니다.

 

 

개발

  • 일단 가장 쉽게 AI에게 시켜보려고 합니다. 이번에는 간단한 작업을 할때, 가장 좋았던, Github Copilot agent를 사용합니다. 모델은 Claude Sonnet 4를 사용합니다.
  • 프롬프트
우리 프로젝트에 GA를 설정하고 싶어.
GA의 속성 ID는 이와 같다. : "속성 ID 넣기"
설치 가이드를 안내해줄게.

### 직접 설치 권장
아래에 이 계정의 Google 태그가 있습니다. 태그를 복사한 후 웹사이트의 각 페이지 코드에서 <head> 요소 바로 다음에 붙여넣으세요. Google 태그는 각 페이지에 하나씩만 추가합니다.
```
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=${속성(추적) ID}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', ${속성(추적) ID});
</script>
```

우리 프로젝트에 GA를 설정해줘.

 

결과

  • src/app/components/common/GoogleAnalytics.tsx
'use client';

import Script from 'next/script';

type GoogleAnalyticsProps = {
  gaId: string;
};

export default function GoogleAnalytics({ gaId }: GoogleAnalyticsProps) {
  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
      />
      <Script
        id="google-analytics"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gaId}');
          `,
        }}
      />
    </>
  );
}
  • nextjs는 기본적으로 Script를 쓰는 방식이 일반적인 방법과 다릅니다. 위와 같이 Script 태그를 따로 써서 진행해야 합니다.
  • 재사용성과 응집도를 위해 따로 컴포넌트를 분리한것이 인상깊습니다.

 

  • src/app/layout.tsx
...
<head>
  {process.env.NEXT_PUBLIC_GA_ID && (
    <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
  )}
</head>
```

 

  • 이렇게 한번의 프롬프트로 GA를 쉽게 적용 가능합니다.
  • 여담으로 라이브러리를 사용할 방법도 있지만, 이런 작업은 쉽게 가능하기 때문에 라이브러리를 쓰기 보단 AI를 이용하여 코드가 작성되도록 하는게 효과적이라 생각합니다.

 

결론

Google Analytics는 처음 서비스에서 사용자 유입 데이터를 빠르게 확인하기 좋은 도구입니다.

별도 라이브러리를 쓰지 않아도, AI의 도움을 받아 코드 한두 번 생성하면 충분히 쉽게 적용할 수 있습니다.

여러분도 서비스를 만들 때 꼭 GA를 설정해 보세요. 작은 서비스라도 데이터를 기반으로 개선할 기회를 잡을 수 있습니다!

 

About WegglePlus

WegglePlus는 문제를 정의하고, 이를 해결하는 여러 개의 서비스를 설계·개발·운영합니다.
이 블로그는 그 과정에서의 기술적 선택과 시행착오를 공유합니다.

https://weggle-plus.co.kr
반응형

'개발 일기' 카테고리의 다른 글

디자인 시스템을 위한 로딩 스피너 컴포넌트 제작기  (0) 2025.11.06
혼자 개발하다 보니 코드가 제멋대로… 그래서 Prettier를 깔았다  (1) 2025.10.19
데이터 수집을 위한 Clarity 설정기  (0) 2025.10.08
반려동물 MBTI, 이렇게 만들었습니다 (바이브코딩 후기)  (0) 2025.10.08
바이브 코딩을 시작한 이유  (0) 2025.10.08
최근에 올라온 글
최근에 달린 댓글
링크
반응형