ウェブ実験のアクション

アクションは、バリアントがサイトをどのように変更するかを定義します。 アクションは特定のページではなくバリアントに関連しており、特定のページに適用されてどこで効果が発揮されるかを制御します。

実験は評価中にバリアントアクションを適用します。評価は、ページの初期ロードと、状態がセッション履歴にプッシュまたはポップされた時点で実行されます。 履歴状態が変更された場合、SDKはまず適用されたすべての要素変更とカスタムコードアクションを元に戻し、その後、更新されたページのアクションを再評価して再適用します。

要素の変更

要素の変更は、サイト上の既存の要素を変更します。 Web 実験は、ビジュアルエディタで行った変更に基づいて要素の内部テキストを編集するか、要素にスタイルを追加することによって、これらの変更を適用します。

ビジュアルエディタは、次の要素変更をサポートしています。

• 表示: 要素を DOM に表示するか、DOM から削除します。
• 可視性：要素を表示または非表示にします。
• テキスト：要素の内部テキスト、色、サイズを更新します。
• 背景：背景画像や色を更新します。
• 移動：要素の位置を移動します。

画像と背景を変更する場合、URL を貼り付ける代わりにビジュアルエディタで画像を直接アップロードできます。 Amplitudeはファイルをホストし、そのCDN URLを要素に適用します。

URLリダイレクト

URLリダイレクトは、対象ユーザーが実験の対象ページに到達したときに新しいURLをロードします。URL リダイレクトはクライアント上で行われますが、3xx レスポンスを伴うサーバーリダイレクトとは異なります。バリアントが異なる URL またはページである場合、URL リダイレクトを使用してください。 たとえば、ランディングページや CMS に組み込まれたページのさまざまなバージョンをテストするために使用できます。 URL リダイレクトは、標準的な A/B テストやマルチアームドバンディットに対しても機能します。

URL リダイレクトでは、元のページ URL 上のクエリ パラメータがすべて保持されます。 たとえば、ユーザーを https://example.com から https://example.com/get-started へリダイレクトするためのバリアントを作成するとします。ユーザーがリンク https://example.com?utm_source=facebook をクリックすると、Web 実験はそのユーザーを https://example.com/get-started?utm_source=facebook にリダイレクトします。

URL リダイレクトを設定する

ビジュアルエディタ経由で URL リダイレクトをバリアントアクションとして設定します。 トリートメント バリアントに URL リダイレクトを追加するには、次の手順に従います。

1. Web 実験を作成し、ビジュアルエディタを開きます。
2. ［Treatment］の3点リーダーメニューをクリックし、［Edit］を選択してから、［Action］の下で［URL Redirect］を選択します。
3. 「URLリダイレクト」パネルで、テストしたい各URLを個別のバリアントとして追加し、「適用」をクリックします。

設定の制限

ビジュアル実験と Amplitude のローコード実装は、URL リダイレクトを使用する場合に以下の制限を適用します。

リダイレクトに関するSEOのベストプラクティス

実験では、クライアント側のリダイレクトは検索エンジンがページをインデックス化およびランク付けする方法に影響を与える可能性があります。 これらのベストプラクティスに従って、SEOへの影響を最小限に抑えてください。

テスト中に一時的なリダイレクトを使用する

Web 実験では、302 一時的なリダイレクトを window.location.replace 経由でシミュレートするクライアント側のリダイレクトを使用します。302 シグナルは、実験期間中にオリジナルの URL をインデックスに登録したままにするよう検索エンジンに伝えます。コントロールページにnoindexタグを使用しないでください。noindexによってページが検索結果から削除されるためです。

正規URLを選択した後は、永続的なサーバー側の301または308リダイレクトを実装し、リンクエクイティをその正規URLに統合してください。

バリアントページに正規タグを追加する

実験バリアントページに、オリジナル（コントロール）URL を指定する正規タグを追加してください。canonicalタグを使用すると、検索エンジンがそのバリアントを別のページとしてインデックス化できないようになります。

<!-- On the variant/redirect destination page -->
<link rel="canonical" href="https://example.com/original-page" />

SEOに重要なページにはサーバー側のリダイレクトを優先する

SEOが重要なページの場合、エッジ(CDN)またはサーバーレベルでサーバー側の割り当てとリダイレクトの使用を検討してください。サーバー側のリダイレクトはページがレンダリングされる前に実行されます。これは次のとおりです：

• 検索エンジンのクローラがリダイレクトを確実に解釈できるようにします。
• ユーザーのページフリッカーを最小限に抑えます。
• 適切なHTTPステータスコードをクローラに提供します。

クライアント側のリダイレクトを使用する必要がある場合は、レイアウトのずれを減らすために、リダイレクトロジックが <head> 内で実行されるようにしてください。

テストを短く抑え、クローキングを避ける

