EC-CUBE 4.2 / 4.3 対応公式マニュアル

サイドバーバナー管理プロプラグイン

EC-CUBEの画面左右両端・サイドバーにバナーを自在に配信制御し、表示回数・クリック数・CTRのリアルタイム集計、GA4/GTM連携、CSVエクスポートを可能にする商用向け広告配信ソリューションです。テーマのレイアウト崩れを防ぐ「Smart Layout Neutralizer」や、外部CSSフレームワークに依存しない完全独自BEM設計を搭載しています。

1. プラグイン概要と開発背景

ECサイトにおいて、重要キャンペーン、新規会員特典、セール情報、LINE友だち登録、あるいはアフィリエイト広告などの告知は、売上やCVR（コンバージョン率）を左右する決定的な要素です。

しかし従来のEC-CUBEでは、「サイドバーにバナーを置くとメインコンテンツ幅が強制的に50%や75%に縮小されて全体のデザインが崩れる」「どのバナーが何回見られ、何回クリックされたのか効果測定ができない」「全ページにバナーを出すために数百ある全レイアウトブロックを手作業で編集しなければならない」といった多くの課題が存在していました。

💡 本プラグインで解決できる課題

レイアウト崩れを自動解消: サイドバーにブロックを置いても、テーマのメインカラム幅を自動で100%全幅に維持（レイアウト自動復元機能）。
スクロール追従と通常配置の両立: 画面をスクロールしても上部に常時固定するバナーと、ページコンテンツと一緒に流れるバナーを自由に組み合わせ可能。
リアルタイム効果測定 & CSV出力: 表示回数、クリック数、CTR（クリック率%）を完全自動集計。ワンクリックで文字化けのないExcel用CSVを出力。
高度なターゲティング配信: 「全ページ / TOPのみ / 商品一覧・詳細のみ」のページ指定に加え、「会員限定」「非会員限定」のユーザーセグメント配信に対応。
全ページ自動配信スニペット: レイアウト管理でブロックが未配置の下層ページでも、「全ページ」対象バナーをフックポイント経由で自動レンダリング。
完全テーマ非依存BEM設計: 外部CSSフレームワークやテーマ標準CSSクラスに一切依存せず、独自クラス設計によりデザイン崩れや競合を防止。

2. 主な特徴・機能一覧

画像 & HTML/スクリプト対応

JPEG/PNG/GIF/WebP（最大5MB）の画像バナーに加え、Google AdSenseやアフィリエイト広告タグ、iframeを直接配信可能。

スクロール追従・通常配置

画面スクロール時も上部に固定追従する追従型と、ページ上部に配置され自然に流れる通常配置型をバナーごとに選択可能。

高精度ターゲティング配信

全ページ / TOP限定 / 商品関連ページの配信先制御と、全訪問者 / 会員限定 / 非会員限定のセグメント配信を自由に設定。

PV・クリック・CTR自動集計

表示回数とクリック数を非同期集計しCTR%をリアルタイム算出。キャンペーン切り替え時のワンクリック統計リセットも完備。

CSVレポートダウンロード

全登録バナーの効果実績をワンクリックでCSV出力。UTF-8 BOM付きのためExcelで直接開いても絶対に文字化けしません。

Smart Layout Neutralizer

サイドバー配置時のテーマ幅圧縮（50%〜75%）を自動解消し、メインコンテンツを100%全幅に復元するスマート復元機能を搭載。

閉じるボタン & セッション記憶

訪問者が閉じるボタンを押すと、そのセッション中は再表示を防止（セッション記憶）。ページ遷移時の快適な操作性を維持。

GA4 & GTM イベント自動送信

クリック時にGA4推奨イベント select_promotion およびGTM dataLayerを自動送信。個別広告タグの埋め込みも可能。

完全テーマ非依存BEM設計

外部フレームワークやテーマ固有CSSに一切依存しない自立型クラス設計。インラインCSS不使用・既存スタイルを干渉せず安全に導入可能。

3. 動作環境・データベース互換性

