この記事では、CSS セレクターの設定方法について説明します。
目次
CSS セレクターとは
CSS セレクターの入力が必要な箇所
CSS セレクターの設定について
CSS セレクターとは
CSS セレクターは、「HTML内の要素を指定するためのもの」です。
元々は、CSS のスタイルを HTML 内のどの要素に適用するかを指定するためのものですが、JavaScript で処理を行う際に、処理対象とする要素を指定する目的でも使われています（Sprocket の場合は後者に該当）。
CSS セレクターの入力が必要な箇所
Sprocket では、2つの目的で CSS セレクターを使用しています。
[吹き出し型] のポップアップを表示させる位置を指定する
[吹き出し型] のポップアップは、ページ内のボタンや画像など、特定の要素に吸着した形で表示されます。この吸着対象を指定するために CSS セレクターを用います。
[吹き出し型] のポップアップについて、詳しくは以下の記事をご参照ください。
行動データの送信条件を指定する
CSS セレクターは行動データ設定にも使われます。具体的には、以下の種類の行動データを作成する際に、CSS セレクターの設定が必要です。
- ページの閲覧（特定要素あり）
- ページの閲覧（特定文字あり）
- 画面内に表示（特定要素）
行動データの種類や設定方法について、詳しくは以下の記事をご参照ください。
CSS セレクターの設定について
ページ内の CSS セレクターを探す方法
対象ページをブラウザで開き、対象とする要素を表示します。ここでは、以下ページ内の [サービス内容を詳しく見る] ボタンの CSS セレクターを取得する手順をご説明します。
ブラウザーの表示モードを開発者ツール（デベロッパーツール）に切り替えます。Google Chrome の場合はページ上で右クリックして、開いたメニューから [検証] を選択します。
その後、ウインドウ右側に表示されたソースコードの中から、対象箇所を探します。
※ ソースコードにマウスカーソルを重ねると、ページ内の該当箇所がハイライト表示されるので、どのコードがどの要素を指しているのかがわかります。
指定したい要素が見つかったら、その要素にカーソルを重ねて右クリックし、開いたメニューから、[Copy selector] を選択します。CSSセレクターがクリップボードにコピーされますので、管理画面の入力欄にペーストできます。
変更に強い CSS セレクターの指定方法
CSS セレクターは、ページ改修の影響を受けやす書き方、受けにくい書き方があります。設定を行う際は、なるべく影響を受けにくい指定方法にすることをおすすめします。
ページ改修の影響を受けやすい例
例１）
#page > div > section.cmn-block.itemlist_block > p > .check_item_block
これは「#page の直下の div の直下の section.cmn-block.itemlist_block 直下の p タグ直下の .check_item_block というクラスが設定されている要素」という意味になります。したがって id 名や class 名が 1 箇所でも変わると指定できなくなくなります。
例２）
body > div:nth-child(2) > div
赤字の部分は「HTML内で何番目か」という要素の順番での指定のため、HTML 内の要素が増減するだけで対象要素が指定できなくなります。
ページ改修の影響を受けにくくするための工夫
- できるだけ少ない要素の id 名や class 名で指定する。
- nth-child など要素の順番での指定はできるだけ行わない。
接客シナリオ運用にあたっての考慮事項
CSS セレクターはページの中の要素を指定します。そのため、対象ページの改修（要素の追加・削除・変更など）により、対象要素を指定する CSS セレクターが変わることがあります。CSS セレクターが変わると、ポップアップが表示されなくなったり、行動データが送信されなくなる可能性があります。
[吹き出し型] のポップアップを表示しているシナリオがある場合や、ユーザーのクリック、スクロールをきっかけにしている行動データがある場合は、そのページの改修をおこなう前に影響がないかどうかを事前にご確認ください。
管理画面のバリデーターは、すべてのCSSセレクターの記述エラーの検出を保証するものではありません。「document.querySelector();」で「SYNTAX_ERR」を返すCSSセレクターのみをエラーとして検出できます。
CSS セレクターの指定や接客シナリオの運用について、ご心配な点やご不明な点がございましたら、担当コンサルタントまでご相談ください。