ゾーニングインサイト

Amplitude アカデミー

ゾーニングインサイトを使用してページパフォーマンスを分析および最適化

Amplitudeのゾーニングインサイトを使用して、ページ上の要素レベルのエンゲージメントを測定し、ゾーンのメトリクスを解釈し、コンバージョンとページのパフォーマンスを向上させるデータ主導型の意思決定を行います。

ゾーニングインサイトは、ユーザーがページの特定の領域（ヒーローセクション、ナビゲーションバー、行動を促すブロックなど）とどのように関わっているかを測定します。ページのスクリーンショットに名前付きエリア（ゾーン）を描画すると、Amplitudeは各ゾーンのクリック、露出、スクロールのメトリクスをレポートします。ゾーニングインサイトは、バナー、フォーム、CTA など特定の領域でのエンゲージメントを重視する場合に使用できます。カスタム領域を定義せずにページ全体にわたってクリック数とスクロール数を集計するには、代わりにヒートマップを使用してください。

ゾーニングインサイトでは、要素レベルのメトリクスを計算するために、自動的に取得されたインタラクションデータ（クリック露出やスクロールなど）が必要です。ゾーニングインサイトは自動キャプチャを使用してページレベルのクリックイベントとインタラクションデータを収集しているため、イベント数を増やす可能性があります。

権限

管理者またはマネージャの役割を持っている場合は、任意のゾーン分割分析を作成、更新、削除できます。
メンバーの役割を持っている場合、独自のゾーン分割分析を作成、更新、または削除できますが、他のユーザーのゾーン分割分析を編集することはできません。
Viewer ロールを持っている場合、ゾーニング分析のみを表示できます。詳細については、「ユーザーの役割と権限」を参照してください。

可用性

ゾーニングインサイトはウェブとモバイルウェブで利用できます。

ゾーニングインサイトとセッションリプレイおよびヒートマップとの関係

ゾーニングインサイトは、セッションリプレイやヒートマップとは異なります。

セッションリプレイ: ユーザーセッションを記録するため、リプレイを視聴して動作をデバッグできます。
ヒートマップ: ページ上のクリック数、スクロール数、セレクターレベルのインタラクション数を集計し、カスタム領域を定義しません。
ゾーニングインサイト: ページ上のカスタムエリア (ゾーン) を定義し、それらのエリア内のエンゲージメントを分析します。ゾーニングインサイトは、ページ全体や生のセレクターではなく、特定の領域（バナー、フォーム、CTA など）に関心がある場合、セッションリプレイやヒートマップを補完します。

ゾーニングインサイトを設定する

ブラウザ SDK、Google タグマネージャー、Tealium iQ、セグメントのセットアップに関する完全な手順については、「ゾーニングインサイト計測」を参照してください。

最もシンプルで完全なセットアップは、完全な自動キャプチャを有効にすることです。これにより、すべてのゾーニングインサイトのメトリクスプラス、他のAmplitude機能で使用できるデータが得られます。

javascript

amplitude.init(AMPLITUDE_API_KEY, OPTIONAL_USER_ID, {
  autocapture: true,
});

選択的にオプトインすることを希望する場合、最低限必要なオプションは次のpageViewsとelementInteractionsおりです。

javascript

amplitude.init(AMPLITUDE_API_KEY, OPTIONAL_USER_ID, {
  autocapture: {
    pageViews: true,
    elementInteractions: {
      viewportContentUpdated: true,
    },
    frustrationInteractions: true,
  },
});

ページビュー数: 必須です。ページレベルのエンゲージメント指標を計算します。
要素の相互作用：必須です。クリック率、露出率、スクロールリーチを計算します。 viewportContentUpdated内のelementInteractionsオプションは、コンテンツが動的に読み込まれるときに要素の露出を追跡します。
フラストレーションのインタラクション: オプションです。ゾーニングインサイトが機能するには必須ではありませんが、レイジクリックとデッドクリックのメトリクスを有効にします。trueに設定されている場合、レイジクリックとデッドクリックはデフォルトでオンになります。

オプションとして、cssSelectorAllowlistやviewportContentUpdated.exposureDurationなどelementInteractions（デフォルト：150ms）の追加オプションを渡すこともできます。

ゾーニングインサイトのメトリック

ゾーニングインサイトは、各ゾーンについて次のメトリクスを計算します。

