[TIL] 0613 | mixpanel 연동하기

최상단에 track.ts 를 생성

import mixpanel from 'mixpanel-browser';
import { APP_ENV } from './config';

const isDev = APP_ENV === 'development';

function initialize() {
  if (isDev) {
    console.log(`개발 서버에서 트래킹이 initialize 되었습니다.`);
    return;
  }

  try {
    window.gtag('js', new Date());
    window.gtag('config', 'G-CODE', {
      send_page_view: false,
    });

    mixpanel.init('', { debug: isDev });
  } catch (e) {
    console.error(e);
  }
}

export const track = {
  initialize,
};

mixpanel.init() 에 YOUR_TOKEN(mixpanel 계정의 token) 를 넣어준다.

function initialize() {
  if (isDev) {
    console.log(`개발 서버에서 트래킹이 initialize 되었습니다.`);
    return;
  }

  try {
    window.gtag('js', new Date());
    window.gtag('config', 'G-CODE', {
      send_page_view: false,
    });

    mixpanel.init('YOUR_TOKEN', { debug: isDev });
  } catch (e) {
    console.error(e);
  }
}

export const track = {
  initialize,
};

src 폴더 내부에 providers 폴더를 생성하고, Track/index.tsx를 생성

import { track } from '../../track';
import React from 'react';

interface TrackProviderProps {
  children: JSX.Element;
}

export default function TrackProvider({ children }: TrackProviderProps) {
  React.useEffect(() => {
    track.initialize();
  }, []);

  return children;
}

최상단의 Root 파일들을 내려주고 있는 위치에서 provider 로 감싸준다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
  },
 
]);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Global styles={global} />
    <TrackProvider>
      <RouterProvider router={router} />
    </TrackProvider>
  </React.StrictMode>
);

연동 완료! 😎

⚡️ 참고

https://docs.mixpanel.com/docs/tracking/javascript-quickstart?projectToken=f706f7280a39ae88d0e8f39573665dcf