ビジュアルラベル作成

ビジュアルラベリングは、サイト上で直接クリックした要素から追跡イベントを作成するため、技術者以外のAmplitudeユーザーはコードを書いたりページ構造を理解したりすることなくイベントを定義できます。この機能には、サイトでの自動キャプチャが必要です。

Amplitudeは、ラベル付きイベントを、ユーザーが他の方法で作成したイベントとは別に管理します。 ラベル付きイベントのデータに問題がある場合は、エンジニアリングチームを巻き込むのではなく、［ラベル付きイベント］タブ内で調整を行います。

前提条件

• Amplitude Browser SDK 2.10.0 以降。
• SDK の config.autocapture.elementInteractions オプションは true に設定されています。詳細については、「ブラウザ SDK の設定」を参照してください。

視覚的なラベル付けを使用してラベル付きイベントを作成する

ビジュアルラベル付けを使用して新しいラベル付きイベントを作成するには、次の手順に従ってください。

1. Amplitudeデータを開き、Visual Labelingをクリックします。
2. ドロップダウンメニューをクリックして、必要なURLを選択するか、新しいURLを追加します。
3. **[ラベル付けを開始] **をクリックします。 Amplitudeはウェブサイトやアプリを新しいタブで開き、ページ上部にビジュアルラベル作成ツールバーがあります。
4. ラベル付けしたい要素をクリックします。 視覚的なラベル付けオーバーレイが表示されます。
5. ビジュアルラベル付けオーバーレイに、ラベル付けされたイベントの名前、説明、およびカテゴリを入力します。 ユーザーが要素をクリックしたとき、または要素が変更されたときに追跡を実行するかを選択します。ビジュアルラベリングでは、デフォルトでclickedイベントが使用されます。必要に応じて定義を改良し、フィルタを選択します。
6. [保存] をクリックします。Amplitudeが同じまたは類似した定義を持つ既存のイベントを検出した場合、イベントが保存される前に警告が表示されます。 詳細については、『イベントの重複を避ける』を参照してください。Amplitudeはラベル付きイベントを保存し、ラベル付きイベントを表示するオプションを含む確認メッセージを表示します。
7. ラベルを付ける各イベントについてこの操作を繰り返します。
8. 別の要素を選択してラベル付けを続けるか、作業が完了した場合は「Back to Amplitude」をクリックしてください。
9. （オプション）「ナビゲート」をクリックすると、サイトの別の部分に移動し、さまざまなページ上のより多くの要素にラベルを付けられます。

作業が完了したら、Amplitudeに戻り、ラベル付きの各イベントのタグ、テキスト、セレクター、ページURLを手動で更新できます。

AI生成のCSSセレクター

AmplitudeはAIを使用して、ビジュアルラベリングプロセス中にウェブページ上の要素に対して正確なCSSセレクターを推奨します。 要素をクリックしてラベル付けすると、Amplitudeは意図したターゲットを最もよくキャプチャできるセレクターを自動的に提案します。

AIによって生成されたCSSセレクターは、個々の要素（ボタンなど）と要素のグループ（リストやプロダクトタイルなど）に表示されます。

AIは、選択された要素の文脈を理解することにより、名前と説明フィールドを事前に入力します。 これらのフィールドに対するAI生成された入力をいつでも変更できます。

イベントの重複を回避

ラベル付きイベントを保存するとき、Amplitudeは既存のイベントとの2種類の重複をチェックし、イベントを終了する前に警告を表示します。

• 同じ定義: 別のラベル付きイベントがすでにまったく同じページ要素とインタラクションをキャプチャしています。 Amplitude は This labeled event already exists 警告を表示します。Viewをクリックして既存のイベントを開き、新しいイベントを作成する代わりにそのイベントを使用するかどうかを決定します。
• 類似ページ要素: 別のラベル付きイベントは、定義が同じではない場合でも類似ページ要素と一致します。 Amplitude は Event has a similar definition 警告を表示します。［View］をクリックして、新しいイベントを既存のイベントと比較します。Amplitudeは、各イベントを定義する画面上の要素を強調表示するため、それらを区別できます。

保存前にこれらの警告を確認しておくと、トラッキング計画全体で重複したカバレッジを避けられ、イベントタクソノミーをクリーンに保つことができます。既存のイベントが同じインタラクションをカバーしている場合は、新しいイベントを作成するのではなく、既存のイベントを使用してください。

ラベル付きイベントを編集する

サイトのコードが変更された場合は、ラベル付きイベントの定義を更新して一致させる必要があります。 自動キャプチャは未加工のクリックイベントを一貫してキャプチャするため、ラベル付きイベントの定義を更新して、データのギャップを修正できます。

ラベル付きイベントを編集するには、次の手順に従ってください。

