react (vite,typescript) 에 구글 애널리틱스 태그(GA 태그) 설치하기

posinity·2023년 8월 1일
0

React

목록 보기
53/58
post-custom-banner

npm 사이트 링크

라이브러리 설치

npm install react-ga --save

환경 변수 설정

vite로 빌드한 경우 앞에 VITE_를 꼭 붙혀주어야 한다.

//.env
VITE_GOOGLE_ANALYTICS_ID="id값"

변수명은 원하는 변수명으로 설정 가능하다.

vite-env.d.ts 파일 변경

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_PLUGIN_KEY: string;
  readonly VITE_GOOGLE_ANALYTICS_ID: string; //추가
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

App.tsx 파일 변경

import ReactGA from "react-ga";

//추가
const gaTrackingId = import.meta.env.VITE_GOOGLE_ANALYTICS_ID;
ReactGA.initialize(gaTrackingId);

function App() {
  return (
    <>
     ...
    </>
  );
}

export default App;
profile
문제를 해결하고 가치를 제공합니다
post-custom-banner

0개의 댓글