Google Analytics와 GTM 연동을 통한 태그 관리 개선

개요

기존에 Google Analytics(GA)에서 직접 관리하던 이벤트 추적을 Google Tag Manager(GTM)를 통해 중앙집중식으로 관리할 수 있도록 개선했습니다. 이를 통해 개발자의 코드 수정 없이도 마케팅 팀에서 직접 태그를 관리할 수 있게 되었으며, Next.js 환경에서 최적화된 구현 방법을 적용했습니다.

1. Google Analytics 기본 설정

1.1 계정 및 속성 선택

GA 대시보드 왼쪽 상단에서 적절한 GA 계정과 속성을 선택합니다. 이는 올바른 데이터 수집 환경을 보장하기 위한 첫 번째 단계입니다.

1.2 데이터 스트림 설정

1. 왼쪽 하단의 설정 버튼 클릭
2. 데이터 수집 및 수정 → 데이터 스트림 이동
3. 설정이 필요한 스트림 선택

2. Measurement ID 확인 및 GTM 연동

2.1 Measurement ID 획득

선택한 데이터 스트림의 세부정보에서 Measurement ID를 확인합니다. 이 ID는 GTM에서 GA 태그를 설정할 때 필수적으로 필요한 식별자입니다.

왜 중요한가? Measurement ID는 GTM과 GA 간의 연결고리 역할을 하며, 올바른 속성으로 데이터가 전송되도록 보장합니다.

2.2 GTM에서 변수로 관리

GTM에서 Measurement ID를 직접 입력하지 않고 변수로 설정하여 관리합니다. 이는 환경별(dev/prod) 다른 측정 ID를 안전하게 관리할 수 있게 해줍니다.

효과: 환경별 설정 분리로 테스트 데이터와 실제 데이터의 혼재를 방지하고, 배포 시 설정 오류를 최소화할 수 있습니다.

3. Next.js 환경에서의 GTM 구현

3.1 환경 변수 설정

# .env 파일
NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXX

장점: 환경변수를 통해 개발/스테이징/프로덕션 환경별로 다른 GTM 컨테이너를 안전하게 관리할 수 있습니다.

3.2 Next.js Script 컴포넌트 활용

Next.js에서 제공하는 서드파티 최적화 기능을 사용하여 GTM을 구현합니다:

// googleTagManager.js
import Script from 'next/script'

