メインコンテンツにスキップ

特定のCSSクラスを持つ要素があるときにポップアップを表示する

「要素がCSSクラスを持っている」ターゲティング条件を使用して、特定のCSSクラスがページ上に存在する場合にのみポップアップを表示する方法。Proプラン以上で利用可能。

「要素がCSSクラスを持っている」条件を使うと、特定のCSSクラスがページ上に存在する場合にのみポップアップを表示できます。

⚠️ この機能はProプラン以上でご利用いただけます。

利用シーン

タブを切り替えてもURLが変わらないページ(JavaScriptでコンテンツを切り替えるランディングページなど)では、標準のURL条件ではタブの状態を絞り込めません。しかし、この機能を使うことで、特定のタブがアクティブな状態をターゲットにできます。

設定方法

  1. 「ルール」タブを開き、「どのページに表示するか」に進む

  2. 「複数のURL・高度なターゲティング」を選択する

  3. 「要素がCSSクラスを持っている」条件を追加する

  4. 要素がアクティブな状態のときに付与されるCSSクラス名を入力する

CSSクラス名の調べ方

ブラウザの開発者ツールを開き(Chromeの場合はF12キー)、対象の要素を右クリックして「検証」を選択し、class="..." 属性を確認してください。

注意事項

この条件は、トリガーが発火した瞬間のクラスの有無を確認します。タブがクリックされた直後にポップアップを表示させたい場合は、カスタムトリガー(JavaScript)の方がより確実です。

こちらの回答で解決しましたか?