メトリック	定義	重要な理由
クリックの繰り返し	要素を少なくとも1回操作したユーザーごとの平均クリック数。	ユーザーが繰り返しクリックする要素にフラグを立てます。これは、混乱や強い意図を示している可能性があります。
クリック分布	ページ上の各要素に対するクリック数の内訳。	このページのすべてのクリックのうち、各要素へのクリックの割合を示します。すべての要素の合計は 100% です。
クリック率（セッションレベル）	特定の要素をクリックしたページ閲覧者の割合。	この要素をクリックした訪問者の割合をセッションスコープで測定します。
クリック率（ページビューレベル）	ページビューごとに測定された、特定の要素をクリックしたページ閲覧者の割合。	このページを閲覧した訪問者のうち、この要素をクリックした人の割合を示します。
露出率	要素が表示されたページビューの割合です。	ビューポートに要素が含まれているページビューの割合を示します。可視性の低下とエンゲージメントの低下を区別できます。
魅力度	ゾーンが表示されていたすべてのページビューのうち、ユーザーがゾーンを閲覧してクリックしたページビューの割合。露出がインタラクションに変わる頻度を測定します。	要素を見たユーザーのうち、何人がその要素をクリックしたかを示します。これは最も直接的なエンゲージメントシグナルです。
レイジクリック（セッションレベル）	特定の要素をレイジクリックしたページ閲覧者の割合。	フラストレーションシグナル：要素に対して素早いクリックが繰り返されているにもかかわらず、応答がない状態。
レイジクリック（ページビューレベル）	特定の要素をレイジクリックしたページ閲覧者の割合。ページビューごとに測定されます。	フラストレーション信号: 反応のない繰り返しの高速クリック（ページビューごとに測定）です。
スクロール範囲	特定の要素がスクロールして表示されたページビューの割合です。	ユーザーがページをどの程度スクロールしているかを示します。これはスクロールマップと同様です。
収益	この要素とのやり取りに起因する収益の合計額。	この要素とのインタラクションによって生み出される収益の量を示します。このメトリクスは、eコマースのパフォーマンス分析に使用してください。
AIオポチュニティスコア	複数の指標を組み合わせたAI生成スコアで、最適化の機会を提供します。	組み合わせたエンゲージメントシグナルに基づき、改善の可能性が最も高い領域を強調表示します。

グロースプランとエンタープライズプランには、収益とAIオポチュニティスコアのオーバーレイが含まれています。

オーバーレイを作成する

ページ上にゾーンを描画し、それらのゾーン内のユーザーエンゲージメントを分析することによってオーバーレイを作成します。オーバーレイは単一ページまたはページグループのいずれかをデータソースとして使用します。

単一ページ: 単一の URL。例：amplitude.com/pricing。
ページグループ: URL ルールによって範囲が設定された関連ページのグループです。たとえば、プロダクト* などです。ページグループでは、オーバーレイはページセット全体にわたって集約されたエンゲージメント指標を表示します。

単一ページのオーバーレイを作成する

Amplitude＞Zoningインサイトに移動します。
Create Overlayをクリックします。
URL を指定します。お使いのプロダクトがヒートマップと同じ URL マッチングオプションをサポートしている場合は、以下を使用できます。
- 単一の URL と完全に一致します。
- 類似した URL に対してワイルドカードを使用したパターンマッチング。
- キーワードまたはセグメントを含む URL の「含む」。
- URL プレフィックスとそのサブページに対する「から始まる」。
［Continue to Page Capture］をクリックします。
正しい URL が表示されていることを確認し、[スクリーンショットを撮る] をクリックします。
スクリーンショットに名前を付けて説明を入力し、保存します。
各ゾーンをクリックして、オンまたはオフにします。
オーバーレイを保存または適用することで、Amplitudeは定義済みゾーンのデータを集計できます。

オーバーレイを保存した後、各ゾーンのメトリクス、ユーザージャーニー、セッション再生を確認してください（たとえば、ゾーンに触れたクリック数、スクロール数、セッション数など）。また、ゾーンごとにコホートを作成することもできます。

また、ページ上のヒートマップのクリックをより正確に把握するために、ヒートマップオーバーレイを有効にすることもできます。

ページグループ

ページグループを使用すると、ページを整理できるため、オーバーレイを1つのURLではなく関連ページのセットに絞ることができます。

AI が提案したページグループ

AmplitudeはサイトのURL構造を分析して論理的なページグループを自動的に提案できるため、ルールを手動で作成する必要がなく、数分でセットアップできます。提案をそのまま受け入れるか、保存する前に修正してください。

ページグループを作成する

**「ページグループを作成」**をクリックし、グループの名前を入力します。
グループの条件またはルールを設定します。たとえば、URL を amplitude.com/ などの特定のドメインで始まるように設定します。
ルールの追加を完了し、「ページグループを作成」をクリックします。
分析するURLを指定します。お使いのプロダクトがヒートマップと同じ URL マッチングオプションをサポートしている場合は、以下を使用できます。
- 単一の URL と完全に一致します。
- 類似した URL に対してワイルドカードを使用したパターンマッチング。
- キーワードまたはセグメントを含む URL の「含む」。
- URL プレフィックスとそのサブページに対する「から始まる」。
保存をクリックします。

サイトマップとページグループを編集または削除する

サイトマップを編集または削除するには、左側のサイドバーにあるサイトマップにカーソルを合わせて [...] を選択し、[編集] または [削除] を選択します。
ページグループを編集または削除するには、ページグループ行で [...] を選択し、[編集] または [削除] を選択します。

リストが長い場合は、下部にある [もっと読み込み] を選択して追加のアイテムを読み込みます。