項目	対応バージョン・要件	備考
EC-CUBE本体	4.2.0 〜 4.3.x	4.2系および最新の4.3系で完全動作検証済み
PHP	7.4 / 8.0 / 8.1 / 8.2 / 8.3	PHP 8系の厳格な型付け・高パフォーマンス環境に対応
データベース	MySQL 5.7+ / 8.0+ PostgreSQL 10+ 〜 16+	Doctrine ORM標準仕様に完全準拠。PostgreSQLのBOOLEAN型やタイムゾーン型に完全適合（マルチDB安心設計）
対象ブラウザ	Google Chrome, Safari, Microsoft Edge, Firefox (最新版)	PC・タブレット・モバイル各種ブラウザに対応

🐘 PostgreSQL完全互換の安全設計

本プラグインは、PostgreSQL特有の識別子大文字小文字区別やBOOLEAN型の厳格性に配慮して設計されています。また、プラグイン有効化やアップデート時に既存データを削除せずカラム追加のみを行うSafe-Mode DDLを採用しているため、運用中の本番環境でも安全に適用可能です。

4. 管理画面の操作・設定詳細

プラグインを有効化すると、EC-CUBE管理画面「コンテンツ管理＞サイドバナー管理」が追加されます。

4.1 バナー一覧・ドラッグ＆ドロップ並び替え・ワンクリック複製

登録された全バナーの配信状況、効果測定数値（PV、クリック、CTR）、ステータスを一元管理できます。

ドラッグ＆ドロップ並び替え: 行の左端にあるアイコン（⋮⋮）をマウスでつかんで上下にドラッグするだけで、直感的に表示優先順位を変更・自動保存できます。
ワンクリック複製: 「複製」ボタンをクリックすると、画像・設定値・ターゲティング条件を引き継いだ新しいバナーが即座に生成されます。類似キャンペーン作成の作業時間を大幅に短縮します。
ステータスバッジ: 「配信中 (緑)」「期間外・待機 (黄)」「終了 (赤)」「無効 (灰)」が自動判定され、視覚的に把握可能です。

4.2 新規登録・編集フォームの項目詳細

項目名	区分	説明・設定値
バナー名	必須	管理用の名称です（例: `【春のセール】全品10%OFFバナー`）。ALT属性の初期値にも適用されます。
バナータイプ	必須	画像バナー JPEG / PNG / GIF / WebP (最大5MB) HTML / スクリプトバナー AdSense、アフィリエイト、iframe、カスタムタグ
バナー画像 / HTMLコード	必須	選択したタイプに応じ、画像ファイルのアップロードまたはHTMLコードの入力を行います。
リンク先URL	任意	クリック時の遷移先URL。外部URL（`https://...`）およびサイト内相対パス（`/products/list`）に対応。
リンクの開き方	任意	「同一ウィンドウで開く」または「別タブで開く (`target="_blank" rel="noopener noreferrer"`)」を選択。
表示位置	必須	「左サイドバー」または「右サイドバー」を選択。
スクロール追従	任意	ON (有効): 画面スクロール時も上部に常時固定。 OFF (無効): ページ上部に配置され、コンテンツと一緒に流れる通常配置。
公開ステータス	必須	「有効 (公開)」または「無効 (非公開)」。
掲載開始日時・終了日時	任意	期間限定キャンペーンの掲載予約。未入力の場合は無期限配信となります。

4.3 配信ターゲティング設定（ページ & ユーザー）

適切なターゲットへ適切なタイミングでバナーを表示するための高度なセグメンテーション機能です。

ターゲティング種別	選択肢	動作と活用事例
表示対象ページ	全ページ	ショップ内の全ページで表示。下層ページやレイアウト未配置ページでも自動表示されます。
	TOPページのみ	トップページのファーストビューに合わせたメイン告知、ブランド訴求に最適です。
	商品関連ページのみ	商品一覧（`/products/list`）および商品詳細（`/products/detail/*`）限定で配信。購買意欲の高いユーザーへのクーポン訴求に効果的です。
表示対象ユーザー	すべての訪問者	会員・非会員を問わず、すべての来訪ユーザーへ表示します。
	会員限定	ログイン中の会員にのみ表示。シークレットセール、会員ランク別特典、VIPクーポンの案内に活用できます。
	非会員限定	未ログインのゲストユーザーにのみ表示。新規会員登録500ptプレゼントや初回購入特典の案内で新規獲得を加速します。

4.4 表示回数・クリック数・CTRリアルタイム測定 & リセット

バナーごとの広告効果を管理画面上でリアルタイムに把握できます。

