본문으로 건너뛰기

GitHub Blog에 Google Analytics 적용 튜토리얼

 · reading-time-plural · 

블로그를 리브랜딩 하면서 Google Analytics 를 도입하게 되었는데 원리와 함께 왜 이렇게 생성해야 하는지에 대한 가이드 글이 없어서 직접 클릭을 통해 분석한 내용의 글을 작성하게 되었습니다.

처음으로 Google Analytics 를 시작하는 경우 네이밍과 같은 것을 아무렇게나 만들지 않고 도구를 이해를 기반으로 시작할 수 있는 좋은 가이드가 될 수 있다는 생각이 들었습니다.

깃허브 블로그와 같은 개인 블로그에 GA 를 어떻게 붙이고 왜 그렇게 디자인했는가에 대해 소개해 보도록 하겠습니다.

TL;DR

  1. Google Analytics 는 브랜드 및 서비스를 종합적으로 관리하고 insight를 제공할 수 있는 분석도구 입니다.
  2. 서비스의 대한 정보를 가공해서 Google Analytics 에게 전달하면 분석을 통해 insight 를 도출해줍니다.
  3. 우리가 해야할 것은 올바르게 Google Analytics 에게 데이터를 전달하는 것입니다.

Google Analytics란?

서비스 및 브랜드를 위한 종합 관리 도구라고 생각할 수 있습니다.

필자가 테스트를 위해서 애널리틱스 계정을 둘러보았을 때 엄청나게 방대한 기능을 제공한다는 느낌을 받을 수 있었습니다.

각종 앱의 대한 insight를 한 곳으로 종합해서 분석 정보를 받을 수 있는 SaaS 라고 생각해도 됩니다.

앱의 대한 범주는 웹앱과 웹 사이트와 같은 웹 종류가 될 수도 있고 안드로이드 앱 iOS 앱과 같은 네이티브 앱이 될 수도 있습니다.

애널리틱스 계정과 속성의 관계는?

애널리틱스를 사용하기 위해서는 기본적으로 계정속성 및 앱 이라는 것을 알아야 합니다.

필자가 구글 애널리틱스 글을 볼 때 가장 햇갈리고 이해가 안되었던 부분이 이부분입니다.

대부분 큰 이유와 설명 없이 계정의 경우 그냥 블로그 이름으로 지정을 하던데 이는 시멘틱한 운영 방법은 아니라고 생각합니다.

그래서 이부분을 알기 위해서 이것 저것 클릭하면서 많은 실험을 해보게 되었습니다.

해보니까 이해가 되고 쉽더라…!

애널리틱스 계정

애널리틱스 계정 의 경우 회사 혹은 브랜드 단위라고 생각하면 됩니다.

예를 들어 parkgang 라는 개인 브랜드가 있다면 하위로 blog , 포트폴리오 , 이외 네이티브 앱 이 있다면 이런 것들이 속성 및 앱 으로 들어가게 됩니다.

회사를 예를 들어 NAVER 라고 한다면 속성 및 앱네이버 카페 , 네이버 웹툰 과 같은 것이 들어올 것입니다.

구글 애널리틱스에서도 계정 부분의 설정을 보면 계정 엑세스 관리 라고 해서 권한 관리를 폭 넓게 할 수 있는 것을 볼 수 있습니다.

위의 Interface만 보더라도 큰 범위내에서 관리되는 영역임을 예상할 수 있습니다.

속성 및 앱

앞서 속성 및 앱서비스 혹은 이라고 소개했습니다.

공식문서에도 이와 같이 설명하고 있습니다.

그래서 속성 매뉴를 보면 여러 데이터를 가져올 수 있는 기능을 제공하고 있습니다.

해당 글을 보는 분들은 대부분 blog 와 같은 웹 사이트를 중점적으로 운영하실 것이라고 생각하니 위 매뉴 중에서 데이터 스트림 , Search Console 링크 는 익숙하실 것이라고 생각합니다.

대충 느낌이 오시지 않나요? 한개의 서비스에 관련된 여러 데이터를 종합해서 볼 수 있다는 것을!

데이터 스트림 을 클릭해보면 웹 사이트의 insight를 가져올 수 있는 방법이 가이드 되고 있습니다.

정말 많은 정보를 가져오는 것을 볼 수 있습니다. 가슴이 웅장해집니다.

