[Saida Lab] Amplitude 적용하기

https://blog.ab180.co/posts/amplitude-glossary

이번에는 Amplitude 다.

이번 프로젝트 하면서 느끼는 거지만 내가 아직 경험하지 못한 분야가 너무나도 많구나 하는 것을 느끼면서

우물안 개구리에서 이제 막 우물 밖을 쳐다보고 있는 중인 개구리인 느낌이다.

아무튼 이번에도 해당 기능을 어떻게 적용했는지 한번 정리해 보려고 한다.

* 참고 사항

혹시라도 내 글을 읽고 도움이 될까? 해서 들어온 분들을 위해 내 프로젝트 상황에 대해서 전반적인 정리를 해두겠다.

프레임워크 : Next.js (ver 14.1.0)
라이브러리 버전 : 2.5.2

추가로 App router 환경에서 구현했다.

Init Setting

npm install @amplitude/analytics-browser

거두절미하고 일단 설치부터 진행한다.....

사실 처음 적용하는 입장에서 공식문서는 상당히 불친절한 느낌을 주고 있다.

설치 하라고 한 다음 과정이 굉장히 많이 스킵 되어있는 느낌이었다.

그래서 또 열심히 서칭한 결과 한 줄기 빛과 같은 글을 발견했다.

아래 글에서 설명한 내용대로 한번 초기 세팅을 진행해 보겠다.

How to implement Amplitude in Next.js 14 App Router [Updated]

Updated to 2024 standards

medium.com

// providers/AmplitudeProvider.tsx

"use client";

import { useEffect, createContext } from "react";
import { init, track } from "@amplitude/analytics-browser";

const AMPLITUDE_API_KEY = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY;

export const AmplitudeContext = createContext({});

const AmplitudeContextProvider = ({ children }) => {
  useEffect(() => {
    init(AMPLITUDE_API_KEY || "", undefined, {
      defaultTracking: {
        sessions: true,
      },
      minIdLength: 1,
    });
  }, []);

우선 위 블로그에서 따로 provider 폴더를 만들라고 하지는 않았지만,

이미 여러개의 provider를 사용하고 있는 상황이라 provider를 따로 관리하기 위해서 파일을 만들었다.

위의 코드를 좀 보면 '@amplitude/analytics-browser' 라이브러리에서 init 을 가져왔는데

이게 amplitude를 초기화 할 때 사용하는 메서드다.

여기에 Amplitude api key를 첫번째 인자에 넣어줘야 하는데,

이 key는 amplitude 페이지에서 발급받은 뒤 env 파일에서 관리해 주자.

init 메서드의 두번째 인자에는 추적할 user의 id가 들어가는데, 서비스의 상황에 따라 다르게 될 것 같다.

익명의 유저의 행동을 추적하고 싶다면 id가 없기 때문에 다른 방법으로 추적이 되어야 하고

만약 서비스가 로그인을 해야만 진행이 되는 서비스라면 여기에 그 유저를 특정할 수 있는 값을

넣어주면 될 것 같다.

  const trackAmplitudeEvent = (
    eventName: string,
    eventProperties: Record<string, any>
  ) => {
    track(eventName, eventProperties);
  };

  const value = { trackAmplitudeEvent };

  return (
    <AmplitudeContext.Provider value={value}>
      {children}
    </AmplitudeContext.Provider>
  );
};

export default AmplitudeContextProvider;

바로 아래에는 이런 코드가 있다.

trackAmplitudeEvent 함수는 실제 amplitude를 적용할 때, 특정 이벤트에 설정하는 메서드다.

이렇게 정의한 메서드를 provider에 props로 내려주면,

내가 원하는 컴포넌트에서 해당 메서드를 불러와 사용할 수 있게 된다.

// app/layout.tsx

import AmplitudeContextProvider from "@_components/Providers/AmplitudeContextProvider";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
         <AmplitudeContextProvider>
           {children}
         </AmplitudeContextProvider>
      </body>
    </html>
  );
}

이렇게 만든 provider를 layout.tsx에서 전체를 감싸주도록 설정해 주었다.

이렇게 만들어주면 사용할 수 있기야 하겠지만 여러 이벤트에서 추적을 위해 amplitude를 사용하다 보면

추적 하려는 이벤트에 코드가 추가 되는 형태라서 조금 코드가 복잡해 지는 경향이 있을 수 있다.

그래서 이 블로그에서도 커스텀 훅을 만들어서 작업하라고 권장하고 있다.

import { useContext } from "react";
import { AmplitudeContext } from "@_components/providers/AmplitudeProvider";

const useAmplitudeContext = (): any => {
  const context = useContext(AmplitudeContext);
  if (context === undefined)
    throw new Error(
      "useAmplitudeContext must be used within a AmplitudeContextProvider"
    );

  return context;
};

export default useAmplitudeContext;

useContext hook에 이전 provider에서 만든 AmplitudeContext를 넣어준 뒤,

그 값을 반환하는 형태로 구현이 되어있다.

실제 사용

  const { trackAmplitudeEvent } = useAmplitudeContext();

  const clickHandler = () => {
    trackAmplitudeEvent("click", {
      text: "each click is a new event, and each star or like helps me a lot!",
    });
  };

블로그에서 제시한 실제 사용 예시를 가져와 봤는데,

커스텀 훅을 호출한 뒤, trackAmplitudeEvent 라는 메서드를 꺼내서 사용하는데,

이 메서드도 맨 처음 provider에서 만든 값이라는 것을 알 수 있다.

결국 amplitude/analytics-brower 라이브러리에서 제공하는 track 메서드를 사용하는 거라고 볼 수 있겠다.

아무튼 첫번째 인자에는 이벤트 이름을 두번째 인자에는 이벤트 프로퍼티를 입력해서

amplitude 페이지에서 어떤 이벤트가 발생했을 때, 어떤 프로퍼티가 오는지 추적할 수 있게 된다.

이 부분은 실제 기획자가 이벤트 이름과 이벤트 프로퍼티는 전달해 주기 때문에

프론트 입장에서는 그거에 맞춰서 데이터만 넣어주면 되겠다.

gtag 적용

// layout.tsx

...
 return (
    <html lang="en">
      <head>
        <Script
          async
          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GTAG_API_KEY}`}
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${process.env.NEXT_PUBLIC_GTAG_API_KEY}');`}
        </Script>
     </head>
...

추가로 Google Analytics 까지 적용됐으면 좋겠다고 해서

위와 같이 적용했다.이 부분은 일단은 더 알아봐야 할듯..

참고 자료

- amplitude 공식 문서 [설치 편]

- amplitude app router 에서 적용하기 블로그

저작자표시 비영리 변경금지

'Develop > librarys' 카테고리의 다른 글

[Saida Lab] Next.js에서 google reCAPTCHA 적용하기 (1)	2024.03.19
[Saida Lab] Framer-motion 적용하기 (3)	2024.03.14