バリエーションコードに純粋なJavascriptを記述する場合の注意点 | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日: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のサポートに関するお問い合わせはこちらまで

ヘルプの関連記事

検証時のターゲィング設定のために – 独自Cookieを発行できるブックマークレットの作成方法
投稿日: 2017年02月22日
今すぐ使える正規表現
投稿日: 2016年10月27日
自分をテスト対象から除外する方法 オプトアウト
投稿日: 2016年10月21日
SNS ボタンのクリック目標の計測
投稿日: 2016年09月26日
CSSだけでテスト作成 : テストバリエーションにのみ適用されるCSSを書く方法
投稿日: 2016年09月16日

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