ヒートマップとゾーニングの作成方法

この記事では、新しいHeatmapsおよびZoningsをゼロから、または利用可能なテンプレートを使用して作成する方法をご案内します。

Heatmapsは、サイトのページ全体にわたるユーザーエンゲージメントの大まかな概要を取得することを可能にします。クリック、移動、スクロールアクションなどのユーザーのインタラクションを視覚化し、データを色の温度スケールで表現します。

Zonings（Growth、Pro、Enterpriseプラン）は、サイトのページ上のユーザーエンゲージメントを同様に分析できますが、より詳細な指標を用い、ページを定義されたゾーンに配置します。各ページのゾーンは色で表され、データのオーバーレイが簡単に視覚化されます。

開始前に

• HeatmapまたはZoningを作成する前に、分析したいURLで少なくとも1つのセッションがキャプチャされていることが重要です。
• Heatmaps: Heatmapのデスクトップ表示にデータが表示されない場合は、タブレットおよびモバイル表示を確認する価値があります。ユーザーがデスクトップデバイスからURLにアクセスしていない可能性があります。
• Heatmaps: Heatmapが利用できない場合は、セッションのキャプチャ設定が特定のページに限定されているか、イベントに依存していないかを確認してください。これにより、分析したいURLが除外されている可能性があります。

新しいHeatmapまたはZoningの作成

注: プランによって、Heatmapsメニュー（無料プラン）またはZoning Analysisメニュー（Growth、Pro、Enterpriseプラン）が表示されます。Zoning Analysisがある場合、Zoningを作成するとHeatmapも自動的に作成されることに注意してください。

1. メインメニューから「Heatmaps」/「Zoning Analysis」に移動します。
2. 「Start from scratch」を選択するか、「+ New heatmap」/「+ New Zoning」をクリックします。
3. 以下のように分析を定義し、「Continue」をクリックします。

• 分析したいページまたはページグループを選択し、「Apply」をクリックします。
  • Zonings: Zoningを作成する際には、以下の選択肢があります。
    • 「Page group on the fly」: 特定のURLまたは複数のURLを特定の条件で分析
    • 「All page groups」: 既存のマッピングからページグループを分析

• 分析をフィルタリングする
  • デバイス、日付範囲、およびセグメントを選択します。
  • ドロップダウンメニューを使ってスクリーンショットURLを定義します。

4. 次のいずれかのオプションを使ってスクリーンショットを選択します：

• 提案されたスクリーンショットのいずれかを選択します。

• 「新規スクリーンショットを撮る（ライブサイトから）」をクリックします。

  

  • 開いたウィンドウでサイトを表示し、「スクリーンショットをキャプチャ」を選択し、続けて「Contentsquareに保存」を選びます。ヒント：キーボードショートカット（通常、MacはCMD+S、WindowsはCtrl+S）を使ってスクリーンショットをキャプチャすることもできます。

    

• スクリーンショットライブラリからさらに多くのスクリーンショットを表示（ProまたはEnterpriseが必要）できます。

スクリーンショットが撮れない場合は、広告ブロッカーがContentsquareをブロックしている可能性があります。ブラウザのツールバーにある広告ブロッカーのアイコンをクリックし、「このサイトで無効にする」を選択してから、ページを更新して再試行してください。

5. 新しく作成した分析に満足したら、右上の「分析を保存」ボタンをクリックして必ず保存してください。手動で保存されていないヒートマップやゾーニングはリストに表示されません。これらは未保存のゾーニングタブに30日間保存され、その後永久に削除されます。

HeatmapまたはZoningの次のステップ

HeatmapまたはZoningを作成した後、以下のことができます：

• 異なるデバイス、時間枠、またはセグメントを選択してデータを絞り込み、探索する。
• 適用したフィルタ付きのHeatmap/ZoningのURLのセッションリプレイを「View replays」ボタンをクリックして表示する。
• Heatmapタイプをクリック数、移動、スクロール、または注目に切り替える。

Zoningとゾーンの作成（Growth、Pro、Enterpriseプラン）

Zoningを作成すると、ZoningとHeatmapの間を切り替えて、より詳細な分析を行うことができます。

特定のゾーンを作成する方法

ゾーンは、サイトのHTML構造を利用してページ上の要素の位置を特定するカラフルなデータオーバーレイです。これらはZoning内で使用され、サイトのページのスクリーンショットを分析します。新しいゾーンを作成することも、既存のゾーンを消去することもできます。

1. ゾーンを作成するには、分析でデフォルトで有効になっている編集モードにいることを確認してください。
   1. 分析中に編集モードをアクティベートする必要がある場合は、「Edit zones」ボタンをクリックして有効化できます。
2. ドロップダウンメニューからゾーン作成モードを選択します。一度に1つまたは複数のゾーンを作成できます。

• シングルゾーンモード： 「Single」 ボタンをクリックし、ゾーンを作成したいコンテンツにホバーします。表示される色付きの枠内をクリックしてください。ゾーンが作成されます。
• マルチゾーンモード： 「Multi」 ボタンをクリックし、コンテンツにホバーします。表示される色付きの枠内をクリックすると、ゾーンが作成されます。
  • 注：「Multi」ゾーンモードは、HTML構造の同じ階層レベルのゾーンのみを識別します。
