📦 chore: Google Tag Manager 대신 gtag 적용

[bbearcookie]

🧩 이슈 번호

• close Google TagManager 대신 gtag 적용 #308

✅ 작업 사항

GA를 적용할 당시에 태그 매니저 vs gtag 중 어떤 방법이 좋을지 몰랐어서 태그 매니저를 사용하는 방식으로 설정했었어요. (태그 매니저는 코드 작성 없이도 GA 이벤트를 다룰 수 있는 기능이라고 하는 듯 해요.),

그런데 개발자가 활용하기에는 gtag가 더 편하다는 생각이 들어서 변경했어요.
(구글 태그 매니저 페이지에 들어가서 GUI로 이벤트 등록하고 조작하는 것 보다, 이벤트 로깅하는 함수 호출하는 게 더 간편..)

• Google Tag Manager 대신 gtag를 적용
• 로그를 전송하는 logEvent 함수 작성
• gtag 타입 정의 작성

👩‍💻 공유 포인트 및 논의 사항

타입 문제

원래 @types/gtag.js 타입 정의 패키지를 설치할 수 있는데, 왜 인지 모르겠지만 현재 프로젝트에서 인식을 못하는 문제가 있네요.. 😭 그래서 우선 타입 정의 파일을 그대로 선언했어요.

이벤트 로깅 방법

로그를 전송하는 logEvent 함수를 작성했어요.
아직 GA에서 기본 제공해주는 이벤트 외에 추가적인 이벤트를 로깅 하고 있진 않지만, 만약 특정 이벤트를 기록하고 싶다면 사용하면 좋을 것 같아요.

예시로 아래처럼 이벤트 로그를 전송하면

  const handleEvent = () => {
    logEvent('event', 'my_custom_event', {
      value: '으악 이벤트를 발생한다 One에서',
    });
  };

GA 대시보드에서 이렇게 확인할 수 있어요.

[github-actions]

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-wgjvlpoxqu.chromatic.com/
⏰ 배포 일시: Thu Apr 25 2024 17:44:55 GMT+0900

[github-actions]

🎮 React Preview 보러가기: https://dnd-10th-4-frontend-3fa3qjh7e-bbearcookies-projects.vercel.app
⏰ 배포 일시: Thu Apr 25 2024 17:45:21 GMT+0900

[easyhyun00]

사용자 이벤트를 로그로 전송해서 GA 에서 확인할 수 있군요!! 수고하셨습니다 👍👍👍