Umami / GA 설치

Umami 설치

블로그에 통계를 보기 위해 Google Analytics를 연동 시키는 것은
왠지 오버 엔지니어링의 느낌이 든다.
이 블로그로 수익을 창출할 것이 아니고 그냥 단순히 조회수가 궁금해서 설치하는 것 뿐인데
그래서 umami라는 사이트 https://us.umami.is 를 이용해보기로 하였다.

umami cloud를 위해 회원가입하고 인증 절차를 마치면
어떤 <script> 코드를 <head>에 넣으라고 나온다.

현재 이 Nextra의 코드의 pages 폴더에 javascript 파일이 전혀없는 상태이지만
Nextra 공식 문서에 기본 파일을 오버라이딩하는 방법이 나와있다.
참조: https://nextra.site/docs/guide/custom-css

그래서 umami에서 알려준 코드를 pages/_app.js 파일에 다음과 같이 넣었다.

import Script from 'next/script';  // Import Script from Next.js
 
function MyApp({ Component, pageProps }) {
	return (
		<>
			<Script
				src="https://cloud.umami.is/script.js"
				data-website-id="xxxxx-xxxx-xxxx"  {/* 제시된 코드 */}
				strategy="lazyOnload"
			/>
			{/* children 넘겨주기 */}
			<Component {...pageProps} />
		</>
	);
}
 
export default MyApp;

배포한 후 내가 내 블로그를 조회하니 실시간으로 통계가 나온다.

설치하고 보니 내가 개발을 위해 localhost에서 실행한 것까지 통계로 잡힌다.

차라리 GA가 훨씬 나은 듯 보인다.

GA 설치

Google Analytics에서 접속.
GA의 메뉴 구성 참 UX가 짜증난다.
일단 계정을 만들고 검색창에다가 ‘tag’라고 친다. → 데이터 스트림 메뉴 클릭
→ 내 블로그 클릭 → 스크롤해서 제일 밑에 ‘태그 안내 보기’ 클릭 → 설치 안내에서 ‘직접 설치’ 클릭하면 코드가 나온다.
이거 그대로 복사 붙이기 하니깐 잘 안 된다. 코드를 좀 변형해줘야한다.

/pages/_app.js에 다음과 같이 변형해주었다

	return (
		<>
			{/*<!-- Google tag (gtag.js) -->*/}
			<Script
				strategy="afterInteractive"
				src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
			/>
			<Script id="google-analytics" strategy="afterInteractive">
				{`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXXXXX');
        `}
			</Script>
			{/* Umami Analytics Script */}
			<Script
				src="https://cloud.umami.is/script.js"
				data-website-id="xxxxxxx-3e2b-470d-bda6-xxxxxxxxxxxx"
				strategy="lazyOnload"
			/>

배포한 후에 테스트를 눌러 잘 동작하는지 본다.