Optimizely ClassicとOptimizely X Web Experimentationの比較 | Optimizely 正規代理店イー・エージェンシー

Optimizely X ブログ

  • 2017年02月07日

Optimizely ClassicとOptimizely X Web Experimentationの比較

Optimizely X Web Experimentation(A/Bテスト)は、これまでのOptimizely Classicの強みを生かし、かつパワフルな新機能を搭載した製品です。
本記事では、生まれ変わったOptimizely Xの改善・強化された機能面を中心にをご紹介させて頂きます。


Optimizely X Experimentation

概要:Optimizely Xの特性

再利用可能コンポーネント

A/Bテストに必要な「ページ」と「イベント」という情報を再利用可能なコンポーネント化したことにより、テスト運用をより効率的に、かつ高速化して頂けます。

読込みの速い新ビジュアルエディター

新しいビジュアルエディターはページの読込み速度が改善され、またレスポンシブサイトにも対応しています。

新設計のカスタムコードエディター

バリエーションJavascriptに加え、テストバリエーションのみに適用される「バリエーションCSS」もカスタムコードとしてご利用頂けるようになりました。またコード内で利用できるユーティリティ関数も新たに追加され、さらにコードがロードされるタイミングも制御する機能が搭載されました。

新機能「エクステンション」

新たに追加された「エクステンション」機能により、一度作成したテスト実装を再利用可能なコンポーネントとして利用頂けます。

より改善されたStats Engineにより駆動する結果画面

新結果画面はデザインも新たになり、また主要指標に対してより早く統計的有意を得る仕様に改善されました。またClassicで提供していた「差異区間」は廃止され、代わりに「信頼区間」を表示するようになりました。

他ツールとシームレスに連携

Optimizely Personalization や Optimizely Recommendationsともシームレスに連携頂けます。

パフォーマンスの改善

スニペットタグサイズの削減

  • jQuery
  • 「作成中」と「一時停止中」のステータスのテストに関する情報

Cookieサイズ削減

テスト情報やイベントトラッキング情報の保持場所を、CookieではなくLocalStorageに移しました。これによりブラウザにかかる負荷が減少し、またイベント送信能力も向上しました。

カスタムスニペット

  • スニペット構成をカスタマイズすることが可能になりました。訪問者が訪れるページに関連するテスト情報のみを含むスニペットを作成して頂くことが可能です。カスタムスニペットはスニペットサイズの削減と効率的なテスト運用に役立ちます。
  • カスタムスニペットを利用しているアカウントでは、各スニペットに対し異なるTTL(有効生存期間)を設定可能です。この機能により該当スニペットが訪問者のブラウザにキャッシュされる期間を設定することが可能です。

再利用可能なコンポーネントによる効率性

Optimizely Xは、より早くテストを構築可能になり、より早くデータを収集できるよう改善・設計されました。

① 「ページ」コンポーネント:URLターゲティングとアクティブ化モード

Optimizely Classicでは各テスト内で、URLターゲティングやアクティブ化モードの設定を行っていました。Optimizely Xでは「ページ」という新しい概念が登場し、この「ページ」によってURLターゲティングのアクティブ化モードを設定・管理します。

「ページ」は設定したURLパターン(およびアクティブ化モード)のコンポーネントとして再利用頂けます。またOptimizelyは設定された「ページ」上で発生するイベント等の情報を、テストが実行されていない状態でも常に収集し続けるため、より高速にテスト結果を得るために必要なデータが収集されるようになりました。

Pageコンポーネント

↑Optimizely X 「ページ」設定パネル(URLパターンとアクティブ化モード設定箇所)

②「イベント」コンポーネント:ゴール

Optimizely Classicでは実験内でゴールを設定しました。Optimizely Xでは、ゴールは「イベント」という概念に置き換えられました。「イベント」は、クリックやPV、カスタムイベントや収益ゴール情報を管理する、再利用可能なテンプレートとしてご利用頂けます。
また一度作成された「イベント」は、特定のテストのみでなく、全てのテスト上で追跡されます。

イベントコンポーネント

↑Optimizely X イベント設定パネル(クリックゴールの場合の設定方法:ImplementationメニューからPageタブを選択します。GUI上でクリックゴール対象としたい要素をクリックし保存します。)

Optimizely Xでは、プライマリーゴール(主要ゴール)を簡単に設定でき、Stats Engine内にて「主要なゴール」として重視され、他ゴールよりも先に統計的有意性を得るよう処理されます。
イベントゴール設定

↑Optimizely X 「イベント」設定パネル(テスト詳細ページにて、作成頂いたイベントがプルダウンでサジェストされますので利用したいイベント選択して下さい。)

ビジュアルエディター

Optimizely Xのビジュアルエディターは読込み速度が改善され、またデスクトップアプリからのご利用も可能になりました。
画面左に配置されたメニューから、要素の取得や変更を行って頂けます。

Classic時のビジュアルエディター

Optimizely Classicでは、編集メニューを操作するためには、ページが読み込まれるまで待つ必要がありました。そしてビジュアルはframe内に疑似的に表示され、テストが実際に実行された際とは表示が異なることもありました。
Classicビジュアルエディター

↑Optimizely Classic ビジュアルエディター

