[슬기로운 인턴생활] in 이마고웍스 6편 with google analytics API

또 다른 새로운 것을 배우는 한 주였다. 

내가 대학에서 배운고 공부한 것들이 언제쯤 도움이 될까 궁금하다.

아니 사실 내가 제대로 배운 것이 맞나 의문이 들기도 한다. 

나름 시험기간 한정 열심히 살았는데 머리 속에 제대로 남아 있는게 없다. 

그냥 대충 흐름과 구글링해도 맨 위 블로그에 가장 첫 줄에 나오는 정의 정도..??

 

사실 이번학기도 학교에서 지냈다면 더 막막했을 거 같다. 

이번 학기에 인턴을 하면서 학교에서 절대 배우지 못 할 것들을 정말 많이 배웠다. 

또한 이런 경험이 없었다면, 나는 더욱 더 심각한 말하는 감자가 되었을 것이 분명하다. 

아... 정정해야겠다.... 말도 못하는 감자....... 

 

무언가 하나라도 뛰어나게 잘하고 싶지만 참 쉽지 않은거 같다. 

매일 출/퇴근시간이면 나는 "수 많은 똑똑한 개발자 사이에서 내가 과연 살아남을 수 있을지...." 고민을 한다.

결론은 매번 도출되지가 않는다. 

 

언젠간 일을 내고 싶은데, 마음만 너무 앞서가는 것 같다. 

오늘부터라도 아니 내일부터라도 아니 다음주부터라도 보다 나은 삶을 사려고 노력을 해봐야지!

 

 

그럼 사담은 뒤로 넘기고 이번주에는 무엇을 했는지 기록을 해보려한다. 

 

우선 이번주는 GA4의 API를 불러오는 작업을 했다. 

GA4가 무엇의 약자인지도 몰라서 구글에 검색해본 것은 비밀이다. 

 

---

GA는 Google Analytics의 약자이다. 

이름에서 알 수 있듯, 구글에서 제공하는 통계 사이트이다. 

웹 브라우저 접속자, 접속시간, 클릭 횟수, 유입 경로들에 대한 통계를 제공하는 사이트이다. 

 

회사에서 다양한 웹 서비스를 제공하고 있다. 

때문에 많은 유저들을 모으고 확장하기 위해서는 객관적인 통계가 필요하다. 

이러한 통계들은 GA 사이트에서 한눈에 볼 수 있지만,

회사 웹들을 관리하는 B.O 사이트에서 함께 제공하면 보다 편하기 때문에 GA4에서 제공하는 API를 사내 웹 프로젝트와 연동해보았다. 

 

 

 

개발 환경: VScode
언어 :  JavaScript + Fastify
설치 패키지: @google-analytics/data
https://www.npmjs.com/package/@google-analytics/data 

@google-analytics/data

 

 

---

1. GCP 계정 생성

 

단순 GA 로그인 계정 말고 GCP 콘솔에서 서비스 계정을 추가해야한다. 

GCP 서비스 계정을 통해  API 호출시 인증할 수 있는 키를 다운 받아, 해당 키를 통하여 통신한다 .

 

발급 받은 keyFile파일을 잘 보관하자! 

해당 파일은 API 연동할 떄 꼭 필요하다.

 

 

2. GA와 GCP 계정 연동

GCP 계정에서 Google Analytics API 사용을 활성화 한다. 

 

 

 

이 두 과정을 마무리하면 기본 단계가 마무리 된다. 

위의 과정을 통해 생성한 서비스 계정(OAuth2 ID와 키 값이 발급된다.

해당 과정은 google에 ''google analytics API"라는 키워드로 검색하면 많은 참고 가능한 사이트들이 나온다.

다양한 블로그 중에서 편한 사이트를 선택하여 설정하면 될 것 같다. 

 

 

 

처음에 GA4와 GCP가 별도의 계정이 필요한 것을 알지 못했어서 삽질을 꽤 했다. 

또한 구글링 했을 때 대부분의 검색 결과가 GA4 이전 버전에서 연동을 설명해 놓아 혼란스러웠다. 

곧 있으면 GA4 이전 버전들은 사용이 중단된다고하니, 모두 GA4로 이용하시길!

 

 

 

---

 

다시 google analytics 사이트(https://analytics.google.com)로 들어와서 좌측 하단 끝

 

 

 

설정 버튼

 설정 버튼을 눌러주면 다양한 설정 메뉴들이 나타난다. 

그 중에서 가장 중요한 것은 바로 속성ID이다.

 영어로 되어 있는 경우 PropertyID로 나와있다. 

 

GA4이전 버전의 경우는 ViewID를 통하여 GA사이트에 연동이 되었지만 GA4에서 ViewID가 사라졌으므로 참고하시길!

(GA4 사이트에서 ViewID를 계속 찾고 있어서 이 역시 많은 시간이 낭비되었다ㅜ_ㅜ)

 

속성 설정탭의 우측 상단에 나와있다.

 

 

---

이제 모든 설정이 완료되었으니 본격적인 연동을 해보자.

프로젝트로 들어와서

앞서 설치한 패키지(@google-analytics/date)를 불러온다. 

앞서 발급 받은 json 키 파일 역시 불러온다. 

그리고 이 두 파일을 연결하여 키 파일을 통하여 GA사이트에 접근 가능하도록 만든다. 

 

 

이제 접근 권한을 얻었으니, 어떤 데이터를 불러올지 설정하면 된다. 

위의 예제는 오늘 날짜~30일전까지의 방문자수를 날짜에 따라 불러오는 코드이다. 

 

데이터 추출의 대상은 당연히 우리가 위에서 지정한 propertyID로 결정된다.

 

dateRange는 통계를 추출하고자하는 기간을 의미한다. 

dimensions는 '측정단위' 이다. 

metrics는 '측정 항목'이다. 

orderBys는 데이터들을 정렬하여 가져오는 역할을 한다. 

(위의 예시의 경우는 date항목이 증가하는 순서로 데이터를 불러온다.)

 

 

꽤나 다양한 항목들을 측정할 수 있는데, 옵션들은 https://developers.google.com/analytics/devguides/reporting/data/v1/api-schema

API Dimensions & Metrics  |  Google Analytics Data API  |  Google Developers

google Analytics에서 제공하는 문서에서 자세히 확인 가능하다. 

또한 측정 단위를 여러개로도 설정이 가능하니 참고 바란다!

 

 

 

마지막으로 불러온 데이터를 다음과 같이 forEach로 접근하여 result배열에 넣어주었다. result 배열을 return함으로서 해당 데이터들을 client측에서 전달 받을 수 있도록 구현했다.

 

포스트맨에서 살펴본 return 값

 

 

앞서 잠시 언급했듯 아래와 같이, 여러 측정 단위를 설정하였을 때의 return 값도 예시로 첨부한다. 

측정단위를 2개로 설정

 

 

이렇게 간단하게 GA4 API를 연동해 보았다. 

누군가에게 도움이 되었길!