export default function GoogleTagManager() {
  return (
    <Script
      id="google-tag-manager"
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}');
        `,
      }}
    />
  )
}

왜 이 방식이 효과적인가? Next.js의 Script 컴포넌트는 성능 최적화와 로딩 전략을 자동으로 처리하여 웹사이트 성능에 미치는 영향을 최소화합니다.

3.3 커스텀 이벤트 전송 함수

// 기본 sendGTMEvent 커스텀
import { sendGTMEvent } from '@next/third-parties/google'

export const trackEvent = (eventName, parameters) => {
  sendGTMEvent({
    event: eventName,
    ...parameters
  })
}

// 사용 예시
const eventConfig = {
  purchase: {
    currency: 'KRW',
    transaction_id: 'T12345',
    value: 50000,
    items: [...]
  }
}

프로젝트 구조: apps/stock/web/src/services/googleTagManager에서 중앙집중식으로 관리되고 있습니다.

4. 고급 데이터 수집 설정

4.1 이메일 정보 수집 설정

사용자 식별이 필요한 경우, 데이터 수정 섹션에서 이메일 정보 수집을 활성화합니다.

효과: 사용자 여정 추적의 정확도가 향상되고, 개인화된 분석이 가능해집니다.

4.2 내부 트래픽 제외 설정

개발팀의 테스트 활동이 실제 사용자 데이터에 영향을 주지 않도록 내부 IP를 트래픽에서 제외합니다.

설정 방법:

• 데이터 수집 설정에서 트래픽 제외 규칙 추가
• 테스트가 필요한 경우 임시로 해제 가능

장점: 실제 사용자 행동 데이터의 정확성을 보장하고, 의미 있는 분석 결과를 얻을 수 있습니다.

5. GTM 태그 생성 및 설정

5.1 변수 생성하기

GTM 워크스페이스에서 새로운 변수를 생성합니다. 특히 GA 측정 ID를 변수로 설정하여 환경별 관리를 용이하게 합니다.

효과: 이벤트 데이터를 동적으로 처리하여 다양한 상황에 맞는 유연한 태그 관리가 가능해집니다.

5.2 태그 생성하기

1. GTM에서 새 태그 생성
2. 태그 유형을 Google 태그 또는 GA4 이벤트 선택
3. 변수로 설정한 GA 측정 ID 사용
4. 이벤트 매개변수 설정

왜 이 방식이 효과적인가? 변수 사용으로 환경별 측정 ID 관리가 자동화되고, 배포 시 설정 오류를 방지할 수 있습니다.

5.3 트리거 설정

이벤트가 발생할 조건을 정의합니다:

• 페이지 조회
• 클릭 이벤트
• 폼 제출
• 사용자 정의 이벤트

중요한 이유: 정확한 트리거 설정은 의미 있는 데이터 수집의 핵심이며, 불필요한 이벤트 발생을 방지합니다.

6. 구매 이벤트 세팅 예시

6.1 purchase 이벤트 구성

eCommerce 추적을 위한 purchase 이벤트를 설정할 때, 마케터가 작성한 이벤트 문서를 참고하여 이벤트명과 파라미터를 정의합니다:

// GTM에서 설정되는 이벤트 매개변수
{
  "event_name": "purchase",
  "currency": "KRW",
  "value": "{{Purchase Value}}",
  "transaction_id": "{{Transaction ID}}",
  "items": [
    {
      "item_id": "{{Item ID}}",
      "item_name": "{{Item Name}}",
      "category": "{{Item Category}}",
      "quantity": "{{Quantity}}",
      "price": "{{Price}}"
    }
  ]
}

이 설정의 장점:

• 전자상거래 성과를 정확히 측정할 수 있습니다
• GA4의 향상된 전자상거래 보고서를 활용할 수 있습니다
• ROI 및 전환 분석이 가능해집니다

6.2 이벤트 매개변수 매핑

GTM 변수를 통해 웹사이트의 데이터를 GA 이벤트 매개변수와 연결합니다. 이를 통해 데이터 일관성을 보장하고 분석의 정확도를 높입니다.

7. 테스트 및 디버깅

7.1 GTM 미리보기 모드

1. GTM 컨테이너 대시보드 오른쪽 상단의 미리보기 버튼 클릭
2. Tag Assistant 확장프로그램 설치 필요
3. 디버깅 모드에서 태그 동작 실시간 확인

효과: 실제 배포 전에 태그 동작을 검증하여 오류를 사전에 방지할 수 있습니다.

7.2 Tag Assistant 활용

Chrome 확장프로그램인 Tag Assistant를 통해:

• 연결 상태 확인
• 이벤트 발생 모니터링
• 태그 오작동 진단

7.3 GA DebugView로 검증

설정 → 데이터 표시 → DebugView에서 실시간으로 이벤트 발생을 확인합니다.

검증 방법:

• 보고서 > 판매 > 전자상거래
• 홈 > 이벤트 > 이벤트 선택
• 실시간 이벤트 확인

검증이 중요한 이유: 잘못된 설정으로 인한 데이터 손실을 방지하고, 마케팅 의사결정의 정확성을 보장합니다.

8. GTM 변경사항 관리 및 배포

8.1 작업공간 변경사항 제출

GTM에서 태그, 트리거, 변수, 폴더 등의 변경사항이 생기면 제출 버튼을 눌러 즉시 업데이트해야 합니다.

왜 즉시 제출해야 하는가? 업데이트를 지연하면 다른 팀원의 변경사항과 충돌이 발생할 수 있으며, 변경사항을 일일이 체크하고 제거해야 하는 번거로움이 생깁니다.

8.2 환경별 배포 전략 (Dev → Prod)

1. Dev GTM 컨테이너에서 테스트 완료
2. 컨테이너 내보내기로 dev 컨테이너 설정 저장
3. Prod GTM에서 가져오기로 설정 적용
4. 중요: 측정 ID가 덮어씌워지지 않도록 주의

이 방식의 장점:

• 개발 환경에서 충분한 테스트 후 안전한 프로덕션 배포
• 환경별 측정 ID 보호로 데이터 무결성 확보
• 롤백이 용이한 배포 체계

9. 개선 효과

9.1 개발 효율성 향상

• 코드 의존도 감소: GA 스크립트 직접 삽입 불필요, GTM으로 일원화
• Next.js 최적화: Script 컴포넌트를 통한 성능 최적화
• 환경 관리: 환경변수를 통한 안전한 설정 관리

9.2 운영 효율성 향상

• 마케팅 팀 자율성: 개발자 도움 없이 직접 태그 관리
• 실시간 배포: 코드 수정 없이 즉시 태그 배포 가능
• 안전한 배포: Dev → Prod 환경별 검증 체계

9.3 데이터 품질 개선

• 정확한 추적: 변수 기반 측정 ID 관리로 환경별 데이터 분리
• 실시간 모니터링: 다중 디버깅 도구로 즉시 검증
• 깨끗한 데이터: 내부 트래픽 제외로 순수한 사용자 데이터 확보

참고 자료

결론

이번 GA와 GTM 연동 개선을 통해 단순한 태그 관리 개선을 넘어서 개발팀과 마케팅팀 간의 협업 효율성이 크게 향상되었습니다. 특히 Next.js 환경에 최적화된 구현과 환경별 안전한 배포 체계를 구축함으로써, 확장 가능하고 유지보수가 용이한 분석 인프라를 확보했습니다.

요약

• GA와 GTM 연동을 통해 중앙집중식 태그 관리 체계를 구축하고, Next.js 환경에서 성능 최적화된 구현을 적용했습니다.
• 변수 기반 측정 ID 관리로 환경별 데이터 분리와 안전한 배포 체계를 확립했습니다.
• GTM 미리보기, Tag Assistant, GA DebugView를 활용한 삼중 검증 시스템으로 태그 오작동을 사전에 방지합니다.
• Dev → Prod 환경별 테스트 및 배포 프로세스로 안전하고 신뢰할 수 있는 분석 데이터를 확보했습니다.
• 개발팀의 코드 의존도를 줄이고 마케팅팀의 자율성을 높여 전체적인 운영 효율성과 데이터 품질이 크게 개선되었습니다.