스터디 블로그 연동 - giscus, GA

uglyduck.dev·2022년 4월 2일

야크털 깎기 🐃

목록 보기

4/4

저번에 이어서 스터디 블로그를 netlify로 정적 웹페이지를 작업하는 것까지 마무리하고,
analytics(GA), giscus(github discussions open source) 연동하는 작업만이 남았다.

Analytics

보통 벨로그 같은 블로그 서비스에서는 자체 분석 기능을 제공하지만, 분석 기능을 제공하지 않는 커스텀 블로그의 경우에는 Analytics를 따로 setup 해줘야된다.
anlytics platform은 다양하게 있다. (가격 정책 조심해야 함)

GA는 funnel 분석에 사용한 경험이 있어서, 가능한 빠르게 연동 가능한 것을 선정했다.

많은 기능은 필요 없어서 단순하게 1페이지만 보고 싶은데, GA는 너무 많은 분석 정보를 제공하는게 그렇게 필요한가 싶었다. 또 GA는 확실히 대시보드가 열리기까지 뭔가 페이지가 너무 느린 느낌(무거움)에 다른걸로 바꾸는게 좋을 듯하다.

~~일단 GA는 연동했고, 빠른 시일 내에 측정 도구를 바꿔 볼 예정이다.~~

Google Analytics

Google Analytics에 접속 후 측정시작을 누르고, 설정을 해준다.

계정 설정
- 계정 이름 - 사용할 계정 이름을 기입해준다.
- 계정 데이터 공유 설정 - google에 데이터를 공유하는 설정인데, 원하는 항목에 체크한다.
속성 설정
- 측정할 애플리케이션의 속성을 추가한다.
- 위의 계정 설정과 마찬가지로 추후에 수정이 가능하다.
비즈니스 설정
- 분석에 필요한 측정 규모를 지정한다.
데이터 스트림 선택
- 분석 측정을 하기 위한 플랫폼을 설정해준다.
- 본인은 웹 환경을 측정하기 위해서 웹을 선택했다.
데이터 스트림 환경 설정
- 본인이 측정하고자 하는 서비스의 URL을 설정해준다.
환경 설정 확인
- 최종적으로 설정된 스트림과, 측정 ID 값을 확인한다.
- 측정 ID 값을 확인(UA-000000-2 or G-XXXXXXX)하고, 연결하고자 하는 플랫폼과 연동해준다.
분석 측정 방법 선택하기
- 해당 script를 본인 애플리케이션에 삽입한다.
- 이외에 플랫폼에 따라 SDK를 설치해서 세밀한 분석을 하는 방법도 있다.
  - 기본적으로 analytics에서 측정해주는 항목도 있고, logEvent를 통한 세밀한 측정이 가능하다.
  - 이탈율, 페이지 전환률 측정, 리텐션 측정, 퍼널 분석 등

참고 자료

보통 google analytics에서 제공하는 공식 문서를 참고하면서 setup을 진행했지만, google에서 기본 가이드를 강의 형태도 제공하는데 참고하면 좋을 것 같다.
- [Analytics Academy] https://analytics.google.com/analytics/academy

giscus

utterances, disqus도 있지만, github discussions 기반의 giscus를 연동하는게 나을 것 같아서 giscus를 선택했다.
연동하는데는 크게 어렵지 않아서 analytics와 마찬가지로 본인이 선택한 옵션대로 script generator를 지원해서 giscus를 활성화 할 수 있다.

giscus 공식 사이트

기타 설정(CSP, env setting)

CSP

이외에도 야크털을 좀 깎았는데 giscus를 설정할 때, CSP(Conetent-Security-Policy) 설정이 필요하다는 경고창을 보고 header를 설정해줬다.
cat

CSP는 대충 XSS, Data injection 등의 보안 취약점을 완화시키기 위해 설정할 수 있는 meta tag인데 털릴 정보는 없으나 설정함.. ~~(특 쫄보임)~~

mdn 문서를 참고해보자면,

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src https://*; child-src 'none';">

위와 같이 <meta> 요소를 사용하여 정책을 설정할 수 있다.

Content value에는 다양한 옵션이 존재한다.

CSP value 참고 자료

최종적으로 Example usecase를 참고하여 default-src에 GA와 giscus app, localhost를 화이트리스트로 추가했다.

env(environment variable)

API Key나, ID, PW 등 외부에 노출되지 말아야하는 key pair들의 정보는 env 파일로 따로 관리해야하는데, 작성 후에 외부 노출을 방지하기 위해 .gitignore에서 블랙 리스트를 추가해서 관리하는 편이다.

env prefix, postfix를 통해서 이름 규칙을 정해주고 gihub에 push 되지 않도록 설정
정 올리고 싶으면, env.example 파일 생성해서 key 값만 설정하고 참고 형태로 관리해도 됨

웬만하면 react project나 기타 프레임워크에서 프로젝트 init시에 gitignore에 설정되어 있느니, env.production, env.development와 같이 cross-env plugin을 쓰거나, react dot env를 쓸때에는 build script 등 따로 설정해야할 부분은 꼭 체크하고 넘어가자!