주의해야할 사항
import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import ReactGA from 'react-ga';
const TRACKING_ID = process.env.REACT_APP_GA_TRACKING_ID;
const useGAPageTracking = () => {
const location = useLocation();
const [initialized, setInitialized] = useState(false);
/* localhost는 인지 못하게 */
useEffect(() => {
if (!window.location.href.includes('localhost')) {
ReactGA.initialize(TRACKING_ID);
}
setInitialized(true);
}, []);
useEffect(() => {
if (initialized) {
ReactGA.pageview(location.pathname + location.search);
}
}, [initialized, location]);
// 개발용
useEffect(() => {
ReactGA.initialize(TRACKING_ID);
ReactGA.pageview(location.pathname + location.search);
}, [location]);
};
export default useGAPageTracking;
// https://stackoverflow.com/questions/34836500/how-to-set-up-google-analytics-for-react-router
// App.js에서 쓰려면 index에서 react-router-dom의 Router로 둘러싸야해서 BaseTemplate에 넣었음
위의 방법으로 페이지 이동을 감지한다.
구글 애널리틱스 보고서 - 실시간 - 개요 를 들어가면
접속을 확인 할 수 있다.
만약 click 등의 event를 감지하고 싶다면
ReactGA.event({
category: GAEvents.Category.auth,
action: GAEvents.Action.auth.signup,
});
위 함수를 넣어주면 된다. (onClick = {() => {func()}})
Typescript를 안 쓰기에 자동완성을 위해서
// import ReactGA from 'react-ga';
// import GAEvents from 'lib/GA';
const Category = {
auth: 'Auth',
userProfile: 'User Profile',
gameProfile: 'Game Profile',
relation: 'Relation',
matching: 'Matching',
chat: 'Chat',
search: 'Search',
};
const Action = {
auth: {
login: 'Login', // login api submit
signup: 'Signup', // Signup button click
guestSignup: 'Guest Signup', // start with guest button click
signupCloseModal: 'Signup Close Modal', // close modal during sign up
},
userProfile: {
profileEdit: 'Profile Edit', // profile page edit profile click
personalityEdit: 'Personality Edit', //profile page edit personality click
gamelistEdit: 'Gamelist Edit', // profile page edit gamelist click
},
gameProfile: {
gamelistDragDrop: 'Gamelist Drag Drop', // game account modal drag and drop
accountEnrollSelectGame: 'Account Enroll Select Game',
accountEnrollStart: 'Account Enroll Start', // game account enroll button click
accountEnrollEnd: 'Account Enroll End', // close account enroll modal during process
accountCertificationStart: 'LOL Account Certification Start', // start lol certification
accountCertificationEnd: 'LOL Account Certification End', // stop lol certification during process
},
relation: {
follow: 'Follow', // follow button click
block: 'Block', // profile page block button click
mannerEdit: 'Manner Edit', // profile page manner edit button click
report: 'Report', // profile page block report click
},
search: {
searchLinkClick: 'Search Result Link Click',
},
};
const Label = {
maple: 'maple',
lol: 'lol',
pubg: 'pubg',
others: 'others',
};
const GAEvents = {
Category,
Action,
Label,
};
export default GAEvents;
이처럼 정리해서 썼다.