Next.js에 mixpanel을 적용하기 위해 사용한 방법들을 소개하고자 한다.

SDK 설치

우선 mixpanel 공식에서 제공해주는 브라우저용 SDK를 설치하자.

yarn add mixpanel-browser
# or
npm install --save mixpanel-browser

하고자 하는 목표

Docs에서 제공하는 아래와 같은 코드로 초기화를 진행하면 별다른 설정 없이 페이지 단위로 Tracking이 진행된다.

mixpanel.init('YOUR_TOKEN', {debug: true, track_pageview: true, persistence: 'localStorage'});

그러나 나는 로그인한 유저에 대해 정보를 부여하고, 그에 따른 데이터를 더 보고 싶었다. 따라서 mixpanel.identify 메서드와 mixpanel.people.set 메서드가 필요했다.

또한 나중에라도 언제 어느 곳에서 다른 액션에 대한 추가 정보를 tracking 해야 할 것 같아서 액션들을 묶는 클래스로 만들어 재사용이 용이하게 하고 싶었다.

이를 위한 코드

import mixpanel from "mixpanel-browser";

class MixpanelService {
  private static instance: MixpanelService;
  private isProduction = process.env.NODE_ENV === "production";

  constructor() {
    if (this.isProduction) {
      mixpanel.init(`${process.env.NEXT_PUBLIC_MIXPANEL_TOKEN}`, {
        debug: true,
        track_pageview: true,
        persistence: "localStorage",
      });
    }
  }

  // 생략 ....
  public setIdentity(id: string) {
    if (this.isProduction) mixpanel.identify(id);
  }

  public setUser(userInfo: UserInfo) {
    if (this.isProduction) {
      mixpanel.people.set({
        $name: userInfo.name,
      });
    }
  }

  public reset() {
    if (this.isProduction) {
      mixpanel.reset();
    }
  }
}

Class로 만들 경우 문제점이 어디선가는 mixpanel.init를 호출해야 하는데, Class내의 메서드들을 따로 호출하지 않는다면 초기화가 되지 않는다. 따라서 지금과 같은 경우에는 로그인을 하지 않으면 추적 코드가 심어지지 않는다.

따라서 단순히 mixpanel.init을 호출하기 만을 위한 메서드를 추가 작성하여야 한다.

class MixpanelService {
  // ...
  public static getInstance(): MixpanelService {
    if (!MixpanelService.instance) {
      MixpanelService.instance = new MixpanelService();
    }
    return MixpanelService.instance;
  }
}

나의 경우에는 우선 로그인 하는 쪽에만 코드를 심어주면 되었다.

if (loginUser) {
  MixpanelService.setIdentity(loginUser.id);
  MixpanelService.setUser(loginUser);
} else {
  MixpanelService.getInstance();
}

혹시 더 나은 방법이 있다면 알려주세요!!