Next JS 프로젝트에 Google Analytics 적용하는 방법

React기반의 Next JS 프로젝트에 익숙하지 않으신 분이라면 프로젝트에서 Google Analytics 코드 적용하는 것이 번거로울 수 있습니다. 이를 손쉽게 도와주는 react-ga라이브러리를 이용하여 프로젝트에 Google Analytics 코드를 적용하는 방법을 소개하겠습니다.

 

 

우선 react기반 프로젝트를 위한 google analytics적용을 도와주는 react-ga 라이브러리를 설치합니다.

npm install --save react-ga
// OR
yarn add react-ga

 

 

react-ga를 utility화하는 anayltics.js를 생성하고 아래와 같이 입력합니다.

사용자의 임의로 구성할 수 있습니다.

// analytics.js

import RreactGA from "react-ga";


const initGA = () => {
  ReactGA.initialize("UA-XXXXXXXXXX-1") // 자신의 Goolge Analytics 번호 입력
};

const logPageView = () => {
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
};

const logEvent = (category = "", action = "") => {
  if (category && action) {
    ReactGA.event({ category, action })
  }
};

const logException = (description = "", fatal = false) => {
  if (description) {
    ReactGA.exception({ description, fatal })
  }
};


export default { initGA, logEvent, logPageView, logException };

 

 

위에서 정의한 analytics를 손쉽게 wrapping해주는 Layout.js를 생성하고 아래와 같이 작성합니다.

// Layout.js

import React from "react";
import { initGA, logPageView } from "./analytics";


class Layout extends React.Component {

  componentDidMount () {
    if (!window.GA_INITIALIZED) {
      initGA()
      window.GA_INITIALIZED = true
    }
    logPageView()
  }
  
  render () {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
  
};


export default Layout;

 

 

위의 Layout을 적용하고 싶은 page 컴포넌트에 wrapping하여 적용합니다.

// pages/PAGE_EXAMPLE.js

import Layout from "./Layout";


const Page = () => {
  return (
    <Layout>
      <div>This is Page Example</div>
    </Layout>
   );
};


export default Page;

 

 

 

위에서 소개한 방법은 가장 좋은 방법이라기 보다는 좀 더 빠르고 손쉽게 NextJS의 모든 페이지 컴포넌트에 구글 애널리틱스 코드를 반영하는 방법입니다. 만약 자신의 프로젝트와 react-ga 라이브러리에 대해 잘 알고 계시다면 반드시 위처럼 하실 필요는 없습니다. 자신의 프로젝트에 맞게 변형하는 것이 더 좋은 선택일 수 도 있습니다.

 

 

---

https://growd.tistory.com/71

[Next JS] Next JS + Material UI + Styled Component 설정방법

https://growd.tistory.com/65

당첨자 더 많이 뽑는다는 연금복권720

---

 

 

읽어주셔서 감사합니다.

 

공감 댓글 구독 을 정중히 부탁드립니다

 

:)