Google Analytics(GA) 적용해보기🔬

ldh3907·7일 전
15
post-thumbnail

이번에 프로젝트를 하면서 페이지마다 사용자가 들어오는지 통계를 내야 했었습니다.. 그래서 어떻게 할까 고민하다가 Google Analytics를 알게 되었고, 한번 사용해봤습니다.
🙋‍♂️※참고로 저는 Next 환경에서 적용해보았습니다.

✌️시작

먼저 google analytics를 들어가줍니다.


계정이름을 적고 '다음'을 눌러줍니다.


속성이름(아무 이름이나 적으셔도 됩니다!)을 적고 나라에 맞게 선택해준 다음 '고급 옵션 보기'를 선택해줍니다.

'유니버셜 애널리틱스 속성 만들기'를 허용해주고 웹사이트 주소를 적어줍니다. 그리고 밑에 보면 'Google 애널리틱스 4 속성과 유니버셜 애널리틱스 속성 둘 다 만들기` 와 '유니버셜 애널리틱스 속성만 만들기' 2개가 있는데요, 간단하게 설명 드리면 유니버셜 속성은 페이지 조회, 이벤트 조회, 전자상거래 조회, 소셜 상호작용 조회 같은 것들을 지원합니다. 이와 다르게 google analytics 4는 모든 사용자의 행동이 event로 측정됩니다. 저는 위에 옵션을 추천드립니다!

정보를 알맞게 잘 입력해주시고 '만들기'를 눌러줍니다.

그러면 다음과 같은 폼이 뜹니다. 만약 안뜨셨다면 홈 -> 태그 지정 도움말 얻기 -> 데이터 스트림 으로 가시면 됩니다. 폼에서 측정 ID를 복사해준 후 env파일이나 gitignore파일에 넣어 숨겨줍니다.

💻코드

이제 세팅은 다 끝났고, 코드를 쳐보도록 합시다!

lib/ga/gtag.ts
declare global {
  interface Window {
    gtag: (param1: string, param2: string, param3: object) => void;
  }
}

export const pageView = (url: URL) => {
  window.gtag("config", process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID!, {
    page_path: url,
  });
};

먼저 구글 애널리틱스에서 값을 받아야 하기 때문에 값을 쏘는 함수를 작성해줍니다.
값을 쏠 때 윈도우 객체에 gtag라는 프로퍼티를 추가해주고 그 프로퍼티를 사용해서 값이 쏴지는데요, 이때 gtag에 타입을 지정 해주지 않으면 에러가 납니다.(js라면 안해주셔도 괜찮습니다!)
그래서 전역 타입으로 확장해줍니다.

pages/_document.tsx
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '${process.env.REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

측정코드를 이용해 다음과 같은 script코드를 document안에 Head 태그 안에 넣어줍니다.

pages/_app.tsx

import * as ga from "../lib/ga/gtag";
import { useRouter } from "next/router";

function App({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient());

  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: URL) => {
      ga.pageView(url);
    };

    router.events.on("routeChangeComplete", handleRouteChange);

    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <RecoilRoot>
          <ThemeProviderContainer Component={Component} pageProps={pageProps} />
        </RecoilRoot>
      </Hydrate>
    </QueryClientProvider>
  );
}

이제 사용자가 라우트를 각 페이지 마다 값을 쏴야 합니다. 그래서 _app파일에다가 useEffect에 deps로 router를 넣어준 후 라우트가 바뀔때 마다 값이 쏴지도록 합니다.

🧙마무리

여기 까지 진행 하셨다면 배포 해준 뒤, google analytics로 가줍니다. google analytics에서 '홈'이나 '보고서'탭을 가시면 통계를 볼 수 있습니다!

마치며

프로젝트를 계기로 GA를 써봤는데요, 잘만 활용한다면 사용자가 자주 사용하지않는 기능은 손해를 보기전에 없애고, 사용자가 자주 사용하는 기능은 더 업그레이드하여 릴리즈하는 등 비즈니스적으로 크게 이득을 볼 수 있을 것 같습니다..!

참고

GA 사용기
Next JS 앱에 구글 애널리틱스 적용하기
[NextJS] Next 프로젝트에서 Google Analytics 적용하기
GA 공식문서

profile
혁신적인 FE를 선호합니다

7개의 댓글

comment-user-thumbnail
7일 전

너무 좋은 글이네요 ^^

답글 달기
comment-user-thumbnail
6일 전

재미있는글 잘 봤습니다~~

답글 달기
comment-user-thumbnail
6일 전

오.. 고민하던 게 여기 있었네요!

답글 달기
comment-user-thumbnail
6일 전

유용한 정보 감사합니다 :)

답글 달기
comment-user-thumbnail
5일 전

궁금했었는데 감사합니다!

답글 달기
comment-user-thumbnail
약 23시간 전

글 잘봤습니다!

추가적으로 @types/gtag.js를 설치해주면 gtag 프로퍼티 타입 선언을 안해도 되더라고요!

답글 달기
comment-user-thumbnail
약 2시간 전

Thank you for sharing informational google analytics
https://elvinpasha.com

답글 달기