Redirecting...
analytics.google.com
GA 세팅
GA에 우선 가입을 하고 아래 사이트 방법을 참고해 세팅한다.
https://shanepark.tistory.com/123
Google Analytics 구글 애널리틱스 활용하기 - 웹 어플리케이션에 적용
https://shanepark.tistory.com/121 Google Analytics 구글 애널리틱스 활용하기 - 티스토리 연동 최종 프로젝트에서 Google Analytics 를 사용해 볼 예정입니다. 아직 프로젝트가 생성 중이니 저의 티스토리에 연동
shanepark.tistory.com
위와 같이 Web 선택후 URL에 내 localhost를 확인하기 위한 ip를 입력했다.(포트 제외)
위 버튼을 클릭하면 아래와 같이 스트림 설정,과 index.html에 삽입하는 태그가 나온다.
태그를 복붙해 index.html의 <head> 태그 안에 넣어준다.
| <script async src=" https://www.googletagmanager.com/gtag/js?id=~~ ></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); ~~ |
(나는 이미 코드가 넣어져 있어서 위 방식으로 했는데, react-ga4를 사용하면 위에 없이 코드안에 ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS); 이런식으로만 사용해도 되는 것 같다.)
case1: 페이지 별 방문자 수 수집
GA가 4로 변경되었기에 react-ga4를 사용한다.
https://www.npmjs.com/package/react-ga4
react-ga4
React Google Analytics 4. Latest version: 2.1.0, last published: 6 months ago. Start using react-ga4 in your project by running `npm i react-ga4`. There are 162 other projects in the npm registry using react-ga4.
www.npmjs.com
설치)
npm i react-ga4
적용)
set은 page수집 메소드이다.
import { useEffect } from 'react';
import ReactGA from 'react-ga4';
const Analytics = (location) => {
useEffect(() => {
ReactGA.set({ page: location.pathname });
ReactGA.send('pageview');
/*ReactGA.send({ hitType: 'pageview', page: location.pathname });
이것도 위(set+send)대신 가능*/
return;
}, [location]);
};
export default Analytics;
App.jsx(내껀 Route.tsx 파일) 에서 위의 함수를 사용한다.
그럼 최상위에서 location되어 페이지가 바뀔때마다 함수가 실행되어 GA데이터가 수집된다.
export default function AppRoute(): JSX.Element {
const location = useLocation();
Analytics(location); //GA
return(
<Routes>
~~
GA 결과화면(보고서>실시간)
page_view> page_location에서 확인 가능
case2: 특정 버튼 클릭시 사용자 수 모집
버튼1과 버튼2를 각각 클릭했을 때, 버튼 별 사용자 수를 모집하고 싶었다.
아래와 같이 클릭 함수안에 해당 GA 코드를 넣는다.
클릭을 인식하는 event 메소드를 사용한다.
1.
ReactGA.event({
category: '버튼1',//각각 다른 하위 name
action: '버튼 클릭', //공통(상위 name)//같은 거로 묶을때 동일하게 작성
});
2.
ReactGA.event({
category: '버튼2',//각각 다른 하위 name
action: '버튼 클릭', //공통(상위 name)
});
그럼 원하는대로 GA에서 실시간 방문자 수를 확인할 수 있다.😀
아래는 ReactGA4 공식문서 참고)
*만약 GA에서 또 생성하고 싶다면?
왼쪽 아래 톱니바퀴(관리) 클릭>속성설정>속성 만들기
참고사이트)
구글 애널리틱스 적용하기 2편(react-ga4)
> 구글 애널리틱스 GA4 적용 (230710) 2023년 7월 1일부터 유니버셜 애널리틱스 속성이 데이터를 수집하지 않습니다. 대신 Google 애널리틱스 4 속성을 만드는 것이 좋습니다. 구글 애널리틱스가 드디어
whoyoung90.tistory.com
Google analytics 4 with React
지난글에서 열심이 설정을 했는데, 유니버설 애널리틱스에는 문제가 있다. 바로 지원 종료까지 1년이 안남았다. 처음 검색했을 때 react-ga는 GA4가 지원이 되지 않는다고 나왔어서 일단 했는데, 찾
velog.io
hufspnp.com 웹 배포 - 2+ (Google Analytics 4, GA4)
이전 포스트: https://heo-seongil.tistory.com/140?category=970023 hufspnp.com 웹 배포 - 2 (google analytics UA) 이전 포스트: https://heo-seongil.tistory.com/139 hufspnp.com 웹 배포 -1 (nginx & react & https & certbot) PnP 학회 웹 팀 멤
heo-seongil.tistory.com
'React' 카테고리의 다른 글
| [React] VS Code 단축키 자동완성 설정하기 (+TypeScript) (0) | 2023.09.13 |
|---|---|
| [React] 기한까지 보이도록 설정하기 (feat:day.js) (0) | 2023.09.04 |
| [React] 페이지 이동시 스크롤 최상단 위치시키기 (0) | 2023.08.29 |
| [React] 팝업 띄우기(feat. Modal, 오늘 그만 보기) (0) | 2023.08.07 |
| [React] lottie-react 사용법 (lottie 애니메이션) (0) | 2023.07.31 |
