ウェブ実験のセットアップ

Web Experiment を使用すると、新しいコードを作成することなく、A/B 実験や多腕バンディット実験を作成できます。ビジュアルエディタでサイトを開き、実験したい要素を選択してから、そのコンテンツやプロパティを直接変更します。

Web Experiments では Pages を使用して、実験バリアントをウェブサイトのどこに適用するかを制御します。ページを使用すると、サイトの関連性のない部分に影響を与えることなく、実験の範囲を特定のURLに限定できます。

始める前に

Web Experiment を設定する前に、Web Experiment スクリプトをサイトに実装してください。

Web 実験の作成と実行は Feature 実験 とは異なりますが、いくつかのステップは重複しています。

ウェブ実験のセットアップ

ウェブ実験をセットアップするには

1. Amplitude 実験で、_実験 > 実験の作成 > Web 実験_に移動します。

2. 「新しい実験」モードで、実験に名前を付けます。

3. この実験の対象となるページのURLを入力し、ドロップダウンからプロジェクトを選択します。AmplitudeはこのURLを使用して最初のページを作成します。 実験が機能するためには、この URL で Web Experiment を計測する必要があります。

   スクリプトが指定したページにある場合、Amplitude 実験は実験の新しいバリアントとしてそのページをビジュアルエディタで開きます。

   処理バリアントアクションには、要素の変更または URL のリダイレクトという 2 つのオプションがあります。

4. ページのUIのテキスト、色、その他の要素を変更するには、［要素の変更］をクリックします。

5. 変更したい要素をクリックします。

6. 選択した要素の横に編集ツールバーが開き、要素のコンテンツの編集や要素の移動などのクイックアクションを実行できます。

   展開アイコンをクリックしてドローアを開き、CSSスタイルのプロパティを編集します。

   変更内容は現在のバリアントに自動的に適用されます。

7. 実験のために変更したい要素ごとにこのプロセスを繰り返します。

8. （オプション）、[+] をクリックして別のバリアントを追加します。

9. 完了したら、[続行] をクリックします。

実験を設定したら、実験の目標を定義します。

実験の目標を定義するには

1. ページタブで、実験の対象となるページを設定します。新しいページを作成するか、既存の保存済みページを再利用します。作成時に設定したページのみをターゲットにしている場合は、この手順をスキップしてください。

2. 「ページの場所を含める」ドロップダウンから、Amplitude 実験がこれらのページをどのように識別するかを指定します。

   同じパターンを使用して、選択したページから実験を除外します。 正確な実験ターゲット設定のためのページ管理の詳細についてはこちらをご覧ください。

3. この実験に含めることを希望するユーザーをターゲットにしてください。 詳細については、オーディエンスターゲティングを参照してください。 Web実験のオーディエンスターゲティングは、Feature Experimentationとは仕組みが異なります。

4. ［詳細設定］タブで追加オプションを指定します。

5. [保存して閉じる] をクリックして、Web 実験の作成を完了します。

ウェブ実験をテストしてプレビューする

ウェブ実験を実行する前に、Amplitudeは各バリアントをテストしてプレビューすることをお勧めします。

ウェブ実験をテストするには

1. テストとプレビュー をクリックします。これにより、実験はテスト計測モードになりますが、実験は開始されません。プレビューリンクを使用してページを開いたユーザーのみが変更内容を体験できます。
2. モーダルで「プレビュー」をクリックすると、そのバリアントに対して行った変更が適用される新しいタブが開きます。
3. チェーンリンクのアイコンをクリックして、URLをコピーして他のユーザーと共有します。

各バリアントを少なくとも1回テストしてください。 実験で複数のページを対象とする場合は、複数のページでテストしてください。

変更内容が表示されない場合は、キャッシュが更新されるまで最大60秒間待機してください。この時間以降も変更内容が正しく表示されない場合は、構成を確認して問題の可能性を確認してください。 実験が実行されない理由を診断するには、Amplitude Chrome拡張機能を使用してオーディエンスとページのターゲティングを調査し、露出状況を確認し、バリアントをプレビューします。

ビジュアルエディタ

ビジュアルエディタは、実験作成時に指定した URL にサイトを読み込み、オーバーレイを追加します。 ビジュアルエディタを使用すると、サイトのすべての要素にアクセスできるようになり、実験用にサイトを変更できます。

要素をクリックすると、選択した要素の横に編集ツールバーが開き、要素のコンテンツの編集や要素の移動などのクイックアクションを実行できます。 ビジュアルエディタでの変更は、現在のバリアントに自動的に適用されます。

変更を元に戻すか、やり直すには、ビジュアルエディタのナビゲーションバーにある「元に戻す」ボタンと「やり直す」ボタンをクリックするか、macOSではキーボードショートカット Cmd+Z (元に戻す) と Cmd+Shift+Z (やり直す) を、WindowsとLinuxでは Ctrl+Z (元に戻す) と Ctrl+Shift+Z (やり直す) を使用します。

このツールバーは、次のセクションとツールで構成されています：

• セレクター
• スタイル
• CSS
• HTML
• 移動する
• ナビゲーション

セレクター

セレクターは、現在のページ上で選択されている要素に対する固有の識別子です。 Web 実験では、デフォルトでセレクターは無効になっています。複数のページで実験を実行している場合は、セレクターを更新してください。生成されるセレクターは現在のページに対してのみ一意であるためです。 または、複数の要素をターゲットにするためにセレクターを編集することもできます。

安定性のベストプラクティス

