앞서 만들었던 싱글페이지 프로젝트에서 GA를 넣어보라는 업무가 할당되어 작업해보았다
GA 개념만 들어봤지 직접 코드를 넣어보는건 처음이라 일반적인 자바스크립트에서 사용하는 방법대로 코드를 리액트 코드로 바꿔서 넣었다가 서드파티에 대해 알게 된 후 코드를 전부 바꾸었다
@next/third-parties
- 서드파티란 NextJs에서 제공하는 패키지로, Google Analytics, Google Tag Manager, YouTube등을 쉽게 작업할 수 있도록 도와준다
서드파티를 사용한 이유
처음 작업을 하면서 layout.tsx안의 head와 body안에 긴 코드들을 넣고 각각의 버튼에 gtag를 삽입하면서 공통으로 사용하는 코드들이 있기에 gtag component를 만들어서 작업했는데 코드가 너무 많게 느껴져서 검색을 하던중 서드파티에 대해 알게 되었고, 직접 사용해보니 코드량이 확연히 줄여서 사용하게 되었다.
사용방법
// 설치
@next/third-parties
// layout.tsx GA또는 GTM 코드 넣기(id)
<GoogleAnalytics gaId="G-xxxxxxxxxx" />
// click Evt
sendGAEvent('event','click', {
event_label: 값,
value: 값,
event_category: 값,
})확실히 서드파티를 사용하니 코드량도 줄고 사용하기도 간편하다 그리고 설정한 ga는 실시간 오버뷰에서 확인하면 정보가 잘 들어오는걸 확인 할 수 있다
여기까지만 작업했다면 정말 쉬웠을텐데 QR 주소로 들어오는 url에 대해서도 GA태그를 넣어달라는 요청이 들어와서 그때부터 땀이 삐질삐질 나기 시작했지만 일단 해보자해서 하기 시작했다
middlware
우선 QR 주소로 들어오는 uri의 경우 미들웨어에서 'qr'이 붙은 주소들을 '/'으로 리다이렉트 해놨기에 미들웨어에 가서 쿠키 또는 파라미터값을 넣어줬다
redirectUrl.searchParams.set('_qr', 'true');
redirectUrl.searchParams.set('_qr_param', acParam || 'unknown');
redirectUrl.searchParams.set('_qr_value', acValue || 'unknown');QrComponent
GA태그를 넣기위해 qr컴포넌트 생성
// 파라미터에 qr이 있다면
useEffect(() => {
const isQR = searchParams.get('_qr');
if(isQR === 'true'){
// ga 보내기
const sendE = () => {
sendGAEvent('event', 'qr', {
event_label: qrParam,
value: qrValue
});
}
sendE();
setTimeout(() => {
// url에서 주소 뒤에 붙은 값을 일괄 제거
})
}
},[searchParams,...etc])처음엔 미들웨어에서 qr주소로 들어온다면 쿠키를 넣어줬는데 미들웨어에서 먼저 설정한 '/'로 리다이렉트 하면, 클라이언트 컴포넌트에서 해당 쿠키를 즉시 읽을 때 타이밍 이슈가 발생해 쿠키를 이용한 방법은 사용하지 못했고,
파라미터를 이용한 방법을 사용해 파라미터를 세팅해주고 qr component에서 파라미터값을 가지고 ga태그를 세팅해준 후 url을 qr주소가 아닌 일반 도메인 주소로 보이기 위해 setTimeout을 사용해 url에 있는 불필요한 파라미터값들을 지워주었다
일반적인 GA태그 삽입하는 방법은 쉬웠지만 미들웨어에서 이미 1차로 처리한 값에 추가적으로 GA를 추가하려하니 어려웠고 여러 시행착오가 있었지만 정상적으로 수집이 가능하니 다행이고 너무 어려웠지만 해낸거에 대한 뿌듯함을 느꼈다
