自動表示条件でよくある設定としては以下の3つがあります。

1. 特定のユーザーに、特定の画面でポップアップを表示したい
2. SPA実装などでURLは同じだが、特定の画面のみにポップアップを表示したい
3. 特定の画面で特定の要素が出現した際にポップアップを表示したい

それぞれの設定例について解説します。

■目次

• ■目次
• 1. 特定のユーザーに、特定の画面でポップアップを表示したい
• ■ 解説
• ■ 設定例①：無料プランユーザーにトップ画面で表示する
• ■ 設定例②：特定の企業群に対してダッシュボード画面で表示する
• 2. SPA実装などでURLは同じだが、特定の画面のみにポップアップを表示したい
• ■ 解説
• ■ 設定例：編集画面のみにポップアップを出したいとき
• 3. 特定の画面で特定の要素が出現した際にポップアップを表示したい
• ■ 解説
• ■ 設定例：設定画面にて名前とメールアドレス追加の要素が表示された場合にポップアップを出したいとき

1. 特定のユーザーに、特定の画面でポップアップを表示したい

■ 解説

Onboardingでは、「特定のユーザー」と「特定の画面」というように2つ条件に分けて設定します。

それぞれは以下の条件を利用します。

■ 設定例①：無料プランユーザーにトップ画面で表示する

この場合、「無料プランユーザー＝特定のユーザー」と「トップ画面＝特定の画面」という形で設定します。

設定は以下のように行います。

■ 設定例②：特定の企業群に対してダッシュボード画面で表示する

この場合、「CSVで作成した企業リスト＝特定の企業群」と「ダッシュボード画面＝特定の画面」という形で設定を分ける必要があります。

設定は以下のように行います。

2. SPA実装などでURLは同じだが、特定の画面のみにポップアップを表示したい

■ 解説

SPA実装をしている場合、URLは「https://sample.io」でURLが変わらずに中の画面が遷移していくようなケースがあります。

この場合は表示したい画面で他の要素にはないユニークな要素を指定します。

理由として、SPAではURLの変化による画面の識別が困難なため、特定の要素の有無で画面を判定する必要があります。

今回は以下のように4つの画面があるプロダクトにて、編集画面のみに出したい場合を想定します。

■ 設定例：編集画面のみにポップアップを出したいとき

この場合、他の画面にはない編集画面のみにある要素が表示されたときという設定をする必要があります。

Onboarding拡張機能で要素を取得したところ、以下画像の「どのレポートを編集しますか？」という要素は、div.edit__information だったと仮定します。

設定は以下のように行います。

3. 特定の画面で特定の要素が出現した際にポップアップを表示したい

■ 解説

特定の画面において、設定するための要素や設定が完了しましたなどの要素が出現した際に、ポップアップを出したい場合を想定します。

今回は以下のように設定画面にて、名前とメールアドレス追加の要素が表示された場合の設定例をご説明します。

■ 設定例：設定画面にて名前とメールアドレス追加の要素が表示された場合にポップアップを出したいとき

この場合、「設定画面」と「名前とメールアドレス追加の要素が表示された場合」という設定をする必要があります。

Onboarding拡張機能で要素を取得したところ、以下画像の名前とメールアドレス追加の要素は、div.user_add_modal:contains('名前') だったと仮定します。

設定は以下のように行います。