NextJS 애플리케이션에서 Mixpanel Analytics 설정
- Barbara Streisand원래의
- 2024-12-05 08:07:12950검색
분석은 사용자가 100명인 소규모 애플리케이션이든 사용자가 10,000명인 대규모 애플리케이션이든 관계없이 수익성 있는 모든 애플리케이션에 매우 중요합니다.
사용자를 이해하는 것이 가장 중요한 것 중 하나입니다. mixpanel은 이를 수행하는 최고의 도구 중 하나입니다.
오늘은 믹스패널 트래킹을 통합하고 시작하는 방법을 배워보겠습니다.
프로젝트 설정
이미 NextJS 프로젝트 설정이 있다고 가정합니다. 또한 여기에서 새로운 Mixpanel 계정을 만드세요(아직 계정이 없다면).
저는 NextJS에 대해 보여주고 있지만 이는 모든 ReactJS 앱에도 적용 가능하다는 점을 명심하세요.
그런 다음 종속성을 설치합니다
npm install mixpanel-browser
토큰 받기
먼저 다음 환경 변수를 추가하세요
NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"
이제 프로젝트 대시보드에서 mixpanel 토큰을 얻을 수 있습니다.
그런 다음 설정으로 이동하세요. -> 프로젝트 설정
그런 다음 프로젝트 토큰을 가져와 환경 파일에 추가하세요.
구성 파일 생성
mixpanel.ts라는 파일을 만들고 다음 코드를 추가하세요
import mixpanel from 'mixpanel-browser';
// Define event names as constants to prevent typos
export const ANALYTICS_EVENTS = {
PAGE_VIEW: 'Page View',
BUTTON_CLICK: 'Button Click',
FORM_SUBMIT: 'Form Submit',
USER_SIGNED_IN: 'User Signed In',
USER_SIGNED_UP: 'User Signed Up',
USER_SIGNED_OUT: 'User Signed Out',
// ... other events
};
// Initialize mixpanel
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;
if (MIXPANEL_TOKEN) {
mixpanel.init(MIXPANEL_TOKEN, {
debug: process.env.NODE_ENV === 'development',
track_pageview: true,
persistence: 'localStorage',
ignore_dnt: true,
});
}
따라서 컴포넌트 트리에서 믹스패널을 최대한 높게 초기화하세요.
분석 기능 추가
이제 구성을 추가한 후 mixpanel 이벤트를 추적하기 위해 재사용 가능한 기능을 추가할 차례입니다.
따라서 동일한 파일에 다음 코드를 추가하세요.
export const MixpanelAnalytics = {
track: <T extends Record<string, any>>(
eventName: string,
properties?: T & CommonEventProperties
) => {
try {
if (MIXPANEL_TOKEN) {
mixpanel.track(eventName, {
...properties,
timestamp: Date.now(),
path: typeof window !== 'undefined' ? window.location.pathname : undefined,
});
}
} catch (error) {
console.error('Error tracking event:', error);
}
},
pageView: (pageName: string, properties?: Record<string, any>) => {
try {
if (MIXPANEL_TOKEN) {
MixpanelAnalytics.track(ANALYTICS_EVENTS.PAGE_VIEW, {
page: pageName,
...properties,
});
}
} catch (error) {
console.error('Error tracking page view:', error);
}
}
};
위의 2가지 기능을 분석해보면
트랙
이 기능은 모든 종류의 이벤트를 추적하는 데 사용됩니다.
예를 들어 사용자를 추적하려면 버튼을 클릭하여 외부 웹사이트를 방문하세요. 어쩌면 제휴 계산을 위해
다음을 수행할 수 있습니다.
MixpanelAnalytics.track("VISIT_WEBSITE", {
website_name: name,
website_url: website,
visit_count: (mixpanel.get_property('total_website_visits') ?? 0) + 1,
});
페이지보기
이것은 애플리케이션 내의 모든 페이지 보기를 추적하는 매우 간단한 방법입니다.
이제 기억하세요. mixpanel을 초기화할 때 이미 페이지 조회수를 추적하도록 지시했습니다.
mixpanel.init(MIXPANEL_TOKEN, {
track_pageview: true, << HERE
...others
});
따라서 이 맞춤 추적은 보다 자세한 분석을 위한 것입니다.
사용자를 파악하세요
이제 클릭수를 추적하는 것은 정말 멋진 일이지만, 그것만으로는 충분하지 않은 경우가 많습니다.
특정 사용자를 추적하고 싶을 수도 있습니다. 어쩌면 누가 무엇을 하고 있는지 알고 싶을 수도 있습니다. 어쩌면 사용자 행동을 분석하기 위해 퍼널을 만들고 있을 수도 있습니다.
이런 경우 mixpanel은 2가지 기능을 제공합니다.
식별
재설정
따라서 높은 수준에서 사용자가 로그인한 후 호출할 수 있습니다
mixpanel.identify("whatever identified you want (usually email or userid)")
로그아웃 시 재설정할 수 있습니다
mixpanel.reset()
이제 people.set() 메소드
를 사용하여 사용자에 대한 추가 컨텍스트나 세부정보를 추가할 수도 있습니다.예를 들어
npm install mixpanel-browser
더 많은 시나리오를 처리하기 위해 추가, 통합, 증가 등과 같은 몇 가지 추가 방법이 있지만 이 기사의 초점이 아니므로 건너뜁니다. 자세한 내용은 여기에서 확인하세요
하지만 익명 사용자는 어떻습니까?
이제 많은 애플리케이션(특히 공개 사이트)에서 콘텐츠를 보기 위해 로그인이 필수는 아닙니다.
그런데 로그인하지 않은 사람들을 어떻게 추적하나요?
이러한 모든 시나리오를 처리하기 위해 두 가지 유틸리티 함수를 더 만들어 보겠습니다.
NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"
이를 통해 알려진 사용자와 알려지지 않은 사용자를 추적할 수 있습니다.
사용 예는 다음과 같습니다. 루트 파일 중 하나 — (앱 라우터의layout.tsx 파일, 페이지 라우터의 _app.tsx)
다음을 추가하세요
import mixpanel from 'mixpanel-browser';
// Define event names as constants to prevent typos
export const ANALYTICS_EVENTS = {
PAGE_VIEW: 'Page View',
BUTTON_CLICK: 'Button Click',
FORM_SUBMIT: 'Form Submit',
USER_SIGNED_IN: 'User Signed In',
USER_SIGNED_UP: 'User Signed Up',
USER_SIGNED_OUT: 'User Signed Out',
// ... other events
};
// Initialize mixpanel
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;
if (MIXPANEL_TOKEN) {
mixpanel.init(MIXPANEL_TOKEN, {
debug: process.env.NODE_ENV === 'development',
track_pageview: true,
persistence: 'localStorage',
ignore_dnt: true,
});
}
이렇게 하면 사용자가 사이트를 방문할 때 적절하게 초기화됩니다.
향후 데이터를 수집하여 이 특정 사용자에게 할당할 수 있습니다.
사용 예
이제 재미있는 부분이 나옵니다. 다음 코드를 확인하고 필요에 따라 업데이트하세요.
export const MixpanelAnalytics = {
track: <T extends Record<string, any>>(
eventName: string,
properties?: T & CommonEventProperties
) => {
try {
if (MIXPANEL_TOKEN) {
mixpanel.track(eventName, {
...properties,
timestamp: Date.now(),
path: typeof window !== 'undefined' ? window.location.pathname : undefined,
});
}
} catch (error) {
console.error('Error tracking event:', error);
}
},
pageView: (pageName: string, properties?: Record<string, any>) => {
try {
if (MIXPANEL_TOKEN) {
MixpanelAnalytics.track(ANALYTICS_EVENTS.PAGE_VIEW, {
page: pageName,
...properties,
});
}
} catch (error) {
console.error('Error tracking page view:', error);
}
}
};
위 기능에서는 추적 데이터를 사용하여 특정 사용자의 프로필을 추적하고 특정 웹사이트에 대한 방문도 계산하고 있는지 확인합니다.
멋지죠?
모범 사례
분석 작업 시 데이터의 일관성을 유지하는 것이 매우 중요합니다.
따라서 분석 이벤트에 적합한 유형을 추가하세요.
예를 들어
이벤트에 대한 상수를 정의합니다.
이벤트 이름에 일반 문자열을 사용하지 마세요.
MixpanelAnalytics.track("VISIT_WEBSITE", {
website_name: name,
website_url: website,
visit_count: (mixpanel.get_property('total_website_visits') ?? 0) + 1,
});
유형 안전
이벤트 페이로드의 경우 유형을 사용하여 일관된 구조를 사용해야 합니다
mixpanel.init(MIXPANEL_TOKEN, {
track_pageview: true, << HERE
...others
});
사용자 속성
세션 전반에 걸쳐 항상 일관된 사용자 속성을 유지하세요.
mixpanel.identify("whatever identified you want (usually email or userid)")
그렇지 않으면 나중에 데이터가 쓸모 없게 됩니다.
결론
클라이언트 측 구성 요소에서 분석 초기화를 적절하게 처리해야 합니다.
또한 중요한 사용자 데이터가 개인정보 보호정책 및 데이터 보호 규정에 따라 적절하게 처리되는지 확인하세요.
오늘 새로운 것을 배웠기를 바랍니다.
좋은 하루 보내세요!
위 내용은 NextJS 애플리케이션에서 Mixpanel Analytics 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!