特定の条件で実験を発動する- Activation Mode(アクティブ化モード)- | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年11月09日

特定の条件で実験を発動する- Activation Mode(アクティブ化モード)-

▼こんな方に役立ちます。
・ページが読み込まれた後、動的に実験を発動させたい
・訪問者の特定のアクションをトリガーに、実験を発動させたい
・URLが変わらない Web アプリケーションを対象に実験を行いたい

Activation Mode(アクティブ化モード)を使う理由

Optimizely の実験はスニペットがページに読み込まれるとすぐに開始されますが、ページが読み込まれた後に、特定の条件で実験を発動させたいケースがあります。

たとえば、以下のようなケースがあります。

  • ページのロードが完了した後に、動的に読み込まれるコンテンツ(Ajaxリクエストなど)を対象に実験を行いたい。
  • モーダルウインドウを立ち上げた時や、あるポイントまでスクロールした時、ウィジェットをアクティブ化した時など、訪問者が特定の操作を行うことを条件に、実験を発動させたい。
  • URLが変わらないシングルページアプリケーション( Angular 、 Backbone 、 Ember 、 Knockout など)のフレームワークで構築されたサイトで、フレームワークのイベント発火により実験を発動させたい。
  • 訪問者のアクションにより、リロードせずにページが再描画されるような Web アプリケーションを対象に実験を行いたい。

Activation Mode には、デフォルトの即時実行の他、3つの条件付き実行オプションがあり、用途に応じて、Polling(繰り返し条件チェック型)、Callback(関数型)、Manual(手動)が選択できます。

Polling (繰り返し条件チェック型)について

「 Polling 」はソース上の要素の存在を確認する等、指定した JavaScript の条件を満たす場合に実験を発動することができます。

# 2秒間50ms毎に、JavaScript の条件を満たすかどうか繰り返しチェックされます。ページの読み込み( DOM ready )から2秒後にチェックが停止されますので、それ以降に実験を発動させたい場合は、 Callback (関数型)または、 Manual (手動)を検討します。

サンプルコード

実験対象ページの meta tag (メタタグ)キーワードに、特定のキーワード(例:スポーツ、ゲーム、パズル)が含まれる場合に実験を発動させる

function pollingFn() {
  //この条件を満たす場合にアクティブ化します。
  return (/スポーツ|ゲーム|パズル/).test(document.querySelectorAll('meta[name=keywords]')[0].getAttribute("content"));
}

ページ内に緑色のボタン要素(例:クラス:green )がある場合に実験を発動させる

function pollingFn() {
  //この条件を満たす場合にアクティブ化します。
  return document.querySelectorAll("button.green").length > 0;
}

設定例

Callback(関数型)について

特定のボタンが押下されたタイミングで実験を発動する等、指定した JavaScript の関数を実行することで実験を発動することができます。

サンプルコード

ページ内の特定のボタン要素( ID : btn )が押下されたタイミングで実験を発動させる

function(activate, options) {
  //このロジックを実行し、必要に応じて activate()を呼び出します。
  $('html').delegate('#btn', 'mousedown', function() {
	activate();
  });
}

ページ内の特定のボタン要素があるかチェックし、存在が確認できたタイミングで実験を発動させる
#Callback の場合、Polling のように時間制限(DOM ready から2秒後まで)がありませんので、2秒間経過してからも要素があるかチェックされます。

function(activate, options) {
  //このロジックを実行し、必要に応じて activate()を呼び出します。
  var utils = window.optimizely.get('utils');
  var $ = window.optimizely.get('jquery');

  utils.waitForElement('button').then(function(buttonElement) {
    if ($('button').length > 0) {
      activate();
    }
  });
}

Ajax通信の完了後、レスポンスに特定の要素が確認できたタイミングで実験を発動させる

function(activate, options) {
  $(document).ajaxComplete(function(event, xhr, settings) {
    if (xhr.responseText.indexOf('rightRailModule') != -1) {
      activate();
    }
  });
}

設定例

Manual (手動)について

JavaScript API をコールすることで、任意のタイミングで実験を発動することでできます。

Manual(手動)コードサンプル

window['optimizely'] = window['optimizely'] || [];
window['optimizely'].push({
  type: "page",
  pageName: "管理画面で設定したAPI Name"
});

設定例

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

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

ヘルプの関連記事

Optimizely Classic の Cookie と localStorage
投稿日: 2017年10月04日
Optimizely X の Cookie と localStorage
投稿日: 2017年10月04日
Exclusion Groups(排他的グループ機能)の設定方法
投稿日: 2017年08月24日
Custom snippets(カスタムスニペット)の設定方法
投稿日: 2017年08月24日

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