+
{isLoading ? '' : `${totalElements.toLocaleString()}건`}
- J-POP 아티스트 내한 공연 일정 모음. 공연명·아티스트 검색과 공연 상태별 필터
{/* 검색 */}
diff --git a/src/pages/ConcertsPage.module.css b/src/pages/ConcertsPage.module.css
index e6a860e..4845c5b 100644
--- a/src/pages/ConcertsPage.module.css
+++ b/src/pages/ConcertsPage.module.css
@@ -20,17 +20,6 @@
letter-spacing: 0.01em;
}
-.pageHeader {
- margin-bottom: 0.5rem;
-}
-
-.pageIntro {
- margin: 0 0 1.5rem;
- font-size: 0.9375rem;
- line-height: 1.5;
- color: var(--color-text-muted);
-}
-
/* ── 검색 ── */
.searchWrap {
position: relative;
@@ -127,15 +116,6 @@
padding: 1.5rem 1rem 3rem;
}
- .pageHeader {
- margin-bottom: 0.375rem;
- }
-
- .pageIntro {
- margin-bottom: 1.25rem;
- font-size: 0.8125rem;
- }
-
.grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
diff --git a/src/utils/analytics.js b/src/utils/analytics.js
index 5981eae..e34c11d 100644
--- a/src/utils/analytics.js
+++ b/src/utils/analytics.js
@@ -1,67 +1,64 @@
const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID
-const COLLECT_URL = 'https://www.google-analytics.com/g/collect'
-const CLIENT_ID_KEY = 'ga_client_id'
-const SESSION_KEY = 'ga_session'
-const SESSION_TIMEOUT_MS = 30 * 60 * 1000
-// gtag.js를 통한 정상 로드·dataLayer 전달까지는 확인됐지만, 라이브러리
-// 내부 태그 실행 엔진이 히트를 한 건도 전송하지 못하는 문제가 있어(원인 불명,
-// GA4 DebugView에 "config 명령을 기다리는 중" 상태로 계속 멈춰 있음),
-// gtag.js를 거치지 않고 GA4 Measurement Protocol(g/collect)을 직접 호출한다.
-function getClientId() {
- let clientId = localStorage.getItem(CLIENT_ID_KEY)
- if (!clientId) {
- clientId = `${Math.floor(Math.random() * 2147483647)}.${Math.floor(Date.now() / 1000)}`
- localStorage.setItem(CLIENT_ID_KEY, clientId)
- }
- return clientId
+// gtag.js는 dataLayer에 arguments 객체가 들어와야 명령으로 인식하고 일반 배열은
+// 무시한다. rest 파라미터(...args)로 배열을 넣으면 config가 실행되지 않아 히트가
+// 한 건도 전송되지 않는다.
+function gtag() {
+ window.dataLayer.push(arguments)
}
-function getSessionId() {
- const now = Date.now()
- const stored = JSON.parse(localStorage.getItem(SESSION_KEY) || 'null')
- if (stored && now - stored.lastActive < SESSION_TIMEOUT_MS) {
- localStorage.setItem(SESSION_KEY, JSON.stringify({ id: stored.id, lastActive: now }))
- return { id: stored.id, isNewSession: false }
- }
- const id = Math.floor(now / 1000).toString()
- localStorage.setItem(SESSION_KEY, JSON.stringify({ id, lastActive: now }))
- return { id, isNewSession: true }
+// 검색어(q)는 사용자가 자유 텍스트로 입력하는 값이라 이메일·전화번호 등이
+// 섞여 들어올 수 있어 GA4로 전송되는 경로에서 제외한다.
+export function sanitizeSearch(search) {
+ const params = new URLSearchParams(search)
+ params.delete('q')
+ const query = params.toString()
+ return query ? `?${query}` : ''
+}
+
+// 같은 사이트에서 새 탭 등으로 진입하면 document.referrer에 검색어가 포함된
+// 전체 URL이 담기므로 정제한다. 외부 유입 경로는 그대로 둔다.
+function sanitizeInitialReferrer() {
+ if (!document.referrer) return null
+ const referrer = new URL(document.referrer)
+ if (referrer.origin !== window.location.origin) return null
+ return `${referrer.origin}${referrer.pathname}${sanitizeSearch(referrer.search)}`
}
-function sendHit(params) {
+export function initGA() {
if (!GA_MEASUREMENT_ID) return
- const { id: sessionId, isNewSession } = getSessionId()
- const search = new URLSearchParams({
- v: '2',
- tid: GA_MEASUREMENT_ID,
- cid: getClientId(),
- sid: sessionId,
- ...(isNewSession && { _ss: '1' }),
- ...params,
- })
- const url = `${COLLECT_URL}?${search.toString()}`
+ const script = document.createElement('script')
+ script.async = true
+ script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`
+ document.head.appendChild(script)
- if (navigator.sendBeacon) {
- navigator.sendBeacon(url)
- } else {
- fetch(url, { method: 'GET', keepalive: true, mode: 'no-cors' })
- }
+ window.dataLayer = window.dataLayer || []
+ gtag('js', new Date())
+ // page_view는 PageViewTracker가 검색어를 제거한 경로로 직접 전송한다.
+ // config에 page_location을 넣으면 이후 gtag('set')보다 우선해 이전 주소가 남으므로 넣지 않는다.
+ gtag('config', GA_MEASUREMENT_ID, { send_page_view: false })
}
+let currentPageLocation = null
+
export function trackPageView(pagePath, pageTitle) {
- sendHit({
- en: 'page_view',
- dl: `${window.location.origin}${pagePath}`,
- dt: pageTitle,
- })
+ if (!GA_MEASUREMENT_ID) return
+
+ // gtag.js는 기본적으로 현재 URL(검색어 q 포함)을 page_location으로, SPA 이동 시
+ // 직전 URL을 page_referrer로 모든 이벤트에 붙이므로, 둘 다 정제된 주소로 전역 고정한다.
+ const pageLocation = `${window.location.origin}${pagePath}`
+ if (pageLocation !== currentPageLocation) {
+ const pageReferrer = currentPageLocation ?? sanitizeInitialReferrer()
+ if (pageReferrer) gtag('set', { page_referrer: pageReferrer })
+ currentPageLocation = pageLocation
+ }
+ gtag('set', { page_location: pageLocation, page_title: pageTitle })
+ gtag('event', 'page_view')
}
export function trackEvent(name, params = {}) {
- const eventParams = {}
- Object.entries(params).forEach(([key, value]) => {
- eventParams[typeof value === 'number' ? `epn.${key}` : `ep.${key}`] = value
- })
- sendHit({ en: name, ...eventParams })
+ if (!GA_MEASUREMENT_ID) return
+
+ gtag('event', name, params)
}
diff --git a/src/utils/analytics.test.js b/src/utils/analytics.test.js
new file mode 100644
index 0000000..f79ed16
--- /dev/null
+++ b/src/utils/analytics.test.js
@@ -0,0 +1,294 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const GTAG_SRC = 'https://www.googletagmanager.com/gtag/js?id=G-TEST'
+
+async function loadAnalytics(measurementId) {
+ vi.stubEnv('VITE_GA_MEASUREMENT_ID', measurementId)
+ vi.resetModules()
+ return import('./analytics')
+}
+
+function pushedCommands() {
+ return window.dataLayer.map((item) => Array.from(item))
+}
+
+afterEach(() => {
+ delete window.dataLayer
+ document.head.innerHTML = ''
+ vi.unstubAllEnvs()
+})
+
+describe('initGA', () => {
+ it('측정 ID가 없으면 스크립트를 삽입하지 않음', async () => {
+ const { initGA } = await loadAnalytics('')
+
+ initGA()
+
+ expect(document.head.querySelector('script')).toBeNull()
+ })
+
+ it('측정 ID가 없으면 dataLayer를 만들지 않음', async () => {
+ const { initGA } = await loadAnalytics('')
+
+ initGA()
+
+ expect(window.dataLayer).toBeUndefined()
+ })
+
+ it('측정 ID가 있으면 gtag.js 스크립트를 async로 head에 삽입', async () => {
+ const { initGA } = await loadAnalytics('G-TEST')
+
+ initGA()
+
+ const script = document.head.querySelector('script')
+ expect(script.src).toBe(GTAG_SRC)
+ expect(script.async).toBe(true)
+ })
+
+ it('측정 ID가 있으면 js, config 순으로 명령을 push', async () => {
+ const { initGA } = await loadAnalytics('G-TEST')
+
+ initGA()
+
+ const [jsCommand, configCommand] = pushedCommands()
+ expect(window.dataLayer).toHaveLength(2)
+ expect(jsCommand[0]).toBe('js')
+ expect(jsCommand[1]).toBeInstanceOf(Date)
+ expect(configCommand).toEqual(['config', 'G-TEST', { send_page_view: false }])
+ })
+
+ it('config에 page_location을 넣지 않음', async () => {
+ const { initGA } = await loadAnalytics('G-TEST')
+
+ initGA()
+
+ const configParams = pushedCommands()[1][2]
+ expect(configParams).not.toHaveProperty('page_location')
+ })
+
+ it('dataLayer에 배열이 아닌 arguments 객체를 push', async () => {
+ const { initGA } = await loadAnalytics('G-TEST')
+
+ initGA()
+
+ window.dataLayer.forEach((item) => {
+ expect(Array.isArray(item)).toBe(false)
+ expect(Object.prototype.toString.call(item)).toBe('[object Arguments]')
+ })
+ })
+
+ it('기존 dataLayer가 있으면 유지한 채 이어서 push', async () => {
+ const { initGA } = await loadAnalytics('G-TEST')
+ const existing = { event: 'gtm.js' }
+ window.dataLayer = [existing]
+
+ initGA()
+
+ expect(window.dataLayer[0]).toBe(existing)
+ expect(window.dataLayer).toHaveLength(3)
+ })
+})
+
+describe('trackPageView', () => {
+ beforeEach(() => {
+ window.dataLayer = []
+ })
+
+ it('측정 ID가 없으면 아무것도 push하지 않음', async () => {
+ const { trackPageView } = await loadAnalytics('')
+
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+
+ expect(window.dataLayer).toHaveLength(0)
+ })
+
+ it('측정 ID가 있으면 set으로 정제된 주소·제목을 지정한 뒤 page_view 이벤트를 push', async () => {
+ const { trackPageView } = await loadAnalytics('G-TEST')
+
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+
+ expect(pushedCommands()).toEqual([
+ ['set', { page_location: `${window.location.origin}/artists/1`, page_title: 'YOASOBI | Coming' }],
+ ['event', 'page_view'],
+ ])
+ })
+
+ it('최초 호출이면 page_referrer를 set하지 않음', async () => {
+ const { trackPageView } = await loadAnalytics('G-TEST')
+
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+
+ const setCommands = pushedCommands().filter(([command]) => command === 'set')
+ expect(setCommands).toEqual([
+ ['set', { page_location: `${window.location.origin}/artists/1`, page_title: 'YOASOBI | Coming' }],
+ ])
+ })
+
+ it('다른 경로로 호출하면 직전 주소를 page_referrer로 page_location보다 먼저 set', async () => {
+ const { trackPageView } = await loadAnalytics('G-TEST')
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+ window.dataLayer = []
+
+ trackPageView('/concerts/2', 'YOASOBI 내한 공연 | Coming')
+
+ expect(pushedCommands()).toEqual([
+ ['set', { page_referrer: `${window.location.origin}/artists/1` }],
+ [
+ 'set',
+ { page_location: `${window.location.origin}/concerts/2`, page_title: 'YOASOBI 내한 공연 | Coming' },
+ ],
+ ['event', 'page_view'],
+ ])
+ })
+
+ it('같은 경로로 재호출하면 page_referrer를 다시 set하지 않음', async () => {
+ const { trackPageView } = await loadAnalytics('G-TEST')
+ trackPageView('/artists/1', 'Coming')
+ trackPageView('/concerts/2', 'Coming')
+ window.dataLayer = []
+
+ trackPageView('/concerts/2', 'YOASOBI 내한 공연 | Coming')
+
+ expect(pushedCommands()).toEqual([
+ [
+ 'set',
+ { page_location: `${window.location.origin}/concerts/2`, page_title: 'YOASOBI 내한 공연 | Coming' },
+ ],
+ ['event', 'page_view'],
+ ])
+ })
+
+ it('dataLayer에 arguments 객체를 push', async () => {
+ const { trackPageView } = await loadAnalytics('G-TEST')
+
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+
+ window.dataLayer.forEach((item) => {
+ expect(Array.isArray(item)).toBe(false)
+ expect(Object.prototype.toString.call(item)).toBe('[object Arguments]')
+ })
+ })
+})
+
+describe('trackEvent', () => {
+ beforeEach(() => {
+ window.dataLayer = []
+ })
+
+ it('측정 ID가 없으면 아무것도 push하지 않음', async () => {
+ const { trackEvent } = await loadAnalytics('')
+
+ trackEvent('follow_artist', { artist_id: 1 })
+
+ expect(window.dataLayer).toHaveLength(0)
+ })
+
+ it('측정 ID가 있으면 이벤트명과 params를 push', async () => {
+ const { trackEvent } = await loadAnalytics('G-TEST')
+
+ trackEvent('follow_artist', { artist_id: 1 })
+
+ expect(pushedCommands()).toEqual([['event', 'follow_artist', { artist_id: 1 }]])
+ })
+
+ it('params를 생략하면 빈 객체로 push', async () => {
+ const { trackEvent } = await loadAnalytics('G-TEST')
+
+ trackEvent('search')
+
+ expect(pushedCommands()).toEqual([['event', 'search', {}]])
+ })
+
+ it('dataLayer에 arguments 객체를 push', async () => {
+ const { trackEvent } = await loadAnalytics('G-TEST')
+
+ trackEvent('search')
+
+ const [item] = window.dataLayer
+ expect(Array.isArray(item)).toBe(false)
+ expect(Object.prototype.toString.call(item)).toBe('[object Arguments]')
+ })
+})
+
+describe('sanitizeSearch', () => {
+ it.each([
+ ['q만 있으면 빈 문자열', '?q=yoasobi', ''],
+ ['q와 다른 파라미터가 있으면 q만 제거', '?q=yoasobi&status=ONGOING', '?status=ONGOING'],
+ ['빈 문자열이면 빈 문자열', '', ''],
+ ])('%s', async (_, search, expected) => {
+ const { sanitizeSearch } = await loadAnalytics('G-TEST')
+
+ expect(sanitizeSearch(search)).toBe(expected)
+ })
+})
+
+describe('trackPageView 최초 진입 referrer', () => {
+ beforeEach(() => {
+ window.dataLayer = []
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ })
+
+ function stubReferrer(referrer) {
+ vi.spyOn(document, 'referrer', 'get').mockReturnValue(referrer)
+ }
+
+ function pageReferrerCommands() {
+ return pushedCommands().filter(
+ ([command, params]) => command === 'set' && Object.hasOwn(params, 'page_referrer'),
+ )
+ }
+
+ it('같은 origin referrer면 q를 제거한 주소를 page_referrer로 set', async () => {
+ stubReferrer(`${window.location.origin}/concerts?q=secret&status=ONGOING`)
+ const { trackPageView } = await loadAnalytics('G-TEST')
+
+ trackPageView('/concerts/2', 'YOASOBI 내한 공연 | Coming')
+
+ expect(pageReferrerCommands()).toEqual([
+ ['set', { page_referrer: `${window.location.origin}/concerts?status=ONGOING` }],
+ ])
+ })
+
+ it('같은 origin referrer면 검색어가 dataLayer에 남지 않음', async () => {
+ stubReferrer(`${window.location.origin}/concerts?q=secret&status=ONGOING`)
+ const { trackPageView } = await loadAnalytics('G-TEST')
+
+ trackPageView('/concerts/2', 'YOASOBI 내한 공연 | Coming')
+
+ expect(JSON.stringify(pushedCommands())).not.toContain('secret')
+ })
+
+ it('외부 origin referrer면 page_referrer를 set하지 않음', async () => {
+ stubReferrer('https://www.google.com/')
+ const { trackPageView } = await loadAnalytics('G-TEST')
+
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+
+ expect(pageReferrerCommands()).toEqual([])
+ })
+
+ it('referrer가 빈 문자열이면 page_referrer를 set하지 않음', async () => {
+ stubReferrer('')
+ const { trackPageView } = await loadAnalytics('G-TEST')
+
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+
+ expect(pageReferrerCommands()).toEqual([])
+ })
+
+ it('같은 origin referrer로 진입한 뒤 경로를 이동하면 직전 page_location을 page_referrer로 set', async () => {
+ stubReferrer(`${window.location.origin}/concerts?q=secret&status=ONGOING`)
+ const { trackPageView } = await loadAnalytics('G-TEST')
+ trackPageView('/artists/1', 'YOASOBI | Coming')
+ window.dataLayer = []
+
+ trackPageView('/concerts/2', 'YOASOBI 내한 공연 | Coming')
+
+ expect(pageReferrerCommands()).toEqual([
+ ['set', { page_referrer: `${window.location.origin}/artists/1` }],
+ ])
+ })
+})