大幅な変更を加えるA/Bテストの実装方法 | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日:2017年02月23日

大幅な変更を加えるA/Bテストの実装方法

Optimizelyを使用したA/Bテストでは、元から存在する要素の配置を変えたり、変更を加えたりする事でテスト内容を実装することが多いですが、時にはページ内容が全く異なるテストを行いたい場面があります。

全く異なるページ内容の全てを JavaScript ( 以下 JS ) 及び CSS で実装する事は、困難でコストも掛かる場合が多いかと思います。

そのような場合に、できる限り低コストでテストの実装を行う方法を2つご紹介します。

1. オリジナルのページ内に直接テスト内容をを記述し、Optimizelyで表示非表示を制御

読み込み元のページにバリエーションとなる内容を追加し、Optimizely側で、表示非表示を制御するという方法です。

具体例

読み込み元のページで、テストしたいバリエーションを CSS で非表示にし、body タグに id を加えることで表示するように CSS を設定しておきます。
そうした場合、Optimizelyの、バリエーションコードに記述するのは、下記のみになります。

$('body').attr('id','id名');

もちろん、テスト内容を直接表示するよう指示しても問題ありません。
その場合は、下記のようになるかと思います。

$('テスト内容の要素').css('display','block');

追加したテスト内容の表示だけではなく、同時に既存の要素にも変更を加えたい場合は、前者の方法の方が良いと思います。
もちろん、既存要素への変更は、従来通りバリエーションコードで設定してしまうのも良いでしょう。

2. テストをするページを別に用意し、Optmizelyでリダイレクトさせる

Optimizely には実験の発動したユーザーを指定のページへリダイレクトする機能があります。

リダイレクト機能を用いる事でオリジナルページとは別にテスト用ページを作成し、テストを実施する方法です。

設定方法は簡単です。下記の図をご参考ください。

もちろんですが、リダイレクト先のページの計測も可能です。

Optimizelyのサポートに関するお問い合わせはこちらまで

ヘルプの関連記事

Optimizely X カスタムコードの特性について(Optimizely X)
投稿日: 2017年03月29日
検証時のターゲィング設定のために – 独自Cookieを発行できるブックマークレットの作成方法
投稿日: 2017年02月22日
今すぐ使える正規表現
投稿日: 2016年10月27日
自分をテスト対象から除外する方法 オプトアウト
投稿日: 2016年10月21日
SNS ボタンのクリック目標の計測
投稿日: 2016年09月26日

ヘルプのよく読まれている記事

mautic is open source marketing automation