[React] 리액트에 구글애널리틱스(GA) 적용하기

1.구글 애널리틱스 계정(ID) 발급 받기

• 발급 시 'Google 애널리틱스 4 속성과 유니버설 애널리틱스 속성 둘 다 만들기'로 선택하기
• 관리 → 속성설정 → 추적ID → UA-XXXXXXXX-X 확인하기
  
  

2.useEffect() Hooks을 사용하여 GA설정 하기

https://www.npmjs.com/package/react-ga 

$ npm install react-ga --save //react-ga Module 설치하기

 

import React, { useEffect } from "react";
import ReactGA from "react-ga";

export default function Example() {
	const ga_setting = () => {
        const pathName = window.location.pathname;
        ReactGA.initialize("UA-12345678-9"); //생성한 유니버셜 ID값을 넣어준다.
        ReactGA.set({ page: pathName }); //현재 사용자 페이지 
        ReactGA.pageview(pathName); //페이지뷰 기록
	};

    useEffect(() => {
    	ga_setting();
    }, []); //마운트(mount) 될때 실행한다.

	//현재 위 소스는 마운트 될때 페이지뷰가 발생 됩니다.
}

※ useEffect란?
컴포넌트가 마운트(mount)될때, 언마운트(unmount)될때, 업데이트(update)될때 특정 작업을 처리 할수 있다.

//사용방법
import react, { useEffect } from "react";
useEffect(effect, [deps]);

1.배열(deps) 값이 없을 때 = 빈배열

useEffect(() =>{
	//마운트 되었을때, 최초 렌더링 할때 실행한다.
},[]);

2.배열(deps)값이 있을 때

useEffect(() =>{
	console.log(update)
	//업데이트(변경) 될때 실행 한다.
},[update]);

3.배열(deps)을 생략 했을 때

useEffect(() =>{
	//렌더링 될때 마다 실행한다.
});

4. useEffcet 안에서 return 할때 (useEffcet 뒷정리 함수)

useEffect(() =>{
    return() =>{
		//cleanup
    	//마운트가 해제 되었을 때 실행 한다.
    }
},[]);

이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.