React를 위한 분석

React를 위한 제품 분석

PulsePanda는 React 단일 페이지 앱에 스크립트 태그 하나로 이벤트, 퍼널, 세션 리플레이, 히트맵 등 완전한 제품 분석을 제공하며, 클라이언트 측 라우트 변경을 기본으로 추적합니다.

무료로 시작하기 설치 가이드

왜 중요한가

React 팀이 마침내 볼 수 있는 것

SPA가 페이지뷰 하나만 보고합니다

React 앱은 한 번 로드된 후 브라우저에서 뷰를 전환합니다. PulsePanda는 모든 앱 내 내비게이션을 추적하여 분석 데이터가 단일 랜딩이 아닌 실제 사용을 반영하도록 합니다.

사용된 컴포넌트에 대한 인사이트 없음

관심 있는 버튼과 플로우에서 커스텀 이벤트를 발생시켜 특정 기능과 컴포넌트의 도입을 측정하세요.

재현하기 어려운 UI 버그

세션 리플레이는 렌더링된 DOM과 오류를 캡처하므로 사용자에게 깨진 정확한 상태를 볼 수 있습니다.

설정

React에 PulsePanda 추가하기

PulsePanda는 프레임워크에 구애받지 않으므로, 가장 간단한 설치는 HTML 셸에 스크립트 태그를 넣는 것입니다. 다음에 추가하세요 <head> 진입 HTML 파일의 위치.

Vite — index.html (또는 CRA의 경우 public/index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://pulsepanda.dev/sdk.js"
      data-project="YOUR_PROJECT_ID"
      defer></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

로드되면 호출하세요 pulsepanda.track("event_name", { ...props }) 어떤 컴포넌트에서든 커스텀 이벤트를 기록하고 퍼널을 구축하세요.

워크플로

설치에서 인사이트까지

스니펫 설치

React 프로젝트에 스크립트를 한 번만 추가하세요. 웹 분석, 자동 캡처 클릭, 세션 리플레이, 히트맵이 즉시 수집을 시작합니다.

중요한 것을 추적하세요

호출하세요 pulsepanda.track() 주요 액션에서 그리고 pulsepanda.identify() 로그인 후 이벤트, 세션, 피드백을 각 사용자와 연결하세요.

데이터로 행동하기

퍼널을 구축하고, 이탈 뒤의 리플레이를 보고, 히트맵을 읽고, 제품 내 피드백을 수집하세요 — 모두 하나의 워크스페이스에서.

제공 내용

스니펫 하나로 전체 그림을

분석 레이어페이지뷰, 커스텀 이벤트, 전환 퍼널, 그리고 리텐션.

행동 레이어세션 리플레이, 클릭 및 스크롤 히트맵, 그리고 오류 맥락.

피드백 레이어제품 내 설문, 피드백 위젯, 폼, 그리고 기능 투표 보드.

자주 묻는 질문

React 관련 질문

React Router와 함께 작동하나요?

예. SDK는 History API 내비게이션을 추적하므로, React Router, TanStack Router 또는 모든 클라이언트 라우터의 라우트 변경이 자동으로 페이지뷰로 캡처됩니다.

Create React App 및 Vite와 함께 작동하나요?

둘 다 가능합니다. CRA의 경우 public/index.html에, Vite의 경우 index.html에 스크립트를 추가하세요. 빌드 단계 의존성이 없습니다.

로그인한 사용자를 어떻게 식별하나요?

로그인 후 pulsepanda.identify("user_id", { email, plan })를 호출하면 방문 전반에 걸쳐 세션, 이벤트, 피드백이 동일한 사용자와 연결됩니다.

더 살펴보기

React 앱에 분석 추가하기

한 번 설치하고 몇 분 만에 분석, 세션 리플레이, 히트맵, 퍼널, 피드백을 연결하세요.

무료로 시작하기