Vue の分析

Vue のプロダクト分析

単一のスクリプトタグから、Vue または Nuxt アプリ全体でページビュー、イベント、セッションリプレイ、ヒートマップをキャプチャでき、Vue Router のナビゲーションも自動で追跡されます。

無料で始めるインストールガイド

なぜ重要なのか

Vue チームがついに見られるもの

ルータービューが見逃される

Vue Router はページの再読み込みなしにコンポーネントを切り替えます。PulsePanda は各ナビゲーションをカウントするため、ビュー数が実態と一致します。

機能レベルのデータがない

カスタムイベントを追跡し、アプリ内でユーザーが実際にどの機能やフローに到達するかを把握しましょう。

摩擦が見えない

ヒートマップとセッションリプレイは、ユーザーがコンポーネント内のどこでためらい、激しくクリックし、離脱するかを示します。

セットアップ

PulsePanda を Vue に追加

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() を呼び出して、イベント、セッション、フィードバックを各ユーザーに紐づけます。

データに基づいて行動する

ファネルを構築し、離脱の背後にあるリプレイを確認し、ヒートマップを読み、プロダクト内フィードバックを収集できます — すべて1つのワークスペースで。

得られるもの

1つのスニペットで全体像を把握

1つのスニペットで全体像を把握
分析レイヤー	ページビュー、カスタムイベント、コンバージョンファネル、リテンション。
行動レイヤー	セッションリプレイ、クリックとスクロールのヒートマップ、エラーコンテキスト。
フィードバックレイヤー	プロダクト内アンケート、フィードバックウィジェット、フォーム、機能投票ボード。

よくある質問

Vue に関する質問

PulsePanda は Vue Router のナビゲーションを追跡しますか？

はい。SDK は History API の変更にフックするため、すべての Vue Router または Nuxt のルート遷移が自動でページビューとして記録されます。

Nuxt のサーバーサイドレンダリングで動作しますか？

はい。nuxt.config の app head にスニペットを追加すると、すべてのレンダリングページで読み込まれます。トラッキングはハイドレーション後にブラウザで実行されます。

Vue でカスタムイベントを追跡できますか？

はい。コンポーネント内のどこからでも、メソッド、コンポーザブル、イベントハンドラーから pulsepanda.track("event", { props }) を呼び出せます。

Vue アプリに分析を追加

一度インストールするだけで、数分で分析、セッションリプレイ、ヒートマップ、ファネル、フィードバックを接続できます。

無料で始める