Googlebot が認識しているものとは異なるコンテンツや URL をユーザーに表示しないでください。 検索エンジンはこの行為をクローキングとみなし、サイトにペナルティを課す可能性があります。 SEO の偏りを避けるために、実験を速やかに終了し、結論が出た後にテストロジックを削除してください。

目標が両方の URL をカバーするようにする

コントロール URL とバリアント URL の両方を含むコンバージョン目標を定義します。 Web 実験はリダイレクトを通じてクエリパラメータを保持するため、アトリビューションとセッションの継続性は損なわれません。

問題発生時の Search Console の使用

検索エンジンが予期せず実験用バリアントページをインデックス化した場合は、根本的な問題に対処する間の一時的な修正として Google Search Console の URL 削除ツールを使用してください。

カスタムコード

Web 実験は、カスタムコードアクションを要素変更アクションのオプションの一部として適用します。カスタムコードアクションを使用して、JavaScript、CSS、HTML を記述できます。これらの機能により、要素を追加したり、ビジュアルエディタがサポートしていない方法でサイトをカスタマイズしたりできます。

**[適用先] **ドロップダウンを使用して、カスタムコードを特定のページに適用します。 ドロップダウンでは、アクティブなページに応じて異なるコードを実行できます。

Web 実験は、以下の順序でカスタムコードをサイトに適用します。

1. ページの<head>内に<style>タグで CSS を追加します。
2. HTML を DOM 要素に解析します。
3. JavaScript を関数でラップし、ページの <head> 内の <script> タグに追加します。
4. ラップされた JavaScript 関数を呼び出し、解析された HTML とユーティリティを引数として渡します。

JavaScript

Web 実験は任意のカスタム JavaScript を関数にラップし、バリアントアクションが適用されたときにその関数を呼び出します。この関数には、カスタムJavaScriptコードで使用できる2つのパラメータがあります。

• html: DOM 要素オブジェクトとして解析されるカスタム HTML コードです。
• utils: カスタムコードで使用できるユーティリティ関数を含むオブジェクトです。

ユーティリティー

Web実験は以下のユーティリティを提供します：

• waitForElement(selector: string): Promise<Element>: DOM 内でセレクターに一致する要素が見つかった場合にwaitForElement解決される promise を返します。 要素をリッスンMutationObserverするために使用します。

• remove: (()=> void) | undefined: 注入する JavaScript の内部に設定できる関数です。 Web実験はページ変更時にremove関数を呼び出し、その際Amplitudeは実験を再評価してバリアントを再適用します。

  このremove関数は、ページが完全にリロードされないシングルページアプリケーションでページへの変更をクリーンアップするのに役立ちます。たとえば、特定のページにHTML要素を挿入する場合、ページが変更されたときにその要素を削除するようにremove関数を設定します。

HTML

Web実験はカスタムHTMLをDOM要素として解析し、挿入のためにその要素をカスタムJavaScriptコードに渡します。カスタム HTML は、既存の CSS スタイルとクラスを使用することも、ユーザーが定義した新しい CSS を使用することもできます。

CSS

カスタム CSS スタイルを使用して既存の CSS クラスやスタイルを操作したり、カスタム HTML で追加した要素に新しいスタイルを追加したりできます。 Web 実験は、ページの <head> 要素内の <style> タグにカスタム CSS を追加します。

例

要素を挿入する

ページに要素を挿入するには、このパターンに従ってください。

1. ページに追加したい要素のHTMLとCSSを記述します。

2. 新しい要素を挿入したい親要素のセレクタを指定します。 親は多くの場合、bodyです。

3. 次の JavaScript コードを貼り付け、PARENT_SELECTOR をステップ 2 の親要素セレクターに置き換えてください。

   js

   コピー

   utils.waitForElement("PARENT_SELECTOR").then(function (e) {
     e.appendChild(html);
     utils.remove = function () {
       html.remove();
     };
   });
   

要素を親要素の特定の位置に挿入したい場合は、appendChild() の代わりに insertBefore() を使用してください。

バナーの追加

この例では、割引コードのバナーをページの上部に追加します。

utils.waitForElement("body").then(function (e) {
  e.insertBefore(html, e.firstChild);
  utils.remove = function () {
    html.remove();
  };
});

モーダルを追加する

この例では、1秒遅延後にモーダルをページに追加しています。

var modal = html;
utils.waitForElement("body").then(function (body) {
  // Append the modal element to the body.
  body.appendChild(modal);
  // Get the close button element
  var closeBtn = document.getElementsByClassName("close")[0];
  // When the user clicks on the close button (x), close the modal
  closeBtn.onclick = function () {
    modal.style.display = "none";
  };
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };
  // Show the modal after a 1 second delay.
  window.setTimeout(function () {
    modal.style.display = "block";
  }, 1000);
  // Remove the modal on teardown.
  utils.remove = function () {
    modal.remove();
  };
});