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

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 X と Ptengine の連携方法(Optimizely X)
投稿日: 2017年05月15日
結果画面のセグメントの種類とカスタムセグメント(Optimizely X)
投稿日: 2017年03月29日
Optimizely X カスタムコードの特性について(Optimizely X)
投稿日: 2017年03月29日
GTMでOptimizelyタグとGAタグ両方を配信して連携を行う方法(Optimizely X)
投稿日: 2017年03月10日
Optimizely社公式の拡張機能を利用して編集画面への読み込みを補助する方法
投稿日: 2017年03月03日

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

mautic is open source marketing automation