• トップゾーン（旧スマートゾーン）： 右側パネルの「Top zones」ボタンをクリックすると、ページ上で最もクリックされたゾーンを確認できます。トップゾーンは「Click rate（ページビュー単位）」、「Click recurrence」、および「Revenue」指標でのみ表示されます。

AIによる事前作成ゾーニング

事前作成されたゾーニングは、新しいプロジェクトでAIサービススケジュールを承認した場合に生成されます。

ページ分析の開始を支援するために、これらのゾーニングはAIを使用して自動的に生成されます。生成のために、AIは以下を行います：

• ハイレベルマッピングから主要なページタイプを特定
• 代表的なページのスクリーンショットを取得
• 共通のページレイアウトに基づいてゾーンを定義
• 関心のある各エリアにゾーン名を割り当て

生成後、ゾーニングはSenseアイコン付きでゾーニング分析リストに表示され、編集や絞り込みが可能で、すぐに分析に使用できます。

これらのゾーニングは以下を支援します：

• 手動設定なしで即座にページエンゲージメントを分析
• ページのどのエリアが最も注目を集めているかを理解
• 異なるページタイプ間でユーザー行動を比較
• 最適化の機会を特定

注：AIによる事前作成ゾーニングを削除すると再生成できません。新しいゾーニングは手動で作成する必要があります。
 

テンプレートからヒートマップまたはゾーニングを作成

注：利用可能なテンプレートはプランによって異なります。

ヒートマップやゾーニングを一から作成する代わりに、利用可能なテンプレートから選択し、画面の指示に従ってください。

テンプレートからABテストを作成

Contentsquareインターフェースに含まれる効率的なワークフローを通じて、連携されたテストプラットフォームでABテストを作成および分析します。

以下の手順に従ってABテストを作成および分析してください：

1. 「ABテスト」ボタンを選択して始めます。
2. テストしたいページまたはページグループを選択し、次にテストしたい実験のリストから1つを選択し、「分析」をクリックします。
3. Contentsquareは各バリアントに最も正確なスクリーンショットを自動的に決定し、それぞれのHeatmapまたはZoningを開き、並べて比較表示します。なお、バリアントが2つ以上ある場合は、比較モード中にHeatmap/Zoningを簡単に切り替えることができます。

ヒント: 比較モードでHeatmap/Zoningを開いた後でも、上記のようにスクリーンショット、日付範囲、セグメント、デバイスを変更できます。このステップの後でも、必要に応じて手動で新しいスクリーンショットをキャプチャするオプションがあります。

ABテストの分析

ABテストが作成されたら、以下のことができます：

• ゾーンレベルでバリアントのパフォーマンスを比較する
• クリック率、露出率、エンゲージメント指標を分析する
• コンバージョンの違いを生み出す要素を特定する
• バリアント間のユーザー行動パターンを監視する

パーソナライズされたセグメントに基づくZoningの作成

なぜパーソナライズされたセグメントに基づくZoningを作成するのか？

• 顧客セグメントごとに異なるコンテンツでパーソナライズされたキャンペーンを作成するため。
• 異なるページ構造でトラフィックソースのバリエーションを得るため。
• 異なるセグメントに影響を与えるデイリーのコンテンツ変更を確認するため。
• 複数のバリアントでハイパーパーソナライズされた体験を得るため。

前提条件

このテンプレートはProおよびEnterpriseプランのみ利用可能です。比較したいオーディエンスのために、パーソナライゼーション連携機能がインストールされているか、Contentsquareでセグメントが既に作成されている必要があります。この記事でセグメントについてさらに詳しく読むことができます。

プロジェクトに連携機能を追加できるのは管理者ユーザーのみです。連携機能については連携機能セクションでさらに詳しく学ぶことができます。

このテンプレートを使ってパーソナライズされた体験を分析し、異なるオーディエンスセグメントがコンテンツとどのように相互作用するかを比較しましょう。

以下の手順に従って、パーソナライズされたZoningを作成し分析してください：

1. 開始するには、「Personalization」テンプレートボタンを選択します。
2. 分析したいページまたはページグループを選択し、「継続」をクリックします。
3. 異なるタブからセグメントを選択します:
   1. Personalization連携機能がある場合は、利用可能なリストから実験を選択します。注: 過去2週間に少なくとも1回のページビューがある実験のみがリストに表示されます。
   2. 連携機能がインストールされていない場合は、比較したいContentsquareのセグメントを選択します。
4. 「分析」をクリックします。

Contentsquareは各セグメントのSession Replayから自動的にスクリーンショットを取得し、それぞれのゾーニングを開いて並べて比較します。注: 2つ以上のセグメントがある場合は、比較モード中に簡単にゾーニングを切り替えることができます。

サードパーティ連携機能のリスト

サードパーティ連携機能は、カタログで利用可能な既存のABテスト＆Personalization連携機能と同じです。詳細はヘルプセンターのこのセクションの連携機能についてをご覧ください。

Personalizationキャンペーンの分析

Personalization分析が作成されたら、以下のことができます:

• ゾーンレベルでセグメントのパフォーマンスを比較する。
• クリック率、露出率、エンゲージメント指標を分析する。
• 各オーディエンスに響くパーソナライズされた要素を特定する。
• セグメント間のユーザー行動パターンを監視する。

関連する記事

• ゾーニング: ゾーニングの許可と削除の管理方法
• ゾーニング: ゾーニング分析でのショートカットの使い方
• ヒートマップ: ヒートマップの種類