それぞれの実験で、A/B テストを使用してウェブサイトのユーザーエクスペリエンスを向上させたいと考えるユーザーのストーリーおよび仮説をテストする実験アイデアを共有します。アイデアおよび実装の詳細は適応性のあるものになっており、独自のテスト機会の開始に役立ちます。ここで学習する内容をさらに展開するうえで役立つように、関連するナレッジベース記事へのリンクも載せています
目次
1.サイト全体の変更今月、John は、ヒットすると思われる新製品の販売促進を行っています。この新製品の広告は、現在十分に強調されておらず、ホームページ上の多くの販売促進ボックスの 1 つとして表示されています。John は、サイト全体にわたる販売促進バナーを追加すると、クリックスルー率および購入コンバージョン率が上がると推測しています。
実験の設定
前
後（検索バーの下部に販売促進を追加）
Joe には、ボタンの言語と色のさまざまなバージョンをテストすることによって、「カートに追加」CTA のクリックスルー率を増やすことができるという持論があります。
実験の設定
別の CTA をテストした Fab.com 実験の結果の詳細については、ここで顧客事例を確認してください。ここで CTA の最適化に関するブログ投稿を確認することもできます。
前
後（[カートに追加] ボタンを赤色に変更）
Kate は最近、多数の訪問者が [カートの確認] に到達した後戻っていることに気が付きました。Kate は、製品テーブルの上部に 2 つ目の [チェックアウトに進む] ボタン を追加して、ファネル内で次の段階に進む訪問者の割合を増やすことができると考え ています。これにより、フォールドの上部と下部の両方に CTA が常に表示されます。
実験の設定
この実験では、元のボタンと同様に機能する新しいボタンを追加する必要があります。テクニカルチームに問い合わせて、ボタンを複製し完全に機能させるために必要な正確な HTML を入手することもできます。
カートページをエディターにロードします。新しい HTML を追加する前にボタンの正しいコンテナ（つまり正しい <div> 要素）を指定することをお勧めします。そのためには、[コンテナの選択] 機能を使用します。特定の位置決めによって、ボタンがページ上の望ましくない場所に浮動することがなくなります。
適切なコンテナを選択したら、[HTML の挿入] 機能を使用して、適切な位置に新しいボタンを追加します。
実験のターゲット条件を設定するには、[オプション] > [URL ターゲット設定]をクリックし、関連する URL を追加します。多くの場合、カートの URL に対する単純一致が機能します。
テストのパフォーマンスを測定し、その他の CTA がチェックアウトフローに価値を追加するかどうかを自信を持って判断するには、実験に目標を追加する必要があります。
新しいボタンにクリック目標を追加 (英語だけ)するには、CTA をクリックし、[クリックの追跡] をドロップダウンリストメニューから選択します。これにより、[目標ダイアログ] がポップアップし、目標に名前を付け、目標の設定を調整できます。
目標に元のボタンも追加してください（1 つの目標で複数の要素のクリックを追跡できます）。これにより、1 つのボタンまたはその他のクリックだけでなく、[チェックアウトに進む] ボタンのクリックの包括的なビューが得られます。
前
後（[更新] および [チェックアウト] ボタンを追加）
Greg は、チェックアウトファネル内のナビゲーションバーが顧客の注意をそらしていると考えています。彼は、訪問者をページにとどめ、ナビゲーションバーを削除することで成功コンバージョン数を増やすことができる考えています。
実験の設定
このテストを開始するには、エディターにファネルの最初のチェックアウトページをロードします。
ナビゲーションバーをクリックし、[コンテナの選択] をドロップダウンリストメニューから選択します。タブ要素の 1 つだけではなく、ナビゲーションバー全体を選択する適切なコンテナを選択することができます。[削除] > [ページから要素を削除] を選択します。
ヘッダーに表示される、余計な要素となる可能性のあるバナーやアイコンに対して自由にこの手順を繰り返してください。
チェックアウトファネルの全ページからナビゲーションバーが削除されたことを確認するには、ターゲット条件を部分文字列一致に設定する必要がありま す。Greg のケースでは、文字列「yourdomain.com/checkout」がすべてのチェックアウトページに含まれています。
ベースライン指標として、元のバージョンのナビゲーションバー要素にクリック目標を追加することが有用です。整理されたチェックアウトファネルが最終収益の向上に寄与するかどうかを自信を持って判断できるように、購入確認ページ上でページビュー目標を必ず設定してください。
前
後（ナビゲーションを削除）
Tommy の製品ページには、3 つの異なるサブスクリプションタイプが表示されます。
左側に最も安い製品が表示され、右に進むにつれて価格が高くなります。最も安いサブスクリプションの「最低価格」バナーもあります。Tommy は、「最低価格」バナーを削除し、最も高いサブスクリプションが左側に来るようにサブスクリプションタイプを再配置することによって、収益を増やすことができるという仮説を立てています。
実験の設定：
Ricky は、製品ページのパンくずリストのサイズを大きくすると、顧客はより簡単に異なるページ間を移動して目的の品目を見つけることができるようになり、その結果として最終的に購入が増えるという仮説を立てています。
実験の設定
前
後（より目立つパンくずリスト）
Pam は、自分のサイトでは特定のトピックの 2 つ以上の記事を読んだ訪問者には固有の Cookie が追加されることを知っています。Pam は、読者の好みに基づいてホームページをカスタマイズできれば、サイト上のエンゲージメントを増やし、記事に対するクリックスルー率を増加させることができるという仮説を立てています。例として、Pam は、このトピックに関連する記事を頻繁に参照する訪問者用に、起業家精神に関連する記事を強調表示したヒーローバナーを備えたいと考えています。
実験の設定：
Wesley は、有料の検索キャンペーンの最適化を担当するマーケティングマネージャーです。Wesley は現在、会社の新しい電子書籍を広告する 2 つのキャンペーンを行っています。これらのキャンペーンではそれぞれわずかに異なるメッセージを使用して、異なるグループの人々および関心分野をターゲットにしています。Wesley は、 （すべての広告に一般的なランディングページを使用するのではなく）ヘッダー、サブヘッダー、および call-to-action コピーを特定の広告のメッセージに一致するようにカスタマイズして、電子書籍のランディングページのコンバージョンを増やすことができると考えています。
実験の設定：
Mark は、販売チームの見込み客獲得をランディングページに大きく依存しています。Mark は、入力フィールドの順序を変更しサイズを大きくすることで、コンバージョンが増加し、見込み客が増えると考えています。
実験の設定
この実験を開始するには、ランディングページをエディターにロードします。
入力フィールドのいずれかをクリックし、[要素の編集] > [スタイルの編集] を選択します。
[スタイルの編集] 機能により、簡単に背景色、ボーダーサイズ、テキストフォントなどを変更できます。
[ディメンション] タブでは、入力フィールドの高さと幅を変更できます。入力フィールドのサイズと色の調整が終了したら、テキストタイトルをクリックし、手順を繰り返します。
jQuery の知識が少しあれば、時間を節約し、すべての入力フィールドのスタイルを一度で修正することができます。
入力フィールドの順番を変更するには、移動するフィールドをクリックし、[再配置] をドロップダウンメニューから選択するだけです。このフィールドを目的の場所にドラッグすると、他の入力フィールドがそれに従って調整されます。
[オプション] > [URL ターゲット設定] をクリックして、この実験の URL ターゲット条件を設定します。実験は 1 ページのみで実行する必要があるため、ランディングページの URL への単純一致が有効です。
大きい入力フィールドと新しい順序がサインアップに効果があったかどうかをどのように自信を持って判断しますか。どちらのバージョンによってより多くのクリックスルー率がもたらされたかを追跡できるように、「サインアップ」CTA にクリック目標を設定します。
より詳細なデータを収集する場合は、訪問者が特定の入力フィールドにいつ入力し始めたかを追跡するカスタムイベントを設定できます。このようなカスタムイベントにより、特定のフィールドで減少が発生するかどうかを評価できます。
前
後（新しい入力フィールド）
Allison のサイトでは、すべてのオンライン注文に無料配送を提供しています。現在、「無料配送」の価値提案は、製品説明の下に隠れています。Allison は、「無料配送」のテキストを [カートに追加] ボタンに隣接して追加すると、CTA のクリックが増え、購入コンバージョン全体も増加すると信じています。
実験の設定
製品ページで無料配送を強調することは、追加料金の不安を軽減する最適な方法です。製品ページでは、訪問者の購入の意思を行動に変えられることは非常に重要です。細部が大きな効果をもたらすことがあります。
エディターに製品ページの 1 つをロードします。
[カートに追加] CTA のすぐ上のスペースをクリックして [テキストの挿入] を選択し、希望の販売促進メッセージを入力します。
無料配送のテキストをページに追加したら、必要に応じて [スタイルの編集]、[移動してサイズ変更]、または [再配置] を使用して、スタイルと位置を変更できます。
実験をすべての製品ページで実行し、大きいサンプルサイズおよびサイトでの一貫性を確保することが理想的です。[オプション] > [URL ターゲット設定] を クリックし、部分文字列一致を使用してテストのニーズを満たします。
この実験の成功度を正確に測定するには、「カートに追加」CTA のクリック目標を追加し、購入確認ページにページビュー目標を追加することが重要です。この実験では、無料送付を強調表示することで全体の収益が増加するかどうかを推測するために、収益を追跡することも関心事となります。
追加の詳細およびアイデアについては、返品条件の強調に関するブログ記事を参照してください。
前
後 （「無料配送」を [カートに追加] の上部に追加）