Vue를 위한 분석

Vue를 위한 제품 분석

스크립트 태그 하나로 Vue 또는 Nuxt 앱 전반에서 페이지뷰, 이벤트, 세션 리플레이, 히트맵을 캡처하고, Vue Router 내비게이션을 자동으로 추적하세요.

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

왜 중요한가

Vue 팀이 마침내 볼 수 있는 것

라우터 뷰가 누락됩니다

Vue Router는 페이지 새로고침 없이 컴포넌트를 전환합니다. PulsePanda는 각 내비게이션을 집계하여 뷰 수가 실제와 일치하도록 합니다.

기능 수준 데이터 없음

커스텀 이벤트를 추적하여 사용자가 앱 내에서 실제로 어떤 기능과 플로우에 도달하는지 확인하세요.

마찰이 보이지 않습니다

히트맵과 세션 리플레이는 사용자가 컴포넌트에서 어디서 망설이거나 분노 클릭하거나 이탈하는지 보여줍니다.

설정

Vue에 PulsePanda 추가하기

HTML 진입 파일에 스니펫을 추가하세요. 일반 Vue에서는 index.html을 사용하고, Nuxt에서는 nuxt.config의 app head를 통해 추가하세요.

Vue — index.html

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

Nuxt에서는 nuxt.config.ts의 app.head.script를 통해 동일한 스크립트를 추가하면 서버에서 렌더링되는 모든 페이지에 적용됩니다.

워크플로

설치에서 인사이트까지

스니펫 설치

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

중요한 것을 추적하세요

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

데이터로 행동하기

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

제공 내용

스니펫 하나로 전체 그림을

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

자주 묻는 질문

Vue 관련 질문

PulsePanda가 Vue Router 내비게이션을 추적하나요?

예. SDK는 History API 변경을 후킹하므로, 모든 Vue Router 또는 Nuxt 라우트 전환이 자동으로 페이지뷰로 기록됩니다.

Nuxt 서버 측 렌더링과 함께 작동하나요?

예. nuxt.config의 app head에 스니펫을 추가하면 모든 렌더링된 페이지에 로드됩니다. 추적은 하이드레이션 후 브라우저에서 실행됩니다.

Vue에서 커스텀 이벤트를 추적할 수 있나요?

예. 컴포넌트 어디서든 메서드, 컴포저블, 이벤트 핸들러에서 pulsepanda.track("event", { props })를 호출하세요.

더 살펴보기

Vue 앱에 분석 추가하기

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

무료로 시작하기