SiTest のスプリットテストパターン設定をより柔軟に！ JavaScript 編集を使ってみよう！ ｜ SiTest (サイテスト) ブログ

弊社が提供している ヒートマップ解析ツール「 SiTest 」では、スプリットテストを作成し、サイト改善に活用することができます。
スプリットテストでは、 HTML 編集やテキスト編集、アニメーション編集など、さまざまな編集機能で、テストパターンを作成することが可能です。

その中でもより柔軟にテストパターンを作成することができるのが「 JavaScript 編集」です。
「 JavaScript 編集」はその名の通り、 JavaScript を使って要素の追加や、非表示を可能にしたり、テキストを書き換えたりなどすることができます。
しかしこれまで JavaScript に触れたことがない方は、「あぁ、自分には使えない機能だな」「私向けの機能ではないな」と感じていらっしゃるかもしれません。

そこで今回は「 JavaScript 編集」を使って、テストパターンを作成してみたいと思います。
はじめは慣れなくてイライラしてしまうかもしれませんが、落ち着いてひとつひとつこなしていけば大丈夫です。
でははじめましょう！

SiTest にログインした後、スプリットテストを作成したいプロジェクトをプロジェクト一覧画面から選択してください。

データサマリー画面に遷移したら、左のメニューから「スプリットテスト」を選択してください。

テスト一覧画面が表示されます。
テストを作成したい URL を選んでいる状態で
「＋ 新規テスト」ボタンを選択しましょう。

テストの名前を入力します。
「テストの種類」は「ABテスト」のまま、「決定」ボタンを選択してください。

テスト一覧画面にテストが作成されました。
作成したテストの「編集」ボタンを選択しましょう。

テスト編集画面が表示されます。
「テストパターン1（書き換え）」タブが選択された状態になっています。
その下に、対象 URL の画面が表示されています。
「 JavaScript 編集」を使わない方法だと、画面上にポインタを移動させると、対象の要素が青枠線で囲まれて表示され、そのまま選択すると、編集のメニューが表示されます。

今回は「 JavaScript 編集」を使うので、「テストパターン1（書き換え）」タブにポインタを移動させましょう。
すると、「 JacaScript 編集」のメニューが表示されます。

選択すると、 JavaScript 編集ウィンドウが表示されます。
この中に JavaScript を書いていくことになります。

「 JavaScript 編集」は柔軟にパターンを作成することができます。
中でも、「画面から編集する場合には手間がかかる・またはできないが、 JavaScript 編集を使えばできること」のうち、2点をご紹介します。

1. 要素の並び替え
   　・複数メニューが存在する場合、メニューの順番を入れ替えることができます。
   　・ユーザーに選択してほしい要素の順番を入れ替えてテストすることができます。
2. 要素の複製
   　・ボタンやリンクをコピーして、任意の場所に複製することができます。
   　・資料請求や申し込みのボタン・リンクを増やしてテストすることができます。

今回はこの中から「要素の並び替え」をやってみましょう！

例として、画面上部のメニューの入れ替えを行ってみたいと思います。
「会社情報」「サービス」「ブログ」「スタッフ」「採用情報」「お問い合わせ」の順でメニューが並んでいますが、ここでは仮定として、「スタッフ」ページをより見て欲しいとします。
そこで、「ブログ」と「スタッフ」のリンクをそれぞれ入れ替えて、効果があるかどうかテストするパターンを作成します。

「プレビュー」を選択してください。すると、別タブで対象の画面がプレビュー表示されます。

ここで JavaScript をいろいろ試してみて、上手くいった JavaScript のコードを、さきほどの JavaScript 編集ウィンドウに貼り付けるという手順で進めていきたいと思います。
※本記事はブラウザは Chrome、 OS は Mac で、検証等を行っております。
　そのため、ご覧になっている環境によっては若干表示が異なる場合もあります。
　ご了承ください。

プレビュー画面を表示したら、 Chrome の「表示」→「開発 / 管理」→「デベロッパーツール」を選択してください。

すると、画面の右側にデベロッパーツールのエリアが表示されます。

エリア上部に矢印のアイコンがあるので、それを選択した後、編集したい要素を選択しましょう。

すると、デベロッパーツールのエリアに HTML のコードが表示されます。
キャプチャ上の a タグで囲まれている要素が、「スタッフ」リンクの直接の要素です。
そして、そのリンクをリスト表示の中のひとつとして構成しているのが、 a タグのひとつ上の li タグです。

複数の li タグをまとめているのが ul タグであり、 JavaScript 編集をはじめるにあたっての開始地点になります。

対象の要素を指定する

さて、ここから本格的にコードを書いていくことになります。

JavaScript 編集で使用している ｊQuery は、 JavaScript コードをより簡単に記述できるようにするために設計されたライブラリのひとつです。
jQuery の構文の概要は以下のとおりです。

$("操作したい要素(セレクタ)").メソッド ;

操作したい要素（セレクタ）を特定して、それに対して何かをするというイメージです。

