EC-CUBE 4.2 / 4.3 対応

POPUP管理プラグイン オンラインマニュアル

PopupManage Plugin — 設定・ターゲティング・GA4連携・分析の完全操作ガイド

プラグインコード: PopupManage
バージョン: v1.0.6
提供元: CubeLab

1プラグイン概要

POPUP管理プラグイン(PopupManage)は、EC-CUBE 4.2 / 4.3のフロント画面(ショップ画面)上に、 お知らせ・クーポン・キャンペーンバナー・会員限定案内・年齢確認などのポップアップ(モーダル)を自由に作成・配信できる 高機能マーケティングプラグインです。

複数のポップアップを優先順位(Sort No)で管理し、アクセスユーザーの条件(デバイス・会員状態・URLパス・カート状態・表示期間など)に 応じて、最も優先度の高い1つを自動的に選択して表示します。

主な特長

ドラッグ&ドロップ並び替え
一覧画面で各行をドラッグするだけで優先順位(Sort No)をリアルタイムに変更できます。
柔軟なデザイン・サイズ対応
テキストのみ/画像のみ/画像+テキストの3デザイン、4つのモーダルサイズ(小/中/大/全幅)に対応。
WYSIWYGエディタ&画像トリミング
TinyMCEリッチテキストエディタ(HTMLソース編集対応)と、Cropper.jsによるアップロード時即時トリミング機能を搭載。
リアルタイムライブプレビュー
保存前に管理画面内でフロント表示のシミュレーションが行えます。デザイン調整に便利です。
精密なターゲティング
表示画面・デバイス・会員状態・URLパス(ワイルドカード対応)・カート状態・表示期間まで詳細条件を設定できます。
内臓アクセス統計 & GA4連携
管理画面で表示数・クリック数・CTRを自動集計。GA4カスタムイベント(popup_view / popup_click)も自動送信対応。
「今後表示しない」機能
チェックボックスを表示し、ユーザーが選択した場合に指定日数(例:7日間)再表示を抑制できます。
テーマ独立設計
専用プレフィックス付き独自CSSクラスを採用しており、使用中のテーマのスタイルに影響されません。

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:clear
正常に完了すると管理画面メニューの コンテンツ管理 配下に 「POPUP 管理」 サブメニューが追加されます。

2-2. 管理画面からのインストール

管理画面ログイン

EC-CUBE管理画面(/admin)にログインします。

プラグイン一覧を開く

オーナーズストア > プラグイン > プラグイン一覧 を開きます。

インストール & 有効化

「POPUP管理プラグイン」を選択し、インストールおよび有効化を実行します。

システム要件: EC-CUBE 4.2.x / 4.3.x、PHP 8.1以上。 インストール後、データベーステーブル plg_popup_manage_item が自動生成されます。

3管理画面:POPUP 一覧

管理画面メニューの コンテンツ管理 > POPUP 管理 > POPUP 一覧 から、登録済みポップアップの確認と管理が行えます。

🖥 管理画面 ›› コンテンツ管理 ›› POPUP 管理 ›› POPUP 一覧
並び替え
各行の左側アイコンをドラッグ&ドロップ → Sort Noが即時更新
ステータス切り替え
「公開」「非公開」バッジをクリック → 即時切り替え
効果測定
表示数 (Views) / クリック数 (Clicks) / CTR% をリアルタイム表示
統計リセット
リフレッシュアイコンをクリック → Views/Clicksを0クリア
優先順位は「Sort No が大きいほど優先度が高い」仕様です。 一覧画面で上部に表示されているポップアップが最優先で条件評価されます。

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
GA4 のカスタムイベントは、GA4 管理画面の レポート > エンゲージメント > イベント から確認できます。 イベント名は任意に設定できるため、複数のポップアップで異なるイベント名を設定すると、効果を個別に分析できます。

5ライブプレビュー機能

編集画面の下部にある 「プレビューを見る」 ボタンをクリックすると、 現在の設定内容で実際のポップアップがどのように表示されるかを保存前にシミュレーションできます。

プレビューで確認できる内容

  • タイトル・本文のレイアウト: フォント・改行・HTML装飾の最終的な見栄え
  • 画像のトリミング状態・アスペクト比: Cropper.jsで切り抜いた画像がどのようにモーダルに収まるか
  • OKボタンの文言: ボタンのテキストと表示位置
  • 「今後表示しない」チェックボックス: ラベル文言と表示位置の確認
  • モーダルサイズ感: 小/中/大/全幅の実際のサイズ感
デザインタイプを変更したり、本文HTMLを編集した後は、すぐに「プレビューを見る」で確認することをお勧めします。 不要なデバッグを防ぎ、開発効率が向上します。

6フロント画面での表示ロジック(仕様)

ポップアップ候補のリストアップ

ユーザーがショップ画面にアクセスした際、ステータスが「公開」のポップアップを優先順位(Sort No)が高い順にリストアップします。

表示条件の評価

各ポップアップについて、表示画面(ルート)・特定パス・除外パス・デバイス・会員状態・カート状態・表示期間・Cookieによる表示頻度制限のすべての条件を順番に判定します。

最優先の1件のみを表示

全条件をクリアした最初の1件だけが画面に表示されます。複数のポップアップが同時に開くことはありません。

アクセス統計の記録

ポップアップが表示されると view_count が、OKボタン・画像リンクがクリックされると click_count がDBに自動記録されます。GA4連携が有効な場合は同時にイベントも送信されます。

フロント出力方式: ポップアップのHTMLは default_frame.twig の plugin_snippets(</body>直前)を利用して出力されます。 テーマが plugin_snippets ブロックを実装している必要があります(EC-CUBE標準テーマは対応済み)。

7アクセス統計(内臓 Analytics)

管理画面の POPUP 一覧では、追加ツール不要で各ポップアップのパフォーマンスを確認できます。

指標説明
Views(表示回数)ポップアップがフロント画面に表示された累積回数。ページリロードやユーザーが異なれば都度カウントされます。
Clicks(クリック数)OKボタンまたは画像リンクがクリックされた累積回数。
CTR(クリック率)%クリック数 ÷ 表示回数 × 100 で自動算出されます。ポップアップの効果測定に使用します。

統計データのリセット

POPUP一覧画面の各行にある リフレッシュアイコン(↺) をクリックすると、そのポップアップの Views / Clicks を 0 にリセットできます。

リセットは元に戻せません。キャンペーン開始時などに前回のデータをクリアしてから計測を始める際にご利用ください。

8FAQ & トラブルシューティング

Q1. ポップアップが表示されません。

以下の点を順番にご確認ください。

  1. ステータスが 「公開」 になっているか
  2. 表示する画面(ルート) または 特定の表示パス の設定が、訪問中のページと一致しているか
  3. 対象デバイス または 対象顧客 の条件から外れていないか(例:PCで確認しているのに「スマートフォンのみ」になっていないか)
  4. 表示期間(開始・終了日時)が正しく設定されているか
  5. 以前に一度閉じた場合、ブラウザのCookieに表示頻度制限や「今後表示しない」フラグが残っている可能性があります。シークレットウィンドウでテストするか、Cookieを消去してご確認ください
  6. 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ブラウザ環境を前提とした機能のため、 タッチ操作のスマートフォン・タブレットでは動作しません。 モバイルユーザーにポップアップを表示したい場合は「ディレイ」または「スクロール」トリガーをご利用ください。