이번에는 Search Console 링크 를 볼까요? 아마 github pages 으로 직접 블로그를 개발해 운영한다면 익숙한 서비스 일 것 입니다.

info

Search Console 은 구글 검색 엔진에 등록해주는 도구입니다.

계정을 클릭해보니 제가 운영하고 있는 블로그가 Search Console 에 등록되어 있다고 표시되는 것을 확인할 수 있네요.

이쯤 보고 공식 문서 한번 읽어보기

이외 공식문서에 예시와 함께 아주 잘 설명해주고 있습니다. 보시는 것을 추천합니다.

위의 공식 문서를 읽으면 알 수 있지만 계정속성 의 관계는 자유입니다. 제가 설명한 것은 일반적은 개인 브랜드 범위 내에서 가능한 시나리오 이었습니다.

이외

한 구글 계정에서 여러개의 계정 을 만들 수 있어요

Google Analytics 에서 처음에 계정 을 만들라고 하니까 뭔가 한개만 만들 수 있는거 아닌가? 하고 필자는 엄청 했갈렸거든요… 사실 그거 때문에 해당 아티클이 게시되는 것 이기도 합니다.

결론은 하나의 구글 계정에 여러개의 계정 을 만들 수 있으니까 참고하세요!

걱정하지 말고 계정 을 만들고 테스트를 해봅시다.

유니버설 애널리틱스 라고 또 있던데 이건 뭔가요?

최신 Google AnalyticsGoogle 애널리틱스 4 라고 불립니다.

이전에 존재하던게 유니버설 애널리틱스 속성 으로 알고 있어요.

속성을 생성할 때 2023년 7월 1일부터 유니버설 애널리틱스 속성이 데이터를 수집하지 않습니다. 대신 Google 애널리틱스 4 속성을 만드는 것이 좋습니다. 으로 안내하기 때문에 기본 값인 Google 애널리틱스 4 으로 만드는 것이 좋을 겁니다.

그리고 Google Search Console 에서는 유니버설 애널리틱스 속성 만 연결할 수 있다고 안내되고 있는데

다시 찾아보니 공식문서에도 지원한다고 설명하고 있네요.

또한, 테스트 해보니 Google 애널리틱스 4 에서도 Google Search Console 연결의 완료까지는 안헀지만 마지막 단계 까지는 문제 없이 넘어가졌습니다.

만들어진 계정속성 정보를 변경할 수 있나요?

계정 이름이나 국가, 데이터 공유 설정 등을 변경할 수 있고 속성 의 경우 이름, 업종 카테고리, 보고 시간대, 표시 통화 등을 변경할 수 있습니다.

근데 역시 제일 중요한건 이름 이 변경 가능하다는 것 아니겠어요? 처음부터 네이밍 걱정하지 않아도 됩니다!

Blog에 GA4를 도입해보자

위의 내용을 종합해서 실제 운영 중인 blog에 Google Analytics 을 도입해보도록 하겠습니다.

계정 및 속성 생성

아래의 사진을 참고하여 계정과 속성을 생성하도록 합니다.

계정 데이터 공유 설정 의 경우 따로 건드리지 않고 기본 값으로 체크 했습니다.

알맞게 입력합니다.

알맞게 입력합니다.

약관에 동의합니다.

데이터 스트림 설정

Blog 제품에 Script 추가

이제 GA4 를 생성했으니 데이터를 전송해야겠죠? 웹 스트림의 측정 ID 부분이 중요합니다.

필자는 docusaurus 으로 blog가 개발되어 📦 plugin-google-analytics 를 이용해서 손쉽게 추가 할 수 있었는데 각 제품 형태에 맞게 추가하시면 됩니다.

가장 바닐라스럽게 처리하려면 GA에서 제공하는 스크립트를 사용하면 될 것이고 이외도 관련 많은 패키지들이 존재할 것 입니다.

데이터가 잘 들어갔는지 확인

블로그를 한번 접속하고 옵니다. 그런 뒤 애널리틱스에 오면 잘 측정되는 것을 확인할 수 있습니다.

Search Console 링크 추가

Search Console도 추가해주도록 합니다.

자! 이제 데이터를 열심히 Google Analytics 에 바췄으니 여러 데이터를 가공해서 insight을 도출해줄 것입니다.

보고서를 어떻게 가공할 지는 여러분들의 손에 달렸습니다.

