Nuxt를 위한 애널리틱스

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

페이지뷰, 커스텀 이벤트, 세션 리플레이, 히트맵까지 — 기능마다 플러그인을 붙이지 않아도 Nuxt 앱에서 방문자가 어떻게 움직이는지 확인할 수 있습니다.

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

왜 중요한가

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

Nitro는 클라이언트 쪽을 가립니다

서버 로그는 라우트가 렌더링됐다는 사실만 알려줄 뿐, 누군가 실제로 읽었는지, 스크롤했는지, 도중에 포기했는지는 알려주지 않습니다. 클라이언트 측 추적이 서버가 보지 못하는 부분을 채웁니다.

소프트 내비게이션이 집계되지 않습니다

첫 로드 이후 Nuxt는 전체 요청 없이 페이지를 교체합니다. 문서 로드만 세는 도구는 세션 전체를 페이지뷰 1건으로 보고합니다.

하이드레이션 오류가 보이지 않습니다

하이드레이션 불일치는 사용자의 화면을 망가뜨리지만 서버 응답은 멀쩡해 보입니다. 리플레이는 방문자가 실제로 마주한 깨진 화면을 그대로 보여줍니다.

설정

Nuxt에 PulsePanda 추가하기

nuxt.config.ts의 app.head 블록에 스크립트를 등록하세요. SSR과 SSG 모두에서 모든 라우트에 적용됩니다.

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://pulsepanda.dev/sdk.js',
          'data-project': 'YOUR_PROJECT_ID',
          defer: true
        }
      ]
    }
  }
})

Nuxt는 History API로 이동하므로 라우트 전환이 자동으로 감지됩니다. 페이지뷰를 기록하기 위해 라우터 훅을 넣을 필요가 없습니다.

워크플로

설치에서 인사이트까지

스니펫 설치

nuxt.config.ts에 스크립트를 한 번만 추가하면 앱의 모든 라우트가 포함됩니다.

중요한 것을 추적하세요

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

데이터로 행동하기

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

제공 내용

스니펫 하나로 전체 그림을

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

자주 묻는 질문

Nuxt 관련 질문

Nuxt SSR 모드에서도 작동하나요?

네. 스니펫은 클라이언트 전용이므로 페이지가 서버 렌더링이든 정적 생성이든, 혹은 둘 다이든 하이드레이션 후에 실행됩니다.

Nuxt 플러그인이나 모듈이 필요한가요?

아니요. 페이지뷰와 리플레이에는 app.head 항목만으로 충분합니다. composable에서 track()을 한곳에 모아 호출하고 싶을 때만 플러그인을 추가하세요.

Nuxt 성능 점수에 영향을 주나요?

태그에 defer가 지정되어 있어 앱이 상호작용 가능해진 뒤에 로드되며, 렌더링이나 첫 페인트를 막지 않습니다.

더 살펴보기

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

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

무료로 시작하기