Simple Popup Blocks
DrupalのBlock、Views、フォーム、またはカスタムCSS要素を、豊富な表示制御オプションを備えた設定可能なポップアップに変換します。
simple_popup_blocks
インストール
composer require 'drupal/simple_popup_blocks:8.x-3.5'
概要
Simple Popup Blocksは、任意のBlockコンテンツ、Views、フォーム、またはカスタムHTML要素を完全にカスタマイズ可能なポップアップに変換する多機能なDrupalモジュールです。このモジュールは、管理者が配置、表示頻度、トリガー方法、視覚的な制御を含むポップアップの動作を定義できる包括的な設定インターフェースを提供します。
このモジュールは、Drupal Block（ドロップダウンから選択）とカスタムCSSセレクター（idまたはclass）の両方をポップアップソースとしてサポートしています。10種類のレイアウト位置（角、中央、全幅/全高バー）、3種類のトリガー方法（自動、手動クリック、ブラウザ/タブを閉じる検知）、および訪問回数または時間ベースの間隔による高度な表示頻度制御を提供します。
各ポップアップは、最小化ボタンと閉じるボタン、ESCキーサポート、オーバーレイ背景、設定可能な遅延、レスポンシブトリガー幅、カスタマイズ可能な寸法で個別に設定できます。このモジュールはCookieを使用して訪問者のインタラクションを追跡し、ポップアップの表示頻度を制御します。各ポップアップに対してCSSセレクターが自動的に生成され、カスタムスタイリングが可能になります。
Features
- 利用可能なBlockから選択して、任意のDrupal Blockをポップアップに変換
- Views、フォーム、または任意のHTML要素のカスタムCSSセレクター（idまたはclass）からポップアップを作成
- 10種類のレイアウト位置：左上、右上、左下、右下、中央、上中央、上部バー、下部バー、左バー、右バー
- 複数選択可能な訪問回数ベースの表示制御（1回目、2回目、特定の訪問、または毎回表示）
- 毎時、毎日、または毎週の間隔による時間ベースの頻度制御
- 3種類のトリガー方法：自動（オプションの遅延付き）、手動（指定要素のクリックイベント）、ブラウザ/タブを閉じる前（離脱意図）
- 表示/非表示オプション付きの設定可能な最小化、閉じる、最小化済みボタン
- ポップアップを閉じるためのESCキーサポート
- 半透明のオーバーレイ背景オプション
- 自動ポップアップ表示までの設定可能な遅延（秒単位）
- ビューポート幅に基づいてポップアップ表示を制御するレスポンシブトリガー幅設定
- ピクセル単位でカスタマイズ可能なポップアップ幅
- Cookie有効期限設定（セッションCookieの場合は0、または指定日数）
- カスタムスタイリング用のCSSセレクター参照テーブルをポップアップ作成後に提供
- 管理ページではポップアップを自動的に非表示
Use Cases
ニュースレター購読ポップアップ
Webformモジュールを使用してニュースレター登録フォームを含むBlockを作成します。ページ下部のリージョンにBlockを配置します。Add simple popup blocksに移動し、ドロップダウンからBlockを選択し、「Center」レイアウトを選び、トリガー方法を「Automatic」に設定して5秒の遅延を設定します。オーバーレイと閉じるボタンを有効にします。訪問回数を「1」に設定して、最初の訪問のみ表示します。これにより、新規訪問者に一度だけ表示され、購読を促す中央モーダルが作成されます。
Cookie同意バナー
Cookieポリシーテキストと同意ボタンを含むカスタムBlockを作成します。リージョンに配置します。このBlockを選択してポップアップを作成し、「Bottom bar」レイアウトを選んでページ下部の全幅に表示します。訪問回数を「0」に設定して毎回表示するか（または時間頻度を「Weekly」に設定）します。邪魔にならないバナーなのでオーバーレイを無効にします。提供されたセレクターを使用してカスタムCSSを追加し、サイトデザインに合わせてバナーをスタイリングします。
離脱意図オファー
特別オファーや割引コードを含むプロモーションBlockを作成します。「Before browser/tab close」トリガー方法で「Center」レイアウトとオーバーレイを有効にしてポップアップを作成します。訪問回数を「1,2,3」に設定して、最初の3回の訪問で表示します。これにより、ユーザーがマウスをブラウザの閉じるボタンに向けて動かしたときに表示される離脱意図ポップアップが作成され、離脱しようとしている訪問者をコンバージョンできる可能性があります。
クリックで開くモーダル
テンプレートの任意の場所に、お問い合わせフォームを含むid「contact-modal」のカスタムdivを追加します。タイプ「Custom css id or class」でポップアップを作成し、セレクターとして「contact-modal」を入力し、CSSセレクタータイプとして「Css id」を選択します。トリガー方法を「Manual」に設定し、トリガーセレクターとして「#contact-trigger」を入力します。ページの任意の場所にid='contact-trigger'のボタンまたはリンクを追加します。この要素をクリックすると、中央ポップアップでお問い合わせフォームが開きます。
モバイル専用プロモーション
アプリダウンロードやモバイル専用コンテンツ用のプロモーションBlockを作成します。ポップアップを設定する際、「Trigger width」を「768」ピクセルに設定します。ポップアップはビューポート幅が768px以上のデバイスでのみ表示されます。モバイル専用ポップアップの場合、このロジックを反転するにはカスタムJavaScriptが必要ですが、提供されたCSSセレクターを使用してメディアクエリでデスクトップでポップアップを非表示にすることができます。
最小化機能付きタイマーお知らせ
重要なサイト更新用のお知らせBlockを作成します。「Top right」レイアウトでポップアップを設定し、最小化ボタンを有効にして、10秒の遅延を設定します。「Show minimized button when popup is not automatically triggered」を有効にして、ユーザーがお知らせを再度アクセスできるようにします。時間頻度を「Daily」に設定して、リピート訪問者に1日1回表示します。ユーザーはポップアップを最小化し、最小化インジケーターをクリックして再度読むことができます。
Tips
- ポップアップソースBlockはページテンプレートの下部のリージョンに配置すると最良の結果が得られます - これによりJavaScript実行時に要素が利用可能になります
- 低速接続でのページ読み込み時のコンテンツのちらつきを防ぐため、ポップアップ要素には常に推奨される「display: none」CSSルールをテーマに追加してください
- 編集フォームで提供されるCSSセレクターを使用して、サイトのテーマに合わせたカスタムポップアップデザインを作成できます
- 離脱意図ポップアップの場合、トリガーはマウスがビューポートの上部20ピクセルから離れたときのみ発火し、ブラウザタブを閉じる意図を模倣します
- 訪問回数を戦略的に組み合わせます - 「1,4,7」を使用して1回目、4回目、7回目の訪問で表示し、邪魔にならない効果的なリマーケティングを行います
- Cookie有効期限を0に設定すると、新しいブラウザセッションごとに表示されるセッションベースのポップアップ（Cookie同意など）になります
- トリガー幅設定を使用して、画面スペースが限られているモバイルデバイスでプロモーションポップアップを非表示にします
- 最小化機能は、ユーザーがセッション中に再度参照したいお知らせに便利です
- カスタムCSSセレクターを使用する場合、他のページ要素との競合を避けるため、対象要素に一意のidまたはclassがあることを確認します
- 既存のCookieなしで新規訪問者をシミュレートするには、シークレット/プライベートブラウザウィンドウでポップアップ設定をテストします
Technical Details
Admin Pages 4
/admin/config/media/simple-popup-blocks/add
Drupal Blockまたはカスタムセレクターを選択し、レイアウト、頻度、トリガー、スタイリング制御を含むすべての表示オプションを設定して、新しいポップアップ設定を作成します。
/admin/config/media/simple-popup-blocks/manage
既存のすべてのポップアップ設定をテーブル形式で表示・管理し、編集と削除操作にすばやくアクセスできます。
/admin/config/media/simple-popup-blocks/manage/{uid}
既存のポップアップ設定を編集します。追加フォームのすべてのオプションに加えて、有効/無効のステータス切り替えと、スタイルカスタマイズ用のCSSセレクターのテーブルが含まれます。
/admin/config/media/simple-popup-blocks/delete/{uid}
ポップアップ設定を完全に削除するための確認フォーム。
権限 1
Hooks 2
hook_help
モジュールのヘルプページで基本的な設定手順を説明するヘルプテキストを提供します。
hook_page_attachments
非管理ページにポップアップJavaScriptライブラリと設定を添付します。すべてのアクティブなポップアップ設定を読み取り、JavaScript処理のためにdrupalSettingsに渡します。
Troubleshooting 6
テーマのスタイルシートにCSSを追加して、デフォルトで要素を非表示にします。編集フォームの調整クラスセクションに表示されているCSSセレクターを使用します。例：#your-block-id { display: none; } これにより、JavaScriptがポップアップを初期化するまでコンテンツが表示されなくなります。
1. すべてのDrupalキャッシュをクリアします（管理画面 > 環境設定 > パフォーマンス > すべてのキャッシュをクリア）。2. 編集ページでポップアップのステータスが「Active」に設定されていることを確認します。3. Blockまたはselector要素が現在のページに実際に存在するか確認します。4. 訪問回数を使用している場合、テストのために「0」に設定して毎回表示を試みます。5. ブラウザコンソールでJavaScriptエラーを確認します。
訪問回数が「0」（毎回）に設定されている場合、これは期待される動作です。訪問回数を特定の数字（例：「1」）に変更して一度だけ表示するか、時間頻度をDaily/Weekly設定で使用してポップアップの表示頻度を制限します。
ポップアップ設定のトリガーセレクターが#または.で始まっていることを確認します（例：#my-buttonまたは.trigger-class）。そのセレクターを持つ要素がページ上に存在することを確認します。大文字小文字を含めてセレクターが正確に一致していることを確認します。
モジュールは管理ルートでポップアップを自動的に無効にします。予期しない動作が見られる場合は、キャッシュをクリアし、非管理ページ（例：ノードページ、フロントページ）でテストしていることを確認します。
Cookie有効期限0はブラウザを閉じたときにCookieを削除します（セッションCookie）。正の数値は日数で有効期限を設定します。ブラウザでCookieが有効になっていて、サードパーティCookieがブロックされていないか確認します。ブラウザ開発者ツールを使用して「spb_」プレフィックスのCookieを検査します。
Security Notes 4
- すべてのポップアップ設定は、XSS攻撃を防ぐためにJavaScriptに渡される前にHtml::escape()を使用してサニタイズされます
- モジュールはすべての設定ページに「administer simple_popup_blocks」権限を要求します
- Cookie値には数値の訪問回数またはタイムスタンプのみが含まれ、機密データは含まれません
- 管理者が入力したカスタムCSSセレクターはインジェクション攻撃を防ぐために検証される必要があります - モジュールはセレクター入力フィールドで.または#で始まらないことを検証します