Remix를 위한 애널리틱스

Remix를 위한 프로덕트 애널리틱스

Remix는 작업을 서버로 옮깁니다. 바로 그래서 브라우저 쪽이 측정되지 않은 채 남습니다. 페이지뷰, 이벤트, 리플레이, 히트맵을 한곳에서 추가하세요.

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

왜 중요한가

Remix 팀이 비로소 볼 수 있게 되는 것

서버 쪽 작업은 클라이언트에 흔적을 남기지 않습니다

loader와 action은 어떤 애널리틱스 태그도 볼 수 없는 곳에서 실행됩니다. 브라우저에서 측정하면 서버에 무엇이 요청됐는지뿐 아니라 그 사람이 실제로 무엇을 했는지가 기록됩니다.

실패한 제출은 아무 일도 없던 것처럼 보입니다

action이 돌려준 검증 오류는 조용히 여정을 끝냅니다. 리플레이는 사용자가 넘어가지 못한 입력란과 그때 표시된 메시지를 보여줍니다.

프리페치가 수치를 부풀립니다

Remix는 마우스를 올리면 라우트를 미리 가져오기 때문에, 서버 로그 기반 분석은 아무도 열지 않은 페이지까지 셉니다. 클라이언트 측 페이지뷰는 라우트가 실제로 표시될 때만 발생합니다.

설정

Remix에 PulsePanda 추가하기

루트 라우트의 문서 셸에서 Meta, Links 옆에 태그를 넣으세요. 그러면 앱 전체에 대해 한 번만 로드됩니다.

app/root.tsx

// app/root.tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react';

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        <script
          src="https://pulsepanda.dev/sdk.js"
          data-project="YOUR_PROJECT_ID"
          defer
        />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Remix는 첫 로드 이후 클라이언트에서 이동하며, SDK가 그 전환을 알아서 따라갑니다. 라우트마다 useEffect를 넣을 필요가 없습니다.

워크플로

설치에서 인사이트까지

스니펫 설치

app/root.tsx에 스크립트를 한 번만 추가하면 모든 중첩 라우트가 포함됩니다.

중요한 것을 추적하세요

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

데이터로 행동하기

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

제공 내용

스니펫 하나로 전체 그림을

스니펫 하나로 전체 그림을
분석 레이어	페이지뷰, 커스텀 이벤트, 전환 퍼널, 그리고 리텐션.
행동 레이어	세션 리플레이, 클릭 및 스크롤 히트맵, 그리고 오류 맥락.
피드백 레이어	제품 내 설문, 피드백 위젯, 폼, 그리고 기능 투표 보드.

자주 묻는 질문

Remix 관련 질문

Remix에서 스크립트는 정확히 어디에 넣나요?

app/root.tsx의 문서 컴포넌트 head 안입니다. 이 파일이 모든 라우트를 감싸므로 태그 하나로 앱 전체가 커버됩니다.

중첩 라우트 전환도 추적하나요?

네. 페이지뷰는 URL을 따라가므로 주소창이 바뀌는 중첩 라우트도 다른 이동과 똑같이 기록됩니다.

action에서 폼 제출을 추적할 수 있나요?

action이 아니라 브라우저에서 추적하세요. 제출이 성공했을 때 track()을 호출하면 이벤트가 해당 세션과 리플레이에 묶인 채로 남습니다.

더 살펴보기

Remix 앱에 애널리틱스를 추가하세요

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

무료로 시작하기