1. Amplitude データを開き、[イベント] をクリックし、[ラベル付きイベント] タブを選択します。
2. 編集したいラベル付きイベントを選択します。 フライアウトタブで、「編集」をクリックします。
3. サイトの変更によりイベントがデータを収集しなくなった場合は、[アクションを選択...] をクリックして下部に別の条件を追加してください。
4. 新しいサイト構造に基づいて新しい条件を追加します。

ラベル付きイベントを修復する

サイトの DOM を変更すると、サイト上の特定の要素に対するビジュアルラベリングの参照が壊れることがあります。 また、要素が別の場所に移動した場合や、その構造が変更された場合に、ラベル付きイベントを修復する必要があります。

ビジュアルラベリングの修復フローは、元の定義を置き換えるのではなく、セカンダリ定義を持つ新しいORステートメントを追加することで、イベント履歴を保存します。 イベントが新しい要素の追跡を開始する間も、すべての履歴データは損なわれません。

ラベル付きイベントを修復するには:

1. Amplitude Dataを開き、左側のレールにあるEventsをクリックし、次にメインセクションでLabeled Eventsタブをクリックします。
2. ラベル付きイベントを選択します。 フライアウトタブでは、次の操作を実行できます：
   • 過去30日間にAmplitudeがイベントを確認した回数を示すチャートです。
   • ラベル付きイベントに追加した各定義のグラフ。
3. イベントボリュームを持たないイベントを修復するには、［修復］をクリックします。これにより、選択したイベントのコンテキストを含むビジュアルラベル付けフローが開きます。
4. ページ上の新しい要素を選択して、ラベル付きイベントの定義を更新します。 修復プロセスでは、この条件が既存の定義に追加の OR 条件として追加され、すべての履歴データが保持されます。
5. 「保存」をクリックしてビジュアルラベラーを終了し、更新された定義を適用します。

設定ミスのイベントを検索

Amplitudeは、ラベル付けされたイベントが正常に動作していないかどうかを示す情報を提供します。

［*データ］>［イベント］に移動し、［ラベル付きイベント］タブを開きます。*最近度列には、Amplitudeが各イベントを最後に追跡した時刻が表示されます。 最近表示されなかったイベントは、イベント定義に問題があることを示している可能性があります。

ラベル付きイベントとイベントボリューム

自動キャプチャを有効にすると、Amplitudeはサイト上のクリックとページ変更イベントの追跡を開始します。 これらのイベントは、イベント総量にカウントされます。 ラベル付きイベントは、これらのイベントの上にある仮想レイヤーのように機能し、特定のタイプのクリックを定義し、そのクリックを分析で使用するのに役立ちます。 ラベル付きイベントは、オートキャプチャ以外のイベントボリュームに影響を与えません。

たとえば、適切に計測されたサイトでは 1 日に 10,000 件のイベントが記録され、オートキャプチャでは 1 日に 2,000 件ものイベントが追加される可能性があります。 このサイトでは、毎日のイベント数が 20% 増加することがあります。 計装が少ないサイトでは、計装済みイベントを1日に1,000件しか記録できません。プラグインがさらに 2,000 件のイベントを追加すると、200% の増加とみなされます。

どちらの場合も、毎日のイベント数が増加しているのは、クリックとページ変更のイベントを追跡することによるものです。 ラベル付きイベントはイベント数に影響を与えません。

制限事項

• イベントストリーム: ラベル付きイベントは、ライブイベントやユーザールックアップやセッションリプレイのイベントストリームでは使用できません。代わりに、生Element clickedおよびElement changedイベントが表示されます。
• Google Chrome拡張機能：Amplitude Event エクスプローラー Chrome拡張機能はブラウザからの生イベントのみを表示するため、ラベル付きイベントは表示されません。
• 送信先イベントストリーミング：イベントストリーミングを使用して、ラベル付きイベントを送信先に送信することはできません。ラベル付きイベントを使用してコホートを定義し、その後コホート同期を使用して他の宛先と統合できます。
• コンテンツセキュリティポリシー（CSP）：Amplitudeは、お客様のサイトとAmplitudeとの間でタブ間での通信を必要とします。 ビジュアルラベリングでは、cross-origin-opener-policyがunsafe-noneであるか、未設定である必要があります。

トラブルシューティング

自分のサイトでビジュアルラベリング機能が確認できない

ビジュアルラベル作成ツールがサイトに表示されない場合は、以下のことを確認してください。

• ポップアップツールや広告ブロックツールを有効にしている場合、これらのツールがビジュアルラベリング体験を妨げる可能性があります。 広告ブロッカーを無効にしてから再試行してください。
• 入力したURLが別のURLにリダイレクトされると、ビジュアルラベル付け機能がロードされない場合があります。セキュリティ上の理由から、ラベル付けするページのドメインは、Amplitudeで入力したドメインと一致している必要があります。 リダイレクトが完了したら、最終的なURLを使用してみてください。
• Cross-Origin-Opener-Policyがunsafe-noneに設定されているか、未設定であることを確認してください。