[유지보수] 구글 애널리틱스로 방문자 확인하기

발단

이번 스프린트 고급 요구사항이 사이트에 구글 애널리틱스 설정해서

방문자 수를 확인할 수 있게 하는 것이었다

 

이건 스노로즈 인프라쪽에서도 해달라고 했었는데

잘못 건드리면 큰일날까봐 대장인 희원님한테 전달만했던 사항이었다.

서버 비용 계산하는 것과 연관되어 있어서

인프라랑 회계랑 밀접하게 관련되어 있나 보다. 

 

하는 방법

https://support.google.com/analytics/answer/9304153?hl=ko

웹사이트 및 앱용 애널리틱스 설정 - 애널리틱스 고객센터

 

1. 애널리틱스 계정 생성하기

- navigate to Admin > Create > Property 

- enter the site details

- click "Create" to generate a Measurement ID

 

2. 프로젝트에 필수 태그 추가하기

각 html 태그에 이 태그를 head 바로 밑에 넣어줘야한다. 

 

솔직히 모든 html 파일에 이 태그를 넣는 것은 번거롭고 코드 양도 많아져서 귀찮다. 

따로 js 파일을 생성해서 이 태그를 넣는 코드를 작성할까 생각했는데

const script1 = document.createElement("script");
script1.async = true;
script1.src = "https://www.googletagmanager.com/gtag/js?id=G-9E4PEJJ0ZT";

const script2 = document.createElement("script");
	script2.innerHTML = `window.dataLayer = window.dataLayer || [];
	function gtag() {
  		dataLayer.push(arguments);
	}
	gtag("js", new Date());
	gtag("config", "G-9E4PEJJ0ZT");`

document.head.insertAdjacentHTML("afterbegin", script2);
document.head.insertAdjacentHTML("afterbegin", script1);

⭐ 근데 이런식으로 나중에 코드를 추가하면, google analytics이 제대로 작동 안 할수도 있다고 한다. 

 

만든 사람 의도가 head에 직접 넣는것이기 때문에 어쩔수 없는것 같다...

그래도 html 파일이 많아서 일일이 넣기 귀찮을 경우를 위해서 

한번에 다 적용할 수 있게 해주는 명령어는 있나보다

https://dev.to/mohsenkamrani/add-google-analytics-tracking-code-to-all-pages-automatically-19d5

Add Google Analytics Tracking Code to All Pages Automatically

 

3. 추가한 내용 배포되어 있는 사이트에도 적용하기

dev내용을 main에 반영했다. 

 

결과

그러면 이런 결과를 얻을 수 있다. 

배포된 사이트 한바퀴 돌고 오면 숫자가 올라가는 것을 확인할 수 있다.

이번 sprint의 구글 애널리틱스 페이지는 다음과 같다

https://analytics.google.com/analytics/web/#/a389487257p530696009/realtime/pages?params=_u..nav%3Dmaui

Redirecting...

https://panda-market-minju.netlify.app/screens/auth/signup/signup

Document

 

추가 코멘트

대영님이 개발자 도구를 사용하면 키가 보여서 그거 숨기는 작업을 하고 있다고 했다. 

들어가보니 진짜 보이고 있었다

그래서 나도 작업해야하나 고민하던 찰나,

멘토님이 이 키 가지고는 할 수 있는게 아무것도 없기 때문에 노출되어도 상관없다고,

구글에서 의도적으로 노출하는거라고 한다.