※セレクタについての解説はこちらの記事をご確認ください。
SiTest（サイテスト）のゴール設定で正規表現、セレクタを使ってみよう！

よってまずは、要素の特定から始めましょう。

ここでさきほど確認した「スタッフ」リンクの構成確認が必要になります。

<ul class="global_items">
  <li class="main_item has_submenu"><a href="/company.html" class="global_main_link">会社情報</a>...</li>            
  <li class="main_item has_submenu"><a href="/service/" class="global_main_link">サービス</a>... </li>
  <li class="main_item blog_item"><a href="/blog" class="global_main_link">ブログ</a></li>
  <li class="main_item has_submenu"><a href="/staff/" class="global_main_link">スタッフ</a>
    <ul class="global_sub_menu global_staff_menu" style="display: none;">
      <li><a href="/staff/" class="global_sub_link">スタッフ一覧</a></li>
      <li><a href="/staff/staff-data.html" class="global_sub_link">スタッフデータ</a></li>
      <li><a href="/staff/interview.html" class="global_sub_link">インタビュー</a></li>
    </ul>
  </li>

「スタッフ」リンクを構成しているのは、以下のとおりです。
・リンクタグは a タグ
・リンクタグを内包しているのは class 要素に「 main_item 」というクラス名を設定した上から3番目（要素は0から数えます。）の　li　タグ
・li タグを内包しているのは class 要素に「 global_items 」というクラス名を設定した ul タグ

これをjQueryで表すと、以下のようになります。

$(".global_items > .main_item").eq(3)

セレクタとセレクタの間に「>」を入れることで左辺の中の要素の右辺といったように、階層の中を掘って指定することができます。
また、 eq メソッドは、指定した要素を取得することができます。
よって、上のコードは「 global_items クラスが付与されているタグの中の main_item クラスが付与されているタグのうち0から数えて3番目の要素」ということになります。

このコードがきちんと対象を特定できているか、一度確認してみましょう。

デベロッパーツールの Console エリアに、上で作成した jQuery のコードを貼り付け、 enter キーを押下してください。

結果、返ってきた中の要素を確認すると、「 length 」が1になっています。
これで要素の特定は上手く出来ていることになります。

上手く要素を指定できなかった場合、たとえば存在しない要素を指定しようとすると、「 length 」が0で返ってきます。

要素の指定で不安のある場合は、確認してみるといいでしょう。

メソッドを定義する

さて次はメソッドを定義します。
ここでは、要素の移動で使用するメソッドのひとつ「 insertAfter 」メソッドを使います。

insertAfter メソッドの構文は以下のとおりです。

$("移動する対象の要素").insertAfter("移動した先の要素")

insertAfter メソッドは、対象の要素を指定した要素の後に移動させるメソッドです。

今回やりたいことは、「ブログ」リンクと「スタッフ」リンクの順番を入れ替えることです。
これは insertAfter メソッドを使って、以下のように記述することができます。

$(".global_items > .main_item").eq(3).insertAfter($(".global_items > .main_item").eq(1));

「スタッフ」リンク要素を、「サービス」リンク（0から数えて1つ目）要素の後に移動します。

※要素の移動や追加などのメソッドは以下のページにまとまっています。
DOMを操作して要素の挿入や移動をするいろいろ

実行結果を確認する

要素の指定の時と同じく、一度デベロッパーツールの Console エリアにコードを貼り付けて実行し、確かめてみましょう。

上手く動作しているようです。
「会社情報」「サービス」「ブログ」「スタッフ」の並び順が「会社情報」「サービス」「スタッフ」「ブログ」に修正され、順番を入れ替えることが出来ました。

JavaScript 編集ウィンドウにコードを入力し、プレビューで確認する

コードが上手く動作しているのを確認できたので、後はコードを JavaScript 編集ウィンドウに入力すれば設定完了です。

先程作成したコードをそのまま編集ウィンドウに貼り付けて「決定」ボタンを選択してください。

後は「プレビュー」で変更が反映できていれば完了です。

いかがでしたでしょうか？
普段 JavaScript や HTML に馴染みのない方はとっつきにくかったかもしれませんが、 JavaScript 編集を使いこなせるようになると、テストパターンの設定をより柔軟に行うことができます。

文中でもご紹介しましたが、要素の特定(セレクタ)については、下の記事でも扱っているのでぜひご覧ください。
SiTest（サイテスト）のゴール設定で正規表現、セレクタを使ってみよう！

またSiTestが提供しているスプリットテストのメリット等が知りたい方は下の記事で詳しくご紹介しております。
SiTest の３種類のスプリットテストを徹底比較！あなたが使うべきスプリットテストを見極めよう

お問合わせは、こちらまでお気軽にどうぞ！
JavaScript はブラウザですぐ結果を確認することができるので、自分なりにセレクタを指定したり、要素を追加・削除・非表示・移動などを試してみたり手軽にできるので、ぜひお試しください！