EC-CUBE 4 には、ポップアップバナーを出す機能が標準では入っていません。テンプレートに HTML と JavaScript を直接書き足す方法もありますが、バナーを差し替えるたびにファイルを触ることになり、運用担当の方だけでは回りません。管理画面から作って出せるようにするなら、プラグインを使うのが手軽です。

この記事では、当社が開発してオーナーズストアで販売している「ポップアップバナー表示・作成プラグイン」（商品ページでの名称は grip Popup Banner）を例に、導入から表示までの手順を説明します。

ワプラボを運営する ibis studio 株式会社が開発・販売しているプラグインです。自社製品の使い方の解説であることを先にお断りしておきます。ほかのプラグインとの違いは、別の記事で比較しています。

できること

• テンプレートを選ぶか、白紙から、管理画面の中でバナーを作る
• 手持ちのバナー画像をアップロードして、そのまま出す
• 見せ方を、モーダル（画面中央）・フローティング（画面の隅など）・帯（画面の上か下に固定）から選ぶ
• 表示するページ、期間、きっかけ（すぐ・スクロール・滞在時間・離脱しそうなとき）、PC／スマホを指定する
• 画像アップロード型では、A・B・C の3パターンをランダムに出し分ける

バナーの作成と表示は、プラグインだけで完結します。外部サービスへの登録は要りません。表示回数やクリック数を数字で見たい場合だけ、後述する grip space と連携します。

動作環境

オーナーズストアの対応バージョンは 4.2系（4.2.0〜4.2.3-p2）と 4.3系（4.3.0〜4.3.1-p1）で、PHP 8.1以上が必要です。お使いの EC-CUBE のバージョンは、管理画面のホームなどで確認できます。購入の前に、オーナーズストアの商品ページにある対応バージョンの欄もあわせて確認してください。

EC-CUBE 2系・3系では使えません。また、本番環境に入れる前に、テスト環境で表示を確かめておくと安心です。

導入の手順

オーナーズストアで購入したプラグインは、EC-CUBE の管理画面からインストールできます。手順は EC-CUBE 4 共通です。

1. オーナーズストアでプラグインを購入する
2. 管理画面の「オーナーズストア」→「認証キー設定」で、ストアの認証キーを設定する（設定済みなら不要）
3. 「オーナーズストア」→「プラグイン」→「プラグインを探す」を開き、「購入済プラグイン」からインストールする
4. 「オーナーズストア」→「プラグイン」→「プラグイン一覧」で、このプラグインを「有効化」する

有効化すると、管理画面の左メニューに「バナー」が増えます。中身は「バナー」「連携済みバナー」「新規追加」「設定」の4つです。

プラグインのファイル（zip などの圧縮ファイル）が手元にある場合は、「プラグイン一覧」の「アップロードして新規追加」からも入れられます。認証キーの設定やインストールでつまずいた場合は、EC-CUBE 公式の開発者向けドキュメントにある「プラグインのインストール」も参考になります。

バナーを作る

「バナー」→「新規追加」を開くと、テンプレートを選ぶ画面になります。作り方は2通りあります。

1. 手持ちの画像をアップロードする

「お手持ちのバナー画像をアップロード」の「シングルイメージ」を選びます。PC用とスマホ用の画像を登録できます。スマホ用は任意で、登録しなければ PC 用の画像がそのまま使われます。

「リンク先URL（クリック時の遷移先）」を入れておくと、バナー全体がリンクになります。空欄にすると、クリックしても移動しないバナーになります。

この方式では、画像を A・B・C の3つまで登録できます。B や C にも画像を入れると、表示のたびにランダムでどれか1つが出ます。デザイン違いを試したいときに使えます。

2. テンプレートから作る

「テンプレートから管理画面でバナー作成」には、キャンペーン告知、カウントダウン付き、メニュー表示、帯タイプなどのテンプレートが並んでいます。「白紙から作成」で、何もない状態から作ることもできます。

編集画面では、テキスト、画像、図形などのパーツを置き、文字や色を変えていきます。主な操作は次のとおりです。

• テキストの追加と、フォント・色・行間の変更
• 画像のアップロードと、画像ライブラリからの選択、切り抜き（クロップ）
• パーツごとのリンク設定（ボタンだけをリンクにする、など）
• 整列、前面・背面の入れ替え、複製、元に戻す／やり直し
• 塗りの単色・グラデーション
• カウントダウン（指定した日時までの残り時間を表示。表示中は実際の時間に合わせて減っていきます）

画面上部には「公開」の切り替え、「保存」、「PNGダウンロード」、「プレビュー」があります。「プレビュー」は保存したうえで、実際のサイトを新しいタブで開き、そのバナーだけを表示します。下書きのまま、公開前の見え方を確認できます。

フォーム付きのテンプレート（メールアドレスの登録欄があるもの）は、grip space と連携し、上位プランを契約している場合だけ使えます。プラグイン単体では選べません。