表示回数: 画面幅769px超の端末でバナーが表示された際に自動カウント（1ページビューにつき1回集計）。閉じるボタンで非表示になっているバナーは集計から自動除外されます。
クリック数: バナーがクリックされた回数をブラウザの navigator.sendBeacon または非同期 fetch で高速記録。
CTR (クリック率): クリック数 ÷ 表示回数 × 100 (%) を小数第2位まで自動算出。バナーのクリエイティブ比較（A/Bテスト）に直結します。
統計リセット機能: キャンペーン内容の刷新時やテスト配信後、各行の「リセット」リンクをクリックするだけで、該当バナーのPV・クリック数をワンクリックでゼロ初期化できます。

4.5 効果測定データのCSVダウンロード

一覧画面右上の「CSVダウンロード」ボタンを押すことで、全バナーの配信設定および効果測定実績を一括出力できます。

📊 UTF-8 BOM対応でExcelも安心

CSVファイルには UTF-8 BOM が自動付与されているため、WindowsやMacの Microsoft Excel でダブルクリックして直接開いても文字化けが一切発生しません。マーケティング会議の資料や月次レポートの作成にそのまま活用できます。

5. フロントエンド表示・動作仕様

本プラグインは、ショップの訪問者にストレスを与えず、かつ高いクリック率と視認性を実現するためのフロントエンド技術を結集しています。

💻 画面端フローティングバナーの表示シミュレーション

5.1 スクロール追従と通常配置の動作仕様

追従設定	CSS仕様	動作仕様・配置位置	おすすめの活用シーン
スクロール追従あり	`position: fixed; top: 100px;`	画面を下にスクロールしても常にブラウザ上部から100pxの位置に固定表示。常に視界に入るため圧倒的なクリック率を誇ります。	タイムセール告知、期間限定クーポン、LINE友だち追加など
スクロール追従なし	`position: absolute; top: 160px;`	ページ上部（ヘッダー下付近）に固定配置され、スクロールすると通常コンテンツと一緒に上部へ自然に流れていきます。	静的なブランド告知、控えめなバナー、常設案内など

5.2 レイアウト自動復元

EC-CUBE標準テーマおよび多くの商用テーマでは、サイドバーブロック（#side_left や #side_right）に要素が配置されると、メインコンテンツ幅を自動的に 75%（片側配置時） や 50%（両側配置時） に圧縮する仕様になっています。

本プラグインは独自の「Smart Layout Neutralizer」を搭載しており、CSSの :has() セレクタおよび最適化されたJavaScriptにより、サイドバー列の余白・占有幅を自動中和し、メインコンテンツを瞬時に 100% 全幅 へ自動復元します。

⚠️

従来プラグインの問題点:

サイドバーにバナーを置いただけで商品一覧やTOPページのメイン部分が極端に狭くなり、レイアウトが崩れてしまう。

✨

本プラグイン:

バナーコンテナを検知し、サイドバー列の専有を解除。メインコンテンツ幅は常に100%全幅を自動維持します。

5.3 769px超の大画面・PC限定表示とレスポンシブ設計

スマートフォンや小型タブレット（画面幅 769px 以下）では、画面両端のフローティングバナーが商品画像やテキスト、購入ボタンを覆い隠してしまい、購買行動を著しく阻害する危険があります。

そのため本プラグインでは、画面幅 769px を超えるPCおよび大画面タブレットでのみバナーを表示し、画面幅 769px 以下のデバイスでは自動的に非表示化される安全設計を採用しています。インプレッション集計も画面幅 769px 超でのみ実行されます。

5.4 完全テーマ非依存BEM設計

EC-CUBEの外部プラグインで最も多いトラブルが、「テーマのCSSと競合してデザインが壊れる」「ショップ独自のカスタムテーマでスタイルが効かない」という問題です。

外部フレームワーク依存の完全排除: テーマや外部フレームワーク固有のクラスに依存せず、自立したBEMクラス（.ec-sidebarBanner__item--pc, .ec-sidebarBanner__img など）で完全制御。
インラインCSS完全排除: テンプレート内に style="" 属性を一切記述せず、外部CSSファイルに集約（セキュリティポリシーにも配慮）。
スタイルの強制上書き排除: テーマや他社プラグインのCSS優先順位を無理に上書きしないため、既存のデザインルールを破壊しません。

5.5 全ページ自動配信スニペット

