バリエーションコードに純粋なJavascriptを記述する場合の注意点 | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年02月23日

バリエーションコードに純粋なJavascriptを記述する場合の注意点

Optimizelyでは、バリエーションコードの記述は通常jQueryで記述するのが推奨ですが、純粋なJavascriptも記述できます。純粋なJavascriptを記述する場合に気をつけるポイントをご案内いたします。

バリエーションコードの評価について

ビジュアルエディタで直接編集し「コードの編集」を確認すると、jQueryでの記述が行われているのが確認できます。また、直接バリエーションコードの記述を行う場合も、jQueryでの記述を行ってください。

Optimizelyがバリエーションコードを評価・実行するプロセスは、以下の図のようになっております。

バリエーションコードがjQueryで記述されている場合は、1行づつ対応する要素があるかを評価してから、次の行の評価へ移っていきますが、純粋なJavascriptが記述されていると、その後のすべてのバリエーションコードがDOMを評価する準備が整うまで待機してしまいます。

その影響により、バリエーションコードの実行が遅れ、元の要素が見えてしまう”フラッシング”が起きる場合があります。

純粋なJavascriptを記述する場合の対処方法

純粋なJavascriptの記述が必要な場合は、以下のコードで挟むことにより、jQueryと同様に評価を行わせることができます。

/* _optimizely_evaluate=force */
実行したいJavascriptをここに記述
/* _optimizely_evaluate=safe */

optimizely_evaluateを使用する上での注意点

optimizely_evaluateの記述内では、空行や、/**/を用いたコメントを行いて改行を多用したり、複雑なJavascriptを用いないようにしてください。
上記を行うとOptimizelyがDOMの評価を行うのが遅れる場合があります。
コメントを記述したい場合は//を用いて1行で完結してください。

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

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

ヘルプの関連記事

どこまでスクロール(閲覧)されているか計測する方法
投稿日: 2017年09月21日
「何を実験するべきか?」を解決する7つのTips
投稿日: 2017年09月04日
Exclusion Groups(排他的グループ機能)の設定方法
投稿日: 2017年08月24日
Custom snippets(カスタムスニペット)の設定方法
投稿日: 2017年08月24日
Optimizely X カスタムコードの特性について(Optimizely X)
投稿日: 2017年03月29日

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