Webページからセレクタのコードを取得するには?

セレクタのコードをGoogle Chromeのデベロッパーツールでかんたんに確認する方法をご紹介します。

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

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

カーソルマークを選択し、指定したい要素をクリックすると、該当の部分がフォーカスされます。

対象となる範囲(<a></a>)の部分で右クリックし、「Copy Selector」を選択します

#index > section > header > ul > li.header__nav–contact > a
このような形で要素が選択できますので、
$(“#index > section > header > ul > li.header__nav–contact > a“)
という形式で、SiTest の「要素の指定」部分に挿入します。

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

正規表現やセレクタに詳しい方は、サイト構造を踏まえてセレクタを直接指定していただくこともできます。詳しくはこちらの
SiTest ブログ
をご確認ください。