Optimizely X時のビジュアルエディター

こちらにてより詳しく説明しています。
メニューは左部に固定され、ページの読み込み完了を待つ必要はありません。
X ビジュアルエディター

↑Optimizely X ビジュアルエディター

また、Optimizely Xのビジュアルエディターはレスポンシブにも対応しています。
レスポンシブに対応

Classic時のプレビュー

強制バリエーションクエリパラメーターやブラウザのコンソールなどを駆使してプレビューを確認する必要がありました。

Optimizely Xのプレビュー

プレビューツールにより簡単にブラウザの別タブでプレビューを確認頂けます。ツール上で見たいバリエーションを切り替えて表示することも可能です。
プレビューツール

↑Optimizely X プレビューツール

Optimizely X カスタムコードの特性とClassicとの違い

Optimizely XとClassicでは、要素の取得に際する仕様が変更になりました。

Classic時の処理

Classicは作成された変更を適用するために、ページ上に要素が出現するのを待機するよう設計されていました。
例として、Classic時のカスタムコード(バリエーションコード)が下記のようだったとします。
Classic時のコード
上記例のコードでは”optimizey_evaluate=force”のコメントを利用し処理のタイミングを調整しています。

また例えば、2行目でbodyを非表示にするスタイルが記述され、かつ9行目で、その非表示処理を解除する記述がなされています。
Classicは一行ずつ順に処理される直列処理だったため、9行目の処理は必ず、3~8行目の処理の後で実行される仕様でした。
これに対し、Optimizely Xでは以下のように処理の仕様が変更になりました。

Optimizely Xでの処理

【optimizey_evaluate=forceを記述する必要がなくなりました。】
Optimizely Xではカスタムコードはページに設定されたアクティブ化モードの設定に応じて即時実行されるため、optimizey_evaluate=forceコメントをご利用頂く必要はなくなりました。

【コード上での要素取得には、waitForElement関数をご利用下さい。】
また、スニペットにjQueryを含まない設定をしている場合でも、Optimizelyユーティリティ関数からjQueryを呼び出して頂くことが可能です。)

Classicでのコード例は、Xでは下記のように記述頂く必要があります。
X時のコード
各行がページ上に要素が出現するのを待機する関数である「waitForElement」にラップされており、それぞれの関数は並列処理されます。

また、Optimizely Xカスタムコードには他にも下記のような特性があります。

  • 個々のカスタムコードを、同期配信するか非同期配信するかを選択できるようになりました。
  • オリジナルバリエーション、テストバリエーション両方に共通して適用されるJavaScript, CSS(Classic時の名称:実験JavaScript、実験CSS)は「Shared code」と名称を改めました。

新しい機能「エクステンション」

エクステンションはOptimizely Xに新しく搭載された機能であり、テスト実装をテンプレート保存できる機能です。
例えば、デベロッパーにカルーセルやライトボックスなどの仕組みをエクステンション内に一度構築してもらえば、技術に詳しくない人でも簡単にエクステンションを再利用することで仕組みをテストに実装することが可能です。

エクステンションを活用頂くことで、合理的にテストを作成し、同じコードを繰り返し記述するような作業の無駄を削減することができます。
X エクステンション

結果画面

Optimizely Xでは結果画面のデザインが新しくなりました。
またClassicからの機能上の変更は下記です。

①差異区間が廃止され、「信頼区間」が表示されます。

Optimizely Xの結果画面では、差異区間に代わり信頼区間が表示されるようになりました。差異区間は、CVRの実地の絶対差をもとに計算されていましたが、信頼区間は「改善(インプルーブメント)」つまりオリジナルとバリエーションの相対差をもとに計算されます。

②より早く統計的有意性が得られます。

偽陽性検出の計算方法を改善したことにより、より早く統計的有意性に至ることが可能になりました。
X 結果画面

↑Optimizely Xの結果画面/p>

デベロッパーツール

Optimizely X は、ツールの柔軟性と、制御機能の向上のために強力な開発者ツールを提供します。

JavaScriptユーティリティライブラリ

JavaScriptユーティリティライブラリは、テスト実装に必要な包括的なツールを提供します。車輪の再発明の必要はなく、コード発火のタイミング等をより容易に制御頂けます。

JavaScript API

JavaScript APIは包括的なイベントリスナー機能・訪問者情報を取得するラッパー機能・デバッグ機能を提供します。

REST API

REST APIによりテスト管理・結果に関する情報を操作・取得頂けます。また時系列とカスタム属性により取得するテスト結果をフィルタ―可能です。

Optimizely log

Optimizely Logは、デバッグの為の様々な機能が追加されました。

Optimizely Xに関して、ご興味ある方はお気軽にお問い合わせください。


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

前へ
次へ

ブログの関連記事

ロード速度がPVに与える影響を実験により定量化 – イギリスメディア大手The Telegraph社
Disney社 エンゲージメントを600%向上。- abcテレビジョンサイトで実験
「Optimizely Certified Developer」の公式認定資格を取得しました
Optimizely & e-Agency Meetup in Tokyo大盛況でした!
Optimizely、米Forbes誌が選ぶ「2017年世界トップクラウド企業100」にランクイン

ブログのよく読まれている記事

コメントは受け付けていません。