見せ方を決める（デザイン設定）

編集画面の左側は「1 デザイン設定」「2 ルール設定」の2つのタブに分かれています。デザイン設定では、バナーの出し方を決めます。

帯タイプのテンプレートを選んだ場合は、「設置位置（帯）」で上（ヘッダー）か下（フッター）を選びます。上に置く場合はさらに、ヘッダーに重ねて固定する「フローティング」と、ページ全体を帯の高さ分だけ下げる「ブロック追加」を選べます。固定ヘッダーのあるテーマで帯がヘッダーを隠してしまうときは、「ブロック追加」を試してください。

いつ・どこに出すかを決める（ルール設定）

表示するページURL（必須）

ここが一番つまずきやすいところです。表示するページURLを1つも入れていないバナーは、公開にしても表示されません。出したいページを明示的に指定する作りになっています。

• URL は https:// から始まる完全な形でも、/products/list のようなパスだけでも指定できます
• 「前方一致を含む」にチェックを入れると、そのURLで始まるページすべてが対象になります
• チェックなしの場合は、そのURLと一致するページだけです（末尾のスラッシュの有無は区別しません）
• URL の枠を増やすと、どれか1つに当てはまれば表示されます（OR 条件）

サイト全体に出したいときは、トップページのURLを入れて「前方一致を含む」にチェックを入れます。

表示期間

「表示期間を設定する」にチェックを入れると、開始日時と終了日時の間だけ表示されます。セールの終了後に消し忘れる心配がなくなります。

トリガー（表示するきっかけ）

• 最初から表示 … ページを開いた時点で表示
• ページの○％までスクロールしたら表示
• ページの滞在時間が○秒を超えたら表示
• ユーザ離脱時にモーダルで表示 … マウスがブラウザの上端から外に出たときに表示

離脱時の表示は、マウスの動きで判定しています。マウスを使わないスマートフォンでは基本的に表示されないので、スマホ向けにはスクロールか滞在時間のトリガーを使ってください。

ルール設定には業界・都道府県・組織（会社）による出し分けの項目もありますが、これは grip space との連携（上位プラン）が前提で、プラグイン単体では使えません。

公開とサイトでの表示

バナーは、編集画面の「公開」スイッチか、「バナー」一覧の「公開する」「非公開にする」で切り替えます。一覧では、状態が「公開」「下書き」で表示されます。

公開したバナーは、ショップのページの末尾に自動で差し込まれます。レイアウト管理でブロックを配置したり、テンプレートを書き換えたりする必要はありません。管理画面には表示されません。

閉じるボタンか暗幕をクリックして閉じたバナーは、同じブラウザのタブを開いている間（セッション中）は再表示されません。確認のために何度も表示させたいときは、ブラウザのシークレットウィンドウを使うと楽です。

表示されないときの確認順

1. 状態が「公開」になっているか
2. 表示するページURLが入っているか、前方一致のチェックが意図どおりか
3. 表示期間を設定している場合、今日が期間内か
4. 表示するデバイスの設定と、見ている端末が合っているか（幅767px以下がモバイル扱い）
5. 一度閉じていないか（シークレットウィンドウで確認する）
6. トリガーがスクロールや滞在時間になっていないか

grip space と連携すると増えること（任意）

バナーを出すだけなら連携は不要です。どのバナーがどれだけ見られ、押されたかを数字で見たい場合に、当社のマーケティングツール grip space と連携します。

「バナー」→「設定」で、すでに grip space をお使いなら連携キーで接続し、お使いでなければフリープランに登録して接続します。接続すると、バナー一覧に「grip連携する」ボタンが出ます（ご契約のプランで連携できる場合）。連携したバナーは「連携済みバナー」に移り、次の数字が見られるようになります。

• 表示回数・クリック数・クリック率・CV数
• レポート画面での集計期間の指定（直近7日・直近30日・今月など）と日別の推移
• 上位プランでは、クリックした会社・担当者の一覧、業界・都道府県による出し分け、フォーム付きバナー

連携できるかどうか、いくつまで連携できるかは、grip space のプランによって異なります。連携していないバナーは数に関係なく作って表示できます。

連携したバナーは、grip space の計測タグ経由で配信・計測されます。設定に応じてアクセスの計測データやフォームの送信内容が grip space のサーバーに送られるので、プライバシーポリシーへの記載もあわせて見直してください。

向いていない使い方

• 会員かどうか、カートに商品があるかで出し分けたい … この条件は持っていません
• 一度閉じた人に、数日間は出さない、といった間隔の指定 … 閉じた後に出さないのは同じセッションの間だけです
• EC-CUBE 4.2 より前のバージョンで使いたい

こうした条件が必要な場合は、ほかのプラグインのほうが合うことがあります。比較の記事で、それぞれの得意な点をまとめています。