서비스에 GA를 도입해보자

TIL

서비스에 GA를 도입해보자

KANG_G1 2024. 10. 11. 15:19

유저가 갑자기 대거 이탈하는 경우가 발생했다면

서비스의 어떤 부분이 문제였을까?라는 생각에서 GA 도입을 처음 떠올렸습니다.

프로젝트를 개발하며 유저가 어떤 페이지를 가장 많이 사용하고

어느 기능에서 불편함을 느껴 문제를 제기하는지 파악하고 싶었거든요.

기획자님과 같은 팀원에게 GA를 적용해 개발 방향을 정하자는

의견을 제시한 후 적용하기로 결정했습니다.

_document.tsx를 사용한 GTM 설정

(사내 프로젝트에서는 Next.js 12v를 사용 중이었습니다.)

공식 문서를 참고했을 때 @next/third-parties라는 라이브러리를 통해

쉽게 GTM 태그 작업을 프로젝트에 적용하려고 시도했습니다.

pages router에서도 @next/third-parties 를 사용할 수 있는 것처럼

설명이 작성되어 빠르게 적용이 가능할 것으로 예상했는데요.

알 수 없는 에러가 발생해 라이브러리를 사용한 GTM 태그 적용은 실패했고

_app.tsx에 추가적인 코드 입력으로 설정을 해줬습니다.

설정을 위해 구글링을 통해 조사해 보니 대부분 useEffect를 통해

page 별로 태그를 삽입하는 방식을 사용하고 계셨는데요.

한 곳에서만 GTM을 설정하는 것이 정석이라는 것엔 이견이 없었지만

불필요하게 useEffect를 사용한다는 느낌을 지울 수 없었습니다.

useEffect를 사용한 리렌더링을 통해 매번 넣어주기보단 SSR이 이뤄지는

_document.tsx를 통해 태그를 처리해주는 것은 어떨까?라는 생각이 들었고

구글링을 통해 저와 비슷한 생각을 하신 분의 블로그를 참고해

코드를 적용할 수 있었습니다.

(당연하겠지만 GTM ID는 환경 변수로 관리해주는 것이 좋습니다)

/* eslint-disable no-useless-escape */
import Document, {
  DocumentContext,
  Head,
  Html,
  Main,
  NextScript,
} from 'next/document';
import Script from 'next/script';
import { ColorModeScript } from '@chakra-ui/color-mode';

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
        ...
        </Head> 
        <Script id="gtm" strategy="afterInteractive">
          {`
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GTM_ID}');
      `}
        </Script>
        <body>
          <ColorModeScript initialColorMode={config.initialColorMode} />
          <Main />
          <NextScript />
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}" height="0" width="0" style="display: none; visibility: hidden;" />`,
            }}
          />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

위에서는 처리하지 않았지만 Production 환경일 때만 해당 스크립트가 동작하도록 처리해 줘

실제 서비스 기준으로 GA가 동작할 수 있게 설정해주셔야 합니다.

또한, GA가 프로젝트에 적용되기까지 24-48시간 정도 소요되기 때문에

소요되는 시간 동안 GTM 설정과 추가 툴 설정을 해주시고 기다리는 것이 좋습니다.

GA 적용이 완료되면 실시간 분석과 데이터 전체를 확인할 수 있게 되는데요.