고정 헤더 영역
상세 컨텐츠
본문
일하던 중 동료로부터 질문이 왔다.
"혹시 누구누구 유저가 페이지 방문하고 머문 시간에 대해 알 수 있나요?"
로그를 따로 쌓아두고 있지 않은 시스템에서 현재 데이터베이스에 쌓여 있던 건 페이지 접속했던 시간 뿐이었어서 현재는 접속 시간만 볼 수 있다고 했다. 그래서 많은 로그들을 쌓고 싶은데 그러려면 로그 관리 시스템을 적용해야 하나 생각하다 보니 스케일이 점점 커져갔다. 일단 기본적으로 회사에서 이쪽에 투자를 많이 하는 편이 아니니 무료로 사용하면서 쉽게 적용할 수 있는 방법을 생각해 보다 결국 sentry와 google analytics로 좁혀졌다.
sentry는 서비스 단에서 에러 로깅에 자주 쓰이는데, 어떤 기기, 어떤 브라우저가 접속했는지까지 알 수 있고 에러가 생기게 된 이유를 좀 더 순차적으로 보기 편하게 되어 있다. 에러 로깅에 특화되어 있는 느낌이다.
구글 애널리틱스는 2020년도에 공식 릴리즈된 사용자 행동 분석 서비스로 유입, 스크롤, 검색, 클릭 등의 이벤트를 자동으로 수집해 주는 원래부터 서비스 운영 시 유저 행동 분석을 위해 만들어진 딱 목적에 맞는 서비스였다. 그래서 구글 애널리틱스로 결정했다.
우선 구글애널리틱스에 접속합니다.
로그인 또는 계정을 만들어 주고 아래와 같이 추적할 웹싸이트 주소를 등록해 주면 됩니다.
위의 과정을 거치면 아래와 같이 추적 ID를 쉽게 찾을 수 있습니다.
자! 이제 코드를 살펴보면!
현재 프론트엔드 코드는 Nextjs 기반이고 nodejs 에서 적용할 때는 거의 비슷하니 다른 시스템도 얼추 비슷하게 적용하면 될 걸로 보인다.
빠른 확인을 위해 Vercel 에서 제공하는 nextjs/examples/with-google-analtics를 기반으로 확인해 봤습니다.
우선 .env에 확인한 추적 ID를 NEXT_PUBLIC_GA_ID=<ID>를 넣어주고
lib 폴더를 만들어 안에 gtag.js를 아래와 같이 생성한다.
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url) => {
window.gtag('config', GA_TRACKING_ID, {
page_path: url,
})
}
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
window.gtag('event', action, {
event_category: category,
event_label: label,
value: value,
})
}
그리고 Nextjs에서는 레이아웃과 같이 공통으로 사용하는 부분을 설정할 수 있는 _app.js가 존재하는데 여기에 아래와 같이 설정해 준다.
import Head from 'next/head'
import { useRouter } from 'next/router'
import Script from 'next/script'
import { useEffect } from 'react'
import * as gtag from '../lib/gtag'
const App = ({ Component, pageProps }) => {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return (
<>
<Head>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</Head>
{/* Global Site Tag (gtag.js) - Google Analytics */}
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>
<Component {...pageProps} />
</>
)
}
export default App
이렇게 되면 페이지 변경할 때 routers.events.on, routers.events.off 일 때 gtag.pageview(url)을 통해 페이지 유입, 이탈 유형에 따라 로그를 수집할 수 있다.
하단 쪽에 Nextjs에서 제공하는 Script 태그에 stragegy 부분이 있는데, 옵션이 3가지가 있고 각각의 의미는 아래와 같다.
- beforeInteractive
페이지 상호작용하기 전 실행되어야 할 스크립트일 경우
- afterInteractive(default)
태그 매니저나 분석툴처럼 해당 페이지 상호작용 이후 가져와도 되는 경우
- lazyOnload
sns 채팅과 같이 유휴 시간을 기다릴 수 있는 스크립트의 경우
옵션 내용을 보면 알겠지만 afterInteractive를 선택하는 것이 좋다.
여기까지만 해도 유저 행동 분석에 지장이 없다.
추가로 이벤트 로그를 쌓고 싶다면 아래와 같이 초반에 추가해 둔 라이브러리에서 불러와 gtag.event 를 통해 이벤트도 등록할 수 있다.
import { Component } from 'react'
import Page from '../components/Page'
import * as gtag from '../lib/gtag'
export default class Contact extends Component {
state = { message: '' }
handleInput = (e) => {
this.setState({ message: e.target.value })
}
handleSubmit = (e) => {
e.preventDefault()
gtag.event({
action: 'submit_form',
category: 'Contact',
label: this.state.message,
})
this.setState({ message: '' })
}
render() {
return (
<Page>
<h1>This is the Contact page</h1>
<form onSubmit={this.handleSubmit}>
<label>
<span>Message:</span>
<textarea onChange={this.handleInput} value={this.state.message} />
</label>
<button type="submit">submit</button>
</form>
</Page>
)
}
}
이렇게 간단히 페이지 유입, 이탈, 이벤트 등록을 nextjs에 적용할 수 있습니다!
300x250
'Dev Type' 카테고리의 다른 글
| python requests InsecureRequestWarning 해결법 (0) | 2023.11.29 |
|---|---|
| 오픈소스 SecretOps Infisical (0) | 2023.11.28 |
| Naver Expert - 개발 외주 진행할 뻔한 후기 (2) | 2023.11.23 |
| Exception & Error Handling in Python For Professional (0) | 2023.09.26 |
| pd.read_csv(), pd.to_csv() -> Modin 👍 (0) | 2023.07.20 |
댓글 영역