テスト適用前の元の画面を見えなくする方法はありますか? | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

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

テスト適用前の元の画面を見えなくする方法はありますか?

Optimizely によるテストは、表示されたページに後からテスト内容を上書きすることで実行されます。
そのため、テスト内容の上書き中にオリジナルとなる要素がチラ見えしてしまう現象が発生する場合があります。
この現象を弊社では「フラッシング」と呼んでいます。

多少のフラッシングであれば問題はありませんが、ユーザが違和感を覚える程であると、少なからずテストの結果に影響を及ぼすことも考えられます。

フラッシングを完全に無くすことはできませんが、極力発生しないように抑える手段についてご案内いたします。

CSS で実現可能なことは CSS で行う

CSS と JavaScript で同じことをしようとした場合、基本的に CSS の方が処理は速くなります。
そのため、CSS でできることは CSS で行うことで、テスト内容が反映されるまでの処理時間の短縮が期待できます。

Optimizely で CSS を扱う場合は「実験 CSS」へ記述します。
「実験 CSS」の機能については、【Optimizely機能解説】「実験CSS」の使い方をご参照ください。

また、CSS を用いたことにより「コードの編集」内の JavaScript の記述量も削減され、JavaScript による処理時間も抑えることができます。

「コードの編集」への直接の記述は jQuery を用いる

「コードの編集」へ直接記述する場合は、jQuery を用いてください。

Optimizely のテスト内容適用の仕様として、jQuery のみで記述されている場合に限り、読み込まれた要素から順次テスト内容を適用していきます。
ですが、ピュアな JavaScript の記述が存在する場合はページの読み込み完了まで待機した後、テスト内容を適用していきます。

読み込まれた要素から順次適用された方がフラッシングの発生を抑えることができますので、「コードの編集」へ直接記述する場合は、可能な限り jQuery を用いてください。

CSS の display、visibility を活用する

あらかじめテスト内容の適用範囲を非表示にしておき、適用後に表示することで、処理中に発生するフラッシングをそもそも表示しないという方法です。
フラッシングを軽減する訳ではありませんが、していないように見せることができます。

下記は具体的な手順です。

  1. 「実験 CSS」に display: none; もしくは visibility: hidden; を用いてテスト内容の範囲を非表示にする記述をする。
  2. 「コードの編集」の一番最後に jQuery で非表示にした要素を表示する記述をする。

display と visibility では表示、非表示の仕様が異なりますので、一度、両方をお試しいただくことをオススメします。

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

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

ヘルプの関連記事

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