UA도 생성하자

원래 GA4 만으로 하려고 했지만 구글 애드센스 연결의 경우 UA 만 지원한다는 것을 알게되었습니다.

그리고 제가 GA4 에서 Ads 라고 불린게 구글 애드샌스 인 줄 알았는데 이는 구글 애즈 라는 완전 다른 서비스 입니다…

찾아보니까 아직 GA4 에 지원 계획은 없다고 하고 UAGA4 2가지를 함께 사용하는 것이 절충안 인 거 같습니다.

관련 질문 내용

UA 는 2023년 7월 1일 부터 중단 예정이지만 그때까지라도 UA 의 정보와 함께 구글 에드센스 정보를 보는 것이 좋다고 판단하여 UA 도 다시 만들었습니다.

UA 생성 방법

UA 만드는 과정은 GA 와 동일한데 고급 옵션에 UA 생성을 클릭하면 됩니다.

Search Console 링크 추가

Search Console 속성이 GA4 에 연결된 경우 UA 에는 연결하지 않는도록 합니다.

Search Console 속성이 Google 애널리틱스 UAGoogle 애널리틱스 4 속성에 모두 연결된 경우 Search Console 인사이트에는 UA 속성의 데이터만 표시하게 되어 UA 는 언젠가 종료될 예정이니 GA4 만 보는 것이 더 합리적 일 것입니다.

아래의 글은 GA4UA 모두 Search Console 연결 시 어떤 문제가 발생하는지 서술하기 위해 작성되었습니다.

생성된 UA 도 Search Console 링크를 추가해주도록 합니다.

UA 에 추가전 GA4 와 비교를 위해 본다면 GA4 만 추가했는 땐 Search Console에서 아래와 같이 표시되고 있었습니다.

UA 에서 Search Console 링크를 추가해봅시다.

생성한 UA 를 선택합니다.

아래와 같이 UA 와 GA4 모두 잘 연결된 것을 확인할 수 있습니다.

연결하고 보니까 Search ConsoleUA , GA4 모두 연결된 경우 GA4 통계를 보기가 곤란하네?

Search ConsoleUA , GA4 모두 연결하고 보니까 상단에 위와 같은 안내 메시지가 나오고 있었습니다.

Google 애널리틱스 연결 요청

Search Console 속성이 Google 애널리틱스 UAGoogle 애널리틱스 4 속성에 모두 연결된 경우 Search Console 인사이트에는 UA 속성의 데이터만 표시된다 라는 건데 전 GA4 정보를 우선해서 보고 싶음으로 GA4 만 연결하도록 변경하였습니다.

어짜피 GA4 만 연결해도 Search Console 정보는 볼 수 있으니까 문제가 없고 UA 는 언젠가 종료될 예정이니 GA4 만 보는 것이 합리적 이라고 생각했습니다.

애드센스 링크 추가

UA 를 추가한 이유죠 애드센스 링크를 추가하도록 합니다.

마무리

이와 같은 제품에 분석 도구를 도입하는 것은 중요한 작업입니다.

서비스를 관리하고 운영한다는 것은 끈기와 세심한 노력도 중요하지만 현재 나의 서비스가 잘 운영되고 성장 하고 있는가와 같은 지표 정보는 중요합니다.

이는 현재 나의 상황을 알 수 도 있으며 앞으로의 성장 동력 으로써도 사용됩니다.

React 만 배워도 웹앱 , 웹 사이트 와 더불어 일렉트론을 이용해 Client Program 을 손쉽게 만들 수 있는 세상이고 Flutter 만 배워도 Android , iOS 앱을 손쉽게 만들고 배포할 수 있는 세상입니다.

즉, 개인 서비스를 와 같은 Application 을 손쉽게 만들 수 있는 세상인데 이러한 분석 도구를 잘 배워놓으면 서비스 론칭에 대한 자신감을 가질 수 있습니다.

필자도 Google Analytics 를 살펴보면서 네이티브 앱을 공부하고 싶은 생각이 많아졌습니다. 어떻게 로그가 쌓일까? 이런 호기심으로 말이죠 🤩

깃허브 블로그에 처음으로 Google Analytics 도입할 때 막막했던 심정으로 작성된 글인데 누군가 한태 도움이 되었으면 좋겠네요. 읽어주셔서 감사합니다.


parkgang