Vite 환경에서 구글 애널리틱스 3분만에 적용하기

목차

· 패키지 설치하기

· vite.config.js에 설정 추가하기

· vite.config.js 환경 변수 설정

---

어쩌다보니 3분 카레같은 글들만 작성을 하게 되는데, 오늘은 구글 애널리틱스를 Vite 플러그인을 통해 쉽게 적용을 할 수 있는 방법에 대해 알아보려고 해요. 다른 블로그에는 리액트에서 구글 애널리틱스를 연동하는 방법을 다양하게 잘 알려주고 있지만, 해당 플러그인의 경우 비교적 애널리틱스 적용을 빠르게 해줄 수 있어요.

패키지 설치하기

자신의 패키지 매니저에 맞는 방식으로 vite-plugin-radar 를 설치합니다. 뒤에 수식을 붙여 의존성으로 설치하는 것을 추천해요.

npm i --save-dev vite-plugin-radar

yarn add -D vite-plugin-radar

pnpm add -D vite-plugin-radar

vite.config.js 에 추가하기

vite.config.js 파일에서 VitePluginRadar를 상단에 선언하고 관련하여 설정을 진행해주세요. 생성해놓은 구글 애널리틱스의 추적 코드를 아래의 id란에 넣기만 하면 됩니다. 보통은 중요한 정보는 하드코딩으로 넣는 것이 아닌 환경변수로 지정을 해줘야하는데, Vite의 환경변수 지정 같은 경우 import.meta.env.{environment_name} 과 같이 선언을 하는 것이 아닌 조금 특수한 방법으로 선언을 해줘야해요.

// vite.config.js
import { VitePluginRadar } from 'vite-plugin-radar'

export default {
  plugins: [
    VitePluginRadar({
      // Google Analytics 태그 삽입
      analytics: {
        id: 'G-XXXXX',
      },
    })
  ],
}

vite.config.js 환경 변수 설정

보통의 경우 vite에서는 import.meta.env.{environment_name} 과 같이 설정을 해주지만, vite.config.js 파일에서는 해당 코드가 정상적으로 적용되기 않기 때문에 새로운 패키지 하나를 다운로드 해줘야해요. 그 패키지의 이름은 dotenv 이라는 패키지이고, 이 패키지를 이용하여 vite.config.js 에서도 환경변수를 정상적으로 사용할 수 있어요. 아래의 패키지의 경우도 프로젝트 패키지 매니저에 따라 맞는 설치 방법을 통해 패키지를 설치하는 것을 추천드려요.

npm install dotenv

yarn add dotenv

pnpm add dotenv

 

그리고 dotenv를 사용하기 위해 아래의 코드처럼 구성을 진행할 수 있어요. 이렇게 되면 환경변수는 정상적으로 적용이 되어지고 vite.config.js에서 자신의 중요한 토큰을 환경변수를 통해 숨겨서 사용할 수 있어요.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import dotenv from "dotenv";
import { VitePluginRadar } from "vite-plugin-radar";

dotenv.config();

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VitePluginRadar({
      // Google Analytics tag injection
      analytics: {
        id: process.env.VITE_GOOGLE_ANALYTICS,
      },
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

 

생각보다 많이 쉽죠? 적용을 하고나서는 일정 시간이 지나야 구글 애널리틱스 홈페이지에 반영이 되는 것 같아요. 프로젝트에서 구글 애널리틱스를 통해 사용자 리텐션 유지와, 이탈 지수를 체크하곤하는데 이렇게 편한 방식을 찾아 진행을 하니 사용자 시각화에 대한 부분에 대한 생각을 아낄 수 있었어요. 생성되지 얼마 되지 않는 신생 라이브러리라서, 많이 알려지지는 않지만  이번 기회에 해당 패키지도 설치를 해보며 애널리틱스를 쉽게 설치할 수 있는 경험이 되었으면 좋겠어요 👀 실제로 아래는 제가 운영 중인 서비스의 관련 내용이에요, 잘 적용된 것을 확인할 수 있어요