SiTest（サイテスト）のゴール設定で正規表現、セレクタを使ってみよう！ ｜ SiTest (サイテスト) ブログ

※　2019/03/05　改訂いたしました。

SiTest (サイテスト)にはゴール設定によりコンバージョンの条件を設定することが出来ます。
基本的には、各 URL ごとにゴール設定をするのですが、正規表現を使用すると、同ドメインの複数の URL をまとめてゴール設定することができるようになります。

クリックゴールなどを設定する際は、測定したい要素を選択する必要があります。
SiTest の画面上からでも、要素を選択することができるのですが、 jQuery セレクタを知ることで、隠れている要素を指定するなど、より高度な設定をすることができます。
今回は、正規表現・セレクタの使い方から、実際のゴール設定までを見ていきましょう。

1.ゴール設定とは？
2.正規表現とは？
3.セレクタとは？
4.正規表現とセレクタを使ってできること
5.参考

ゴール設定とは、SiTest のシステム上で計測するコンバージョンの条件を設定することです。
特定のページへの到達、ページ内でのユーザー行動（要素のクリック、滞在時間など）だけでなく、ステップを作って、ユーザーの一連の行動をゴールとして設定することも可能です。
プロジェクトの一覧画面で、プロジェクトごとにゴール設定が可能です。
※但し、プロジェクトを跨いでのゴール設定はできませんのでご注意下さい。

正規表現とは、文字列内で文字の組み合わせを照合するために用いられるパターンです。
正規表現パターンは単純な文字と特殊文字との組み合わせからなります。

SiTest のゴール機能でよく使われている正規表現の特殊文字を見ていきましょう。

上記で紹介しました特殊文字を使用して正規表現パターンを作成することにより、同ドメインの複数の URL をまとめてゴール設定することができるようになります。

例えば、全てのページに共通ヘッダーがあり、その中の電話番号などの要素をクリックしたことをゴールにしたい場合などに便利です。

SiTest でのセレクタで指定できる形式は jQuery セレクタ形式だけです。
jQuery セレクタを使用すると、隠れ要素など、「ページから選択」から設定できないものも設定することが出来るようになります。

「ページから選択」を使用しての設定方法については、下記をご覧ください。

【新機能】各ページ共通ヘッダーの要素など、複数 URL にまたがるゴール設定も可能に！
セレクタでよく使用する、jQuery セレクタを見ていきましょう。

上記で紹介しました jQuery セレクタを使用してセレクタのコードを作成することにより、高度な要素指定をすることができます。

例えば、クリックすると表示されるドロップダウンメニューがある場合、管理画面上からは選択できませんので、便利です。

正規表現とセレクタをうまく活用して、どのように設定していくかを見ていきましょう。

共通要素をゴール設定する

正規表現で、同ドメインの複数の URL をまとめてゴール設定するため、今回は共通部分によく用いられるヘッダーを例にしていきます。

弊社コーポレートサイト( https://www.glad-cube.com )のヘッダーの問い合わせリンクをクリックゴールとして設定していきます。

まずは、プロジェクト一覧から、自分がゴール設定したいプロジェクトを選んで、「ゴール」を選択し、「＋ゴールの新規作成」をクリックして下さい。

そして、ゴール名を入力し、ゴールの目的を選択したら、ステップを作成します。

ページ指定の項目で「URLの正規表現を入力」を選択し、その下のBOX内に正規表現を入力することで、複数ページにまたがったゴールを一括設定することができます。

JavaScript の正規表現を入力することで、URL をまとめて指定することができます。
今回だと下記のような正規表現パターンになります。

^(http|https):\/\/www\.glad-cube\.com\/.*

正規表現パターンの各特殊文字について、解説していきます。

弊社のコーポレートサイトは SSL 対応しておりますので、 http または https のどちらからのプロトコルでもアクセスすることができます。
よって、 「^」と「|」を使用して、 http または https のどちらかが先頭にくるように指定しています。
また、ヘッダーは共通部分なので、 www.glad-cube.com ドメイン配下の全ページを含めるため、「.*」という書き方をしています。

次に、セレクタを選択しましょう。
指定したい要素の位置を知る必要があるので、正規表現で設定したURLに遷移して、デベロッパー・ツールで確認していきましょう。

ページ内で右クリックし、メニューから「検証」をクリックします。
するとデベロッパー・ツールが開いて、Web サイトの HTML が表示されます。
※ 上手く表示されていない場合はタブの「Elements」をクリックしてください。

確認すると、指定したい要素が body 要素から見て、どの位置にあるかを確認できます。
今回、指定したい要素であるヘッダーのお問い合わせリンクの位置は下記になります。

body タグの子要素の中の
1番目の header タグの子要素の中の
1番目の div タグの子要素の中の
2番目の div タグの子要素の中の
1番目の ul タグの子要素の中の
6番目の li タグの子要素の中の
1番目の a タグ

これをセレクタで表すと下記のようになります。

$("body").children("header").eq(0).children("div").eq(0).children("div").eq(1).children("ul").eq(0).children("li").eq(5).children("a").eq(0)

ただ、まどろっこしいと思いますので、簡易な書き方を紹介します。

デベロッパー・ツールで指定したい要素を確認すると、class 属性がふられているのがわかりますね。
今回だと、global_main_link と toiawase という class 属性があります。
global_main_link は違う箇所にも class 属性として使用されているので、 toiawase だけを使います。

これをセレクタで表すと、

$(".toiawase")

で設定できます。

これで、「作成する」をクリックすると、
www.glad-cube.com ドメインのヘッダーのある全ページで「問い合わせ」がクリックされれば、コンバージョンとして計測されるようになります。

ヘルプでも、詳しく説明していますので、ご参照下さい！

お問合わせは、こちらまでお気軽にどうぞ。
ぜひ、正規表現やセレクタを使ったゴール設定をお試しください！