正規表現と jQuery セレクタを使って、同じドメインの複数のURLのページ上に配置された共通の要素にステップの達成条件を設定できます。
例として、弊社のコーポレートサイト（https://www.glad-cube.com/）のヘッダー上の共通の要素である［お問い合わせ］ボタンに、ステップの達成条件の「指定した要素をクリックする」を設定します。
「www.glad-cube.com」ドメインのURLのページであれば、サイト訪問者がどのページの［お問い合わせ］ボタンをクリックしてもステップの条件を達成したと判定します。
正規表現について詳しくは「ゴールの新規作成：ページを正規表現で指定する」をご確認ください。
jQuery セレクタについて詳しくは「ゴールの新規作成：要素を jQuery セレクタで指定する」をご確認ください。
1. 新規ゴールを作成する
［ゴールを新規作成］ボタンをクリックします。
2. 新規ゴールの基本設定
任意の「ゴール名」を入力します。
3. 「ページ指定」に正規表現の文字列を入力する
①［URLの正規表現を入力］のラジオボタンを［オン］にします。
② 正規表現の文字列を入力して、同じドメインのURLをまとめて指定します。今回の例では以下の文字列になります。
③［URLパラメータ］も含めて設定する場合は、「URLの正規表現を入力」に入力せず「URLパラメータを設定する」にチェックの上、keyとvalueを入力します。
^(http|https):\/\/www\.glad-cube\.com\/.*
| 💡【解説】弊社のコーポレートサイトは SSL に対応しており、「http」と「https」どちらのプロトコルでもアクセスできるので、「^」と「(http|https)」を使用して「http」と「https」を入力の先頭に指定します。 ［お問い合わせ］ボタンが配置されたヘッダーは「www.glad-cube.com」ドメイン配下のすべてのページに表示されるので、「.*」を使用してすべてのページを指定します。 |
4. デベロッパーツールを開く
① 指定する共通の要素があるページを Google Chrome で開き、ページ上で右クリックしてコンテキストメニューを開きます。
② コンテキストメニューから［検証］を選択します。
5. デベロッパーツールでページのソースコードを確認する
デベロッパーツールでページのソースコードを確認します。ソースコードが表示されないときは［Elements］タブをクリックします。
6. 目的の要素のソースコードを確認する
①［］ボタンをクリックします。
② 指定したい要素を「ページ上」でクリックします。
③ クリックした要素に該当する文字列が「ソースコード上」でフォーカスされます。
7. jQuery セレクタで要素を指定する
ヘッダー上の［お問い合わせ］ボタンを jQuery セレクタの文字列で指定します。今回の例では要素に与えられた class 属性を使用します。
$(".toiawase")
| 💡【解説】指定したい要素に与えられた class 属性から jQuery セレクタを指定できます。 今回の例では［お問い合わせ］ボタンに「global_main_link」と「toiawase」の2つの class 属性が与えられています。「global_main_link」の class 属性は他の要素にも与えられているので、［お問い合わせ］ボタン『だけ』を指定したいときは「toiawase」だけを使用します。 複数の要素をまとめて指定する方法については「ゴールの新規作成：要素を jQuery セレクタで指定する」をご確認ください。 |
8.「要素の指定」に jQuery セレクタの文字列を設定する
①「このステップの達成条件」メニューから［指定した要素をクリック］を選択します。
②「要素の指定」の入力フィールドに jQuery セレクタの文字列を入力して、共通の要素をまとめて指定します。
9. ステップを追加する／新規ゴールの作成を完了する
「ゴール達成までのステップ」を追加するときは［ステップを追加］ボタンをクリックします。
詳しくは「ゴールの新規作成：「ステップ」を追加／削除する」をご確認ください。
新規ゴールの作成を完了するときは［作成］ボタンをクリックします。