EC-CUBEには数十〜数百の個別ページレイアウトが存在します。従来のバナープラグインでは、すべてのレイアウトに手作業でブロックを配置する必要があり、莫大な工数がかかっていました。

本プラグインは フックポイント自動レンダリングスニペット を内蔵しており、「表示対象ページ：全ページ」に設定されたバナーは、レイアウト管理でブロックが未配置の下層ページ（マイページ、お気に入り、カート、お問い合わせ等）でも自動的にレンダリングされて表示されます。二重表示防止ガードも完備しています。

6. GA4 / GTM / カスタムJS連携

Google Analytics 4 や Google Tag Manager、各種Web広告のコンバージョンタグとシームレスに連携できます。

1. Google Analytics 4 推奨イベントの自動送信

バナーがクリックされた際、GA4推奨のプロモーションクリックイベント（select_promotion）を自動発火します。

// GA4 自動発火コードイメージ
gtag('event', 'select_promotion', {
    items: [{
        item_id: 'banner_1',
        item_name: '春のセールバナー',
        creative_name: '春のセールバナー',
        creative_slot: 'left_sidebar'
    }],
    promotion_id: 'banner_1',
    promotion_name: '春のセールバナー'
});

2. Google Tag Manager dataLayer連携

クリック時に sidebar_banner_click イベントが dataLayer に自動プッシュされます。GTM側でカスタムイベントトリガーを作成することで、自由なタグ配信が可能です。

window.dataLayer.push({
    event: 'sidebar_banner_click',
    banner_id: '1',
    banner_name: '春のセールバナー',
    banner_position: 'left',
    banner_url: 'https://example.com/campaign'
});

3. 個別カスタム計測コード

各バナーの登録画面にある「トラッキングコード (任意)」欄に JavaScript を入力すると、バナーの onclick 属性として直接埋め込まれます。Meta Pixel、LINE Tag、Yahoo!広告などのクリックコンバージョン測定にご活用いただけます。

7. よくある質問

Q. レイアウト管理でブロックを配置していないページでもバナーは表示されますか？ ▼

A. はい。バナーの登録時に「表示対象ページ」で「全ページ」を選択していれば、自動レンダリングスニペット機構により、ブロックが未配置のページでも自動的にバナーが表示されます。特定のページにのみ出したい場合は、ターゲティング設定で「TOPページのみ」や「商品関連ページのみ」を選択してください。

Q. テーマのメインコンテンツ幅が縮小してレイアウトが崩れませんか？ ▼

A. 心配ありません。本プラグインが標準搭載されており、サイドバー列の余白や専有幅を自動中和して、メインコンテンツ幅を自動的に 100% 全幅に維持します。

Q. スマートフォンでバナーが画面を塞いで邪魔になりませんか？ ▼

A. 邪魔になりません。画面幅 769px 以下のデバイス（スマートフォン・小型タブレット）ではバナーが自動的に完全非表示となるよう制御されています。ユーザーのお買い物体験やスマホ表示を一切妨げません。

Q. 訪問者がバナーの閉じるボタン（✕）を押した場合、どうなりますか？ ▼

A. 訪問者が✕ボタンを押したバナーは、sessionStorage に記録され、そのブラウザセッション中（ブラウザを閉じるまで）は別ページへ遷移したりリロードしても再表示されません。また、非表示となったバナーは表示回数の集計対象からも自動除外されます。

Q. Google AdSense やアフィリエイト広告タグを埋め込むことはできますか？ ▼

A. はい、可能です。バナータイプで「HTML / スクリプト」を選択し、AdSenseや各種アフィリエイトサービス（A8.net、ValueCommerce等）から発行された広告タグを貼り付けるだけで配信できます。iframeタグにも対応しています。

Q. PostgreSQL 環境でも正常に動作しますか？ ▼

A. はい、完全に動作します。MySQL（5.7/8.0）だけでなく PostgreSQL（10〜16）環境でも厳格な動作検証を行っており、大文字小文字の識別子問題やBOOLEAN型/TIMESTAMP型の互換性も万全です。

Q. 独自デザインのカスタムテーマでも動作しますか？ ▼

A. はい。本プラグインのフロントエンド表示は、特定のCSSフレームワークに一切依存せず、独立した専用BEMクラス（.ec-sidebarBanner*）のみで完結しています。インラインスタイルや強制上書きを行わないクリーンな設計のため、独自テーマでも安心・安全にご利用いただけます。