Optimizely X カスタムコードの特性について(Optimizely X) | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年04月12日

Optimizely X カスタムコードの特性について(Optimizely X)

タグ :

この記事は下記のようなとき役に立ちます
・カスタムコード上でソースコード上の要素取得を行う場合
・ページの読み込み時に存在しない要素(Ajax等)をカスタムコードで操作する場合
・Optimizely Classic から Optimizely X に移行された方

Optimizely X カスタムコードの処理

Optimizely X のカスタムコードはページに設定されたアクティブ化モードの設定に応じて即時に実行されます。
その為、設定によっては要素の出現より先にコードが実行され、要素の取得ができず、結果、実験内容の適用が空振りしてしまう場合がございます。

カスタムコード上で要素を取得する場合は、Optimizely に用意されている「waitForElement」関数を用いることで、対象の要素の出現を確認し、確認したタイミングで実験内容の適用を行うことが可能となります。

var utils = window.optimizely.get('utils');

utils.waitForElement('h1#info').then(function(){
	$('h1#info').css({'color' : 'red'});
});

上記のコードは、「waitForElement」を用いた記述例で、以下の様な処理を行っております。

var utils = window.optimizely.get('utils');

上記にて Optimaizely 内に用意されている関数を使用するための準備を行います。
このコードはカスタムコード内に1つだけ記述いただく形となり、その際に後述の waitForElement より手前に記述してください。

utils.waitForElement('h1#info').then(function(){
	$('h1#info').css({'color' : 'red'});
});

<h1 id=”info”>がページ上に存在するのを確認したタイミングで、<h1 id=”info”>の文字色を赤色に変更します。

このように記述いただくことで、「出現を確認する要素」と「確認後、実行する処理内容」が指定できます。

Optimizely Classic との違い

Classic ではカスタムコードに記述した jQuery は対象の要素が出現するまで要素の存在を確認するための処理を繰り返し、存在が確認できたタイミングで 関数の処理を行うという設計がなされていた為、実験内容の適用が空振りすることはございませんでした。

ですが、対象の要素に対して1つ1つ記述された順番に「存在を確認し、実験内容の適用」を行っていた為、実験内容のボリュームが大きくなると、処理に時間がかかっておりました。

Optimizely X では、その処理を取り止めることで Classic に比べて処理速度の向上を図りました。

「waitForElement」関数を用いて手動で記述を行う必要はありますが、Classic のように記述された順番ではなく並列に処理される為、実験内容の処理と適用速度が向上しております。

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

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

ヘルプの関連記事

Optimizely Classic の Cookie と localStorage
投稿日: 2017年10月04日
Optimizely X の Cookie と localStorage
投稿日: 2017年10月04日
どこまでスクロール(閲覧)されているか計測する方法
投稿日: 2017年09月21日
「何を実験するべきか?」を解決する7つのTips
投稿日: 2017年09月04日
Exclusion Groups(排他的グループ機能)の設定方法
投稿日: 2017年08月24日

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