[#11] Google Analytics 적용

[inhachoi]

🔗 #11

🙋‍ Summary (요약)

• Google Analytics 적용

😎 Description (변경사항)

좀 더 자세한 정리내용은 밑의 링크로 확인 가능합니다 : )

• GA를 활용한 사용자 데이터 수치화 정리
• Google Analytics 보고서 링크

문제

SEO와 Open Graph를 활용해 사용자 유입을 개선했지만, 지인 대상 테스트로 정확한 데이터를 분석하지 못해 사용자 행동 기반의 정량적 분석 필요성을 느꼈다.

과정

• Google Analytics를 활용하여 “유입 경로”, “이탈률”, “사용 빈도가 높은 페이지” 등등을 수치화.
• 주요 코드

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SMXGZQRD0S"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-SMXGZQRD0S');
</script>

• gtag.js파일을 가져온다.
  • gtag는 사용자의 상호작용이나 및 페이지 이벤트를 모니터링하고 데이터를 Google의 분석 도구로 전송한다.
• dataLayer에 이벤트 정보를 축적해서 보내준다.
• GA에서 발급받은 추적 ID( 'G-SMXGZQRD0S')를 기반으로 GA 계정에 데이터를 전송한다.

결과

• 실시간으로 일부 기능들은 확인 가능하지만, 이탈률 같은 정보는 하루이상 지나야지 확인이 가능하다.

• 다국어가 지원된다면, 지역별 정보를 연관해서 사용할 수 있을듯 하다.

• 일부 주요 기능들

  • 최근 사용자
  • 브라우저 별 사용자
  • 국가 별 사용자
  • 사용자 유지율
  • 방문 페이지
  • 발생 이벤트

🔥 Trouble Shooting (해결된 문제 및 해결 과정)

GA vs GTM

• Google Analytics (GA)와 Google Tag Manager (GTM) 이 두가지 기능이 혼용되어 있어서 구분하기 힘들었다.
• 둘 다 테스트해보고, 한 사이트 대상으로만 할 것이기 때문에 GA로 선택

React에서는 react-ga4 라이브러리를 사용해야한다?

• 리액트는 SPA여서 따로 페이지별 처리를 위해서 라이브러리를 사용해야한다는 레퍼런스들이 많았음.
• 하지만 공식문서에는 따로 설명이 되어있지 않았음
• 찾아서 이것저것 다 해봤는데, 결국 리액트 라우터로 URL이 변경되면 이를 감지해서 페이지별 정보를 잘 찾아주는 것을 확인함.
• 추가적인 상세한 기능이 필요하다면 해당 라이브러리를 쓰거나 추가 설정이 필요하다고 한다. 하지만 현재는 필요없다고 판단.

🤔 Open Problem (미해결된 문제 혹은 고민사항)

[Honghyeonji]

옹 신기하네요. 수고하셨습니당 ❤

[lee0jae330]

구글 애널리틱스 적용 하시느라 고생많으셨습니다 ㅎㅎ <3