• ビジュアルエディタの動作: エディタは最短の一意のパスを選択します。このパスには、sm-contentWrapper_ab12c_3 などの動的に生成されたクラス名が含まれている場合があります。 これらのクラス値には多くの場合、ビルド間で変更されるハッシュが含まれており、セレクターが一致しなくなります。

• クラスに安定した部分文字列がある場合: 完全なハッシュ化されたクラスではなく、安定した部分に一致する属性セレクタを推奨します。

  css

  コピー

  /* Instead of a fragile exact class */
  .sm-contentWrapper_ab12c_3
  /* Use a contains match on the class attribute */
  div[class*="contentWrapper"]
  

  これは、後のビルドでsm-contentWrapper_d9f7e_1が生成された場合でも、`

`などの要素に引き続き一致します。

• 最も信頼性の高い長期的なアプローチは、変更したい要素に安定した属性 (例: data-*) または一意の ID を追加し、それをターゲットにすることです。

  html

  コピー

  <div data-test-id="experiment-content"></div>
  

  html

  コピー

  [data-test-id="experiment-content"] /* or */ #experiment-content
  

シャドウ DOM 内の対象要素

Web Experiment は、オープンシャドウ DOM ツリー内の要素にバリアントの変更を適用します。 この実験用スクリプトは、実験用スクリプトが実行時に要素の変更を適用するときに、シャドウ境界を通してセレクタを解決します。

Web Experiment は閉じたシャドウルート内の要素をターゲットにすることはサポートしていません。

スタイル

「スタイル」タブには、フォントサイズ、フォント色、テキストの配置、パディング、余白、背景色、表示、および可視性など、頻繁に使用される CSS プロパティが含まれています。

CSS

「CSS」タブでは、任意の CSS プロパティと値を定義できます。これらは、Amplitude が選択した要素にインラインで適用します。

HTML

「HTML」タブでは、選択した要素のHTMLコンテンツを編集できます。

移動する

選択した要素をDOMツリー内で上下に移動させて、現在のノードに対する相対的な位置を調整します。「移動」オプションは、メイン ツール メニュー バーに表示されます。移動コントロールは、CSSを使用して要素を事前定義された量だけ移動するのではなく、ページの基盤となるHTMLを更新します。

ページ内の要素を移動するには

1. 移動したい要素をクリックします。
2. エディタのメニューバーで、上矢印ボタンまたは下矢印ボタンをクリックして、要素を移動します。 要素は一度に1つずつ周囲のHTML要素を通過します。
3. 要素を目的の位置に移動させるまでボタンをクリックし続けます。

ページ上の要素を移動する際の注意点：

• 変更が適用されない場合は、目的とする要素に対して正しいセレクタを選択したことを確認してください。
• ページ上のCSSスタイルが更新された位置と競合していないことを確認してください。
• JavaScriptが変更を適用した後で変更をリセットしないことを確認してください。
• 要素を移動すると、DOM内の不可視要素は無視されます。

要素を上下に移動するだけでなく、[再配置] をクリックしてプレビューモードを開始します。 プレビューモードを使用すると、ページ上のさまざまな要素の配置を確認できます。

ナビゲーションモード

ナビゲーションモードを使用すると、エディタを終了することなく実験内のページ間を移動できます。

ナビゲーションモードは次の場合に役立ちます：

• 複数ステップのフォーム、チェックアウトフロー、オンボーディング手順など、複数のページにまたがる実験。
• 同じ実験内で複数のページにわたってバリアントを編集する。

ナビゲーションモードを開始するには

1. 実験を開き、ビジュアルエディタにアクセスします。
2. ページ下部のプライマリ ツールバーで、ナビゲートをクリックします。
3. サイト内を移動します。
   • ページ上の要素をクリックすると、その要素は実験用の選択肢として機能するのではなく、意図した機能を実行します。
   • 実験に含まれていないページに移動して編集を試みると、ビジュアルエディタはページターゲット設定ルールを更新してページのURLを含め、確認メッセージを表示します。
4. 編集したいページに移動したら、鉛筆アイコンをクリックしてビジュアルエディタを編集モードに戻します。
5. 必要に応じて編集モードとナビゲーションモードを切り替えて、実験の設定を完了してください。

モバイルシミュレータ

モバイルシミュレータを使用すると、モバイルデバイスに表示される実験バリアントをプレビューおよび編集できます。 ビジュアルエディタを離れることなく、シミュレータを使用してレスポンシブなレイアウト、モバイル固有のスタイル設定、タッチフレンドリーなデザインをテストできます。

モバイルシミュレータに入るには

1. 実験を開き、ビジュアルエディタにアクセスします。
2. ページ下部のプライマリツールバーで、デバイストグルで[Mobile]を選択します。
3. または、要素の鉛筆アイコンをクリックして、アップロードアクションを含むサイドパネルを開きます。

画像のアップロード

ファイルをセルフホストして URL を貼り付けるのではなく、ビジュアルエディタに画像を直接アップロードして既存の画像要素を置き換えます。 Amplitudeは画像を保存し、標準のビジュアルエディタアクションとして返されたCDN URLを要素に適用するため、その変更はバリアント内のその他の要素変更と同様に動作します。任意プランで画像のアップロードが可能です。

次のいずれかの場所から画像のアップロードを開始できます。

• 画像要素を選択するときの要素ツールバー。
• トップメニューバーにある挿入パネル（以前の名称はウィジェット）。

画像をアップロードするには

1. ビジュアルエディタで、置換する画像要素を選択するか、挿入パネルを開いて新しい画像を追加します。
2. ご使用のコンピューターからアップロードしたい画像ファイルを選択してください。
3. AmplitudeはファイルをAmplitudeがホストするストレージにアップロードし、結果として得られたCDN URLを要素に適用します。