CSSだけでテスト作成 : テストバリエーションにのみ適用されるCSSを書く方法 | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日:2016年09月16日

CSSだけでテスト作成 : テストバリエーションにのみ適用されるCSSを書く方法

テストパターンを主にCSS記述で作成したい場合の手法をご案内します。

この記事は下記のようなとき役に立ちます
・CSSで出来ることはCSSでやりたいとき
・CSSで指定された背景画像などを変更するテストをしたいとき(jQueryでも可能です)
・Javascriptで要素を削除する何か不都合がある場合

バリエーションコードに一行追加し、あとは実験CSSを利用

Optimizelyには「実験CSS」というCSSを書く専用の入力フォームがあり、これを利用します。

① テストバリエーションのバリエーションコード(編集画面下部にある、「コードの編集」ボタン)に下記の記述をし、適用します。

バリエーションコード addClass

$(“body”).addClass(“hoge”);

bodyタグに”hoge”というクラスを追加する記述です。
バリエーションコードに記述頂くことで、テストバリエーションでのみ、bodyにhogeクラスが付与されるようになります。

② オプションボタン(歯車マーク)→実験CSSを選択し、実験CSS編集パネルを開きます。

実験CSS
例えば、下記のように記述します。

.hoge p{
	color:red;
}

上記コード例では、テストバリエーションでのみ、pタグの文字が赤くなります。
(キャプチャでは背景画像を変更する記述例です。)

適用後、テストを保存します。

以上となります。
弊社でテスト実装をする際、非常によく利用する手法です。
CSSによるテストパターン作成は、GUIやjQuery記述による処理よりフラッシングが起きにくくおすすめです。

お試し下さいませ。
何卒よろしくお願いいたします。

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

ヘルプの関連記事

Optimizely⇒UA_GTM 連携方法について
投稿日: 2017年01月10日
今すぐ使える正規表現
投稿日: 2016年10月27日
自分をテスト対象から除外する方法 オプトアウト
投稿日: 2016年10月21日
SNS ボタンのクリック目標の計測
投稿日: 2016年09月26日
リダイレクト実験:個別URLのテスト
投稿日: 2016年09月16日

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