POPUP管理プラグイン オンラインマニュアル
PopupManage Plugin — 設定・ターゲティング・GA4連携・分析の完全操作ガイド
1プラグイン概要
POPUP管理プラグイン(PopupManage)は、EC-CUBE 4.2 / 4.3のフロント画面(ショップ画面)上に、 お知らせ・クーポン・キャンペーンバナー・会員限定案内・年齢確認などのポップアップ(モーダル)を自由に作成・配信できる 高機能マーケティングプラグインです。
複数のポップアップを優先順位(Sort No)で管理し、アクセスユーザーの条件(デバイス・会員状態・URLパス・カート状態・表示期間など)に 応じて、最も優先度の高い1つを自動的に選択して表示します。
主な特長
2インストール・有効化
2-1. コマンドラインでのインストール(推奨)
EC-CUBEのルートディレクトリで以下のコマンドを順に実行します。
# プラグインのインストール
php bin/console eccube:plugin:install --code=PopupManage
# データベーステーブルの作成
php bin/console eccube:plugin:schema-update PopupManage
# プラグインの有効化
php bin/console eccube:plugin:enable --code=PopupManage
# キャッシュのクリア
php bin/console cache:clear2-2. 管理画面からのインストール
管理画面ログイン
EC-CUBE管理画面(/admin)にログインします。
プラグイン一覧を開く
オーナーズストア > プラグイン > プラグイン一覧 を開きます。
インストール & 有効化
「POPUP管理プラグイン」を選択し、インストールおよび有効化を実行します。
plg_popup_manage_item が自動生成されます。3管理画面:POPUP 一覧
管理画面メニューの コンテンツ管理 > POPUP 管理 > POPUP 一覧 から、登録済みポップアップの確認と管理が行えます。
4POPUP 作成・編集 — 設定項目詳細
一覧画面の 「新規作成」 ボタンまたは各行の編集ボタンから設定画面へ移動します。
4-1. 基本設定
| 項目名 | 必須 | 設定内容 |
|---|---|---|
| ステータス | 必須 | 「公開」または「非公開」を選択します。非公開のポップアップはフロントに表示されません。 |
| タイトル | 任意 | ポップアップの上部に表示するタイトルテキスト。未入力の場合は表示エリアが非表示になります。 |
| デザインタイプ | 必須 | テキストのみ / 画像のみ / 画像とテキスト から選択します。 選択に応じて表示される入力欄が切り替わります。 |
| モーダルサイズ | 必須 | 小 (400px) / 中 (560px) / 大 (800px) / 全幅 (92%) から選択します。 コンテンツ量やデバイスに合わせて選択してください。 |
4-2. 画像・コンテンツ設定
| 項目名 | 必須 | 設定内容 |
|---|---|---|
| 画像 | 任意 | ポップアップ内に表示する画像ファイルをアップロードします。アップロード後、Cropper.jsによるトリミングダイアログが起動し、その場で切り抜きが行えます。 |
| 画像リンク先 URL | 任意 | 画像をクリックした際の遷移先URLを指定します。例:/products/detail/5 |
| リンクの開き方 | 任意 | 同じタブ (_self) または 新しいタブ (_blank) を選択します。 |
| 本文 | 任意 | TinyMCE WYSIWYGエディタでテキスト・HTML装飾・画像埋め込みを行えます。HTMLソースコードの直接編集モードにも切り替え可能です。 |
| OKボタンの文言 | 任意 | ポップアップ下部のメインCTAボタン文言を設定します(例:「今すぐチェック」「閉じる」)。未入力時はボタン自体が非表示になります。 |
| リダイレクト設定 | 任意 | ×ボタン・背景クリック・ESCキーでポップアップを閉じた際に、特定のURLへ自動遷移させるかを ON/OFF で設定します。 |
| リダイレクト先 URL | 任意 | 閉じた際の遷移先URLを指定します(例:/products/list)。リダイレクト設定がONの場合のみ有効です。 |
4-3. 表示対象・条件設定(ターゲティング)
| 項目名 | 設定内容 |
|---|---|
| 表示する画面(ルート) | トップページ、商品一覧、商品詳細、カート、購入手続きなどから複数選択可。該当ルートのページのみでポップアップが評価されます。 |
| 特定の表示パス | 特定のURLパターンでのみ表示したい場合に、改行区切りで入力します。アスタリスク * によるワイルドカードが使用可能です。例: /products/detail/10*(商品ID 10番台のみ)、/cart(カートページのみ) |
| 除外するパス | 表示させたくないURLパターンを改行区切りで入力します。ワイルドカード対応。 例: /shopping/*(購入手続き全ページを除外) |
| 対象デバイス | すべての端末 / PCのみ / スマートフォンのみ から選択します。 |
| 対象顧客 | すべて / ゲスト(未ログイン)のみ / 会員(ログイン済み)のみ から選択します。 |
| 対象カート状態 | すべて / カートが空の時のみ / カートに商品がある時のみ から選択します。 |
| 表示期間 | 表示開始日時・表示終了日時を指定します。空欄の場合は期間制限なし(常時)。キャンペーン期間限定のポップアップに活用できます。 |
4-4. 表示トリガー & 表示頻度設定
| 項目名 | 選択肢・説明 |
|---|---|
| 表示トリガー | ディレイ: ページ読み込み後、指定秒数が経過してから表示。 スクロール: ページを指定の割合(%)までスクロールした際に表示。 Exit Intent: PC閲覧時にカーソルが画面上端(ブラウザのタスクバー付近)へ移動した離脱検知時に表示。 |
| トリガーの値 | ディレイ選択時は「秒数」(例:3 = 3秒後)、スクロール選択時は「%」(例:50 = 50%スクロール)を数値で入力します。 |
| 表示頻度 | 毎回表示: ページ遷移ごとに条件に合えば毎回表示。 セッション内1回: ブラウザを閉じるまでの1セッション中1回のみ表示。 1日1回: 24時間に1回のみ表示(Cookieで管理)。 |
| 「今後表示しない」設定 | チェックボックスをポップアップ下部に表示するか設定します。ユーザーがチェックして閉じた場合、指定日数(例:7日間)の間は再表示されなくなります。チェックボックスのラベル文言も自由に変更できます。 |
4-5. Google Analytics 4(GA4)トラッキング設定
| 項目名 | 設定内容 |
|---|---|
| GA4 連携 | 「有効」にすると、サイトに GA4 タグが導入されている場合に自動でカスタムイベントを送信します。 |
| 表示イベント名 | ポップアップが表示された際に GA4 へ送信されるイベント名。デフォルト:popup_view |
| クリックイベント名 | OKボタンや画像がクリックされた際に GA4 へ送信されるイベント名。デフォルト:popup_click |
5ライブプレビュー機能
編集画面の下部にある 「プレビューを見る」 ボタンをクリックすると、 現在の設定内容で実際のポップアップがどのように表示されるかを保存前にシミュレーションできます。
プレビューで確認できる内容
- タイトル・本文のレイアウト: フォント・改行・HTML装飾の最終的な見栄え
- 画像のトリミング状態・アスペクト比: Cropper.jsで切り抜いた画像がどのようにモーダルに収まるか
- OKボタンの文言: ボタンのテキストと表示位置
- 「今後表示しない」チェックボックス: ラベル文言と表示位置の確認
- モーダルサイズ感: 小/中/大/全幅の実際のサイズ感
6フロント画面での表示ロジック(仕様)
ポップアップ候補のリストアップ
ユーザーがショップ画面にアクセスした際、ステータスが「公開」のポップアップを優先順位(Sort No)が高い順にリストアップします。
表示条件の評価
各ポップアップについて、表示画面(ルート)・特定パス・除外パス・デバイス・会員状態・カート状態・表示期間・Cookieによる表示頻度制限のすべての条件を順番に判定します。
最優先の1件のみを表示
全条件をクリアした最初の1件だけが画面に表示されます。複数のポップアップが同時に開くことはありません。
アクセス統計の記録
ポップアップが表示されると view_count が、OKボタン・画像リンクがクリックされると click_count がDBに自動記録されます。GA4連携が有効な場合は同時にイベントも送信されます。
default_frame.twig の plugin_snippets(</body>直前)を利用して出力されます。 テーマが plugin_snippets ブロックを実装している必要があります(EC-CUBE標準テーマは対応済み)。7アクセス統計(内臓 Analytics)
管理画面の POPUP 一覧では、追加ツール不要で各ポップアップのパフォーマンスを確認できます。
| 指標 | 説明 |
|---|---|
| Views(表示回数) | ポップアップがフロント画面に表示された累積回数。ページリロードやユーザーが異なれば都度カウントされます。 |
| Clicks(クリック数) | OKボタンまたは画像リンクがクリックされた累積回数。 |
| CTR(クリック率)% | クリック数 ÷ 表示回数 × 100 で自動算出されます。ポップアップの効果測定に使用します。 |
統計データのリセット
POPUP一覧画面の各行にある リフレッシュアイコン(↺) をクリックすると、そのポップアップの Views / Clicks を 0 にリセットできます。
8FAQ & トラブルシューティング
Q1. ポップアップが表示されません。
以下の点を順番にご確認ください。
- ステータスが 「公開」 になっているか
- 表示する画面(ルート) または 特定の表示パス の設定が、訪問中のページと一致しているか
- 対象デバイス または 対象顧客 の条件から外れていないか(例:PCで確認しているのに「スマートフォンのみ」になっていないか)
- 表示期間(開始・終了日時)が正しく設定されているか
- 以前に一度閉じた場合、ブラウザのCookieに表示頻度制限や「今後表示しない」フラグが残っている可能性があります。シークレットウィンドウでテストするか、Cookieを消去してご確認ください
- EC-CUBEのキャッシュが残っている場合は
php bin/console cache:clearを実行してください
Q2. 複数のポップアップを同時に表示したいです。
同一ページアクセスで複数のポップアップが同時に開くことはありません。ユーザー体験を損なわないための設計上の仕様です。 条件に合致するポップアップのうち、最も優先順位(Sort No)が高い1件のみが表示されます。 異なる条件(対象デバイス・URLパスなど)でポップアップを使い分けることで、ページや状況ごとに最適なポップアップを配信できます。
Q3. 画像のトリミング(Cropper.js)が反映されません。
画像アップロード後にトリミングダイアログが表示されたら、切り抜き範囲を選択して「OK」ボタンを押してください。 その後、必ず編集フォームの 「登録」 ボタンをクリックして保存してください。 プレビューのみ確認した場合はトリミング内容が保存されません。
Q4. GA4にイベントが届きません。
以下をご確認ください:①サイトに GA4 トラッキングタグ(gtag.jsまたは GTM)が正しく導入されているか、 ②ポップアップ設定で「GA4 連携」が 有効 になっているか、 ③ブラウザの広告ブロッカーやGA4のデバッグモードを利用して送信状況を確認してください。
Q5. Exit Intent(離脱検知)がスマートフォンで動作しません。
Exit Intent トリガーは、カーソルを使用するPCブラウザ環境を前提とした機能のため、 タッチ操作のスマートフォン・タブレットでは動作しません。 モバイルユーザーにポップアップを表示したい場合は「ディレイ」または「スクロール」トリガーをご利用ください。