オーバーレイの比較

2 つのオーバーレイを並べて比較するには、オーバーレイツールバーで [比較] を選択し、アクティブなオーバーレイと一緒に表示する 2 番目のオーバーレイを選択します。 Amplitudeは両方のオーバーレイを同時にレンダリングするため、期間間、ページバリアント間、または異なるオーディエンスセグメント間の変化を評価できます。

ページコンパレータ

［ページ比較ツール］タブを使用すると、ページグループ間のパフォーマンス指標を表内で並べて比較できます。サイトマッピングとオプションのコンバージョン目標を選択して、テーブルにデータを入力します。列には、ビュー数、セッション数、セッションごとのビュー数、直帰率、終了率、スクロール深度、ページ高さ、費やされた時間、アクティビティ、ロード時間（LCP）が含まれます。 列のカスタマイズを使用して表示されるメトリクスを調整し、比較を使用して特定のページグループを選択して直接比較できます。

ゾーンコンテキストメニューアクション

保存済みゾーンを右クリックすると、そのコンテキストメニューが表示されます。コンテキストメニューには次のアクションが含まれています。

ユーザージャーニーの表示：このゾーンとやり取りしたセッションにスコープを絞ったユーザージャーニー分析を開きます。
セッションリプレイの表示：セッションリプレイをフィルタリングして、ユーザーがこのゾーンとやり取りした場所のリプレイを表示します。
コホートを作成：このゾーンとやり取りしたユーザーの行動コホートを作成します。このコホートは他のAmplitudeチャートで使用できます。
ゾーンを削除: オーバーレイからゾーンを削除します。

ゾーニングインサイト分析のエクスポート

ゾーニングインサイトデータをエクスポートしてチームメイトと共有したり、プレゼンテーションやレポートに含めたりできます。

オーバーレイエディタツールバーの [共有] ドロップダウンを選択して、分析をエクスポートします。

CSVをダウンロードする

現在のオーバーレイのゾーンメトリクスをCSVファイルとしてエクスポートします。CSVエクスポートを使用してオフライン分析やスプレッドシートへのインポート、またはチーム間でエンゲージメントデータを共有できます。

表示可能なオーバーレイのすべてのゾーンメトリクスをエクスポートします。
シングルビューと比較ビューの両方で動作します。

PNG をダウンロードする

現在のオーバーレイビューをPNG画像としてエクスポートします。エクスポートには、すべてのゾーンオーバーレイとメトリックラベルが表示されているページのスクリーンショットが含まれています。

メトリックバッジが付いたオーバーレイ全体をキャプチャします。
エクスポートはバックグラウンドで実行されます。Amplitudeが画像を生成している間、読み込みインジケータが表示されます。
準備が整ったらファイルが自動的にダウンロードされます。
シングルビューと並列比較ビューの両方で動作します。

リンクをコピーする

共有可能なURLを現在のオーバーレイにコピーします。組織内のゾーニングインサイトへのアクセス権を持つユーザーは誰でもこのリンクを開くことができます。

比較ビューへのリンクをコピー

現在の比較対象と比較モードでオーバーレイを開く URL をコピーします。 **[比較ビューへのリンクをコピー]**オプションは、オーバーレイをアクティブに比較している場合にのみ表示されます。

エクスポート要件

エクスポートする前にオーバーレイを保存してください。 Amplitudeは保存されていないオーバーレイのエクスポートオプションを無効にします。
グロースプランとエンタープライズプランには、CSV と PNG のエクスポートが含まれています。プランにエクスポートが含まれていない場合は、エクスポートメニュー項目にロックアイコンが表示されます。

トラブルシューティング

CSS スタイルは Zoning の背景キャプチャで正しく表示されません。

外部スタイルシートは通常、ゾーニングの背景キャプチャで正しく表示されます。ただし、ビューポートの高さ (vh) 単位を使用するスタイルなど、一部のスタイルでは調整が必要になる場合があります。これは、ゾーニング機能によってキャプチャされた背景が iframe 内に表示されるためです。

ゾーニングでは rrweb を使用して訪問者のブラウザ内のページをキャプチャし、インラインスタイルシートのルールを使用しているため、Amplitude はこれらの調整を行えます。クロスオリジンスタイルシートの<link> link タグにこのcrossorigin属性がない場合、ブラウザは CSS ルールへのアクセスをブロックします (stylesheet.cssRules) （これはサーバーが Access-Control-Allow-Origin: * を送信した場合でも同様です）。この場合、キャプチャはルールをインライン化する代わりに外部スタイルシートを参照するため、Zoning は背景を正しく表示するために必要な調整を行えなくなります。

この問題を解決するには、異なるオリジンからロードする<link rel="stylesheet">すべてのに追crossorigin="anonymous"加し、スタイルシートサーバーがオリジン間のアクセスを許可していることを確認してください。

html

<link
  rel="stylesheet"
  href="https://cdn.example.com/styles.css"
  crossorigin="anonymous"
/>

これは役に立ちましたか？