EC-CUBEは、CVR改善ツールをいちばん制約なく使えるカートです。
カートASPでは、レスポンスヘッダーを店舗側で変更できないことがほとんどです。そのためABテストやLPOのビジュアルエディタが使えず、ヒートマップの計測だけで止まるケースがあります。
EC-CUBEは自社サーバーで動かすため、この制約がありません。計測・編集・出し分けのすべてを自分の判断で有効化できるのは、主要なカートの中でEC-CUBEとその周辺の自社構築だけです。
その一方で、自由度が高いぶん「どこを直すべきか決められない」という別の停滞が起きやすくなります。本記事では、EC-CUBEにCVR改善ツールを入れる手順と、判断材料をどう集めるかを解説します。
記事のポイント
- JavaScript管理の場所と、全ページへの反映
- 4.2.0以降は機能を無効化できるという仕様と、その場合の対処
- 反映されないときのキャッシュ管理
- レスポンスヘッダーを自分で変えられることの意味
- カスタマイズが進んだサイトで見るべき3箇所
目次
- EC-CUBEでCVR改善ツールを併用する理由
- タグの設置場所
- 機能が無効化されている場合
- 反映されないときはキャッシュを削除する
- ヘッダーを自分で変えられるのはEC-CUBEの強み
- 分析できる範囲・できない範囲
- EC-CUBEのサイトで見るべき3箇所
- テンプレートを直す前にABテストで確かめる
- DejamでEC-CUBEのサイトの改善を進める
- よくある質問
- まとめ
EC-CUBEでCVR改善ツールを併用する理由
EC-CUBEの管理画面では、売上・受注・会員の数字を確認できます。ただしこれらは結果であって、ページの中で何が起きたかは含まれません。
| 管理画面でわかること | わからないこと |
|---|---|
| どの商品が何件売れたか | 商品詳細ページのどこで読むのをやめたか |
| 受注件数と金額 | カートに入れる前に何を見比べていたか |
| 会員登録数 | カスタマイズした箇所が使われているかどうか |
EC-CUBEは改修を重ねるほど独自の作りになります。入れた機能が実際に使われているかどうかは、管理画面の数字には出ません。 ヒートマップはこの空白を埋めるために使います。
タグの設置場所
EC-CUBE 4系では、管理画面から独自のJavaScriptを登録できます。
コンテンツ管理 > JavaScript管理にコードを入力して登録します（EC-CUBE4 管理・運用マニュアル）。同じ階層にCSS管理もあります。
計測タグをここに貼れば、テンプレートファイルを触らずに導入できます。改修履歴を汚さずに済むため、外部ベンダーが保守しているサイトでも進めやすい方法です。
より細かく制御したい場合は、app/template/ 配下のTwigテンプレートを直接編集する方法もあります。ヘッダー部分のテンプレートに記述すれば <head> 内に出力できます。
計測タグを
<head>内に出したい場合はテンプレート編集が確実です。JavaScript管理に入れた場合の出力位置はテンプレートの構成に依存するため、設置後に公開ページのソースで位置を確認してください。
機能が無効化されている場合
EC-CUBE 4.2.0 からは、JavaScript管理やファイルアップロード機能を無効化できるようになりました。 悪意のあるユーザーがこれらの機能を悪用してサイトを改ざん・攻撃することを防ぐための変更です。
| 状態 | 画面の見え方 |
|---|---|
| 有効 | 機能ページの上部にメッセージが表示される |
| 無効 | 機能にアクセスすると制限されている旨のページが表示される |
セキュリティ方針として無効化されている場合、JavaScript管理からは計測タグを入れられません。 その場合はTwigテンプレートの直接編集で対応します。
導入を検討する段階で、自社の環境がどちらの設定になっているかを先に確認しておくと、後戻りを避けられます。
反映されないときはキャッシュを削除する
EC-CUBEはキャッシュを持つため、登録したのに公開ページに出ないことがあります。
コンテンツ管理 > キャッシュ管理からキャッシュを削除してください。「保存できたこと＝反映されていること」ではない点は、他のカートと同じです。
確認方法: キャッシュ削除後に商品詳細ページを開き、開発者ツール（F12）の Network タブで計測タグが読み込まれているか、Console タブにエラーが出ていないかを見ます。EC-CUBEはプラグインを複数入れている環境が多く、他のJavaScriptとの競合でエラーになることがあるため、この確認は省略しないでください。
ヘッダーを自分で変えられるのはEC-CUBEの強み
CVR改善ツールは、①タグによる計測と、②サイトをiframeで読み込むビジュアルエディタの2つでできています。止まる原因が別です。
| ヘッダー | 影響する機能 |
|---|---|
X-Frame-Options | ABテスト・LPOのビジュアルエディタ |
Content-Security-Policy | 計測タグの読み込みと送信 |
まず現状を確認します。
curl -sI https://（自社ドメイン） | grep -i "x-frame-options\|content-security-policy"カートASPと違い、EC-CUBEでは出力されている値を自分で変更できます。 Webサーバーの設定か、アプリケーション側のレスポンス設定で調整します。
X-Frame-Options: DENY が出ている場合、まるごと外すのではなく、Content-Security-Policy の frame-ancestors で許可先を限定するほうが安全です。クリックジャッキング対策を維持したまま、編集に使うツールだけを通せます。設定の考え方と依頼文面はCVR改善ツールが動かない原因はヘッダー｜X-Frame-OptionsとCSPの確認方法にまとめています。
この1行を調整できるかどうかで、使える機能の範囲が変わります。 EC-CUBEでは、ABテストのビジュアルエディタまで最初から使える状態に持っていけます。
分析できる範囲・できない範囲
| 画面 | 計測 |
|---|---|
| トップ・商品一覧・商品詳細・検索 | ⭕️ |
| カート・お届け先入力・ご注文内容確認 | ⭕️ 自社テンプレートなので設置できる |
| 会員登録・お問い合わせ | ⭕️ |
| 決済代行会社の画面 | ❌ 他社ドメインのため対象外 |
EC-CUBEでは購入フローのほぼ全体を計測できます。 技術的にはどのテンプレートにもタグを置けるためです。
ただしクレジットカード情報を入力する画面の扱いには注意してください。 決済代行会社の画面に遷移する構成であれば他社ドメインなので対象外です。自社ドメイン内で入力を受ける構成の場合、計測ツールが個人情報やカード情報を取得しない設定になっているかを確認したうえで判断してください。迷う場合は購入フローの手前までを対象にすれば十分です。
EC-CUBEのサイトで見るべき3箇所
1. カスタマイズで追加した機能が使われているか
EC-CUBEのサイトは、要望に応じて機能を足していった結果、使われていない機能が残り続けることがよくあります。絞り込み・比較・お気に入り・レビュー投稿などが対象です。
クリックヒートマップで実際にクリックされているかを見ます。使われていなければ、導線が見えていないか、そもそも不要です。足すより減らすほうが効く場面はここで見つかります。
2. 商品詳細ページの縦の長さ
改修を重ねると、商品説明・規格選択・関連商品・レビューが積み上がり、カートボタンが折り返しの下に沈みます。 熟読ヒートマップでボタン位置まで読まれているかを見ます。読まれていなければ、ボタンの位置か、その手前の情報量のどちらかが原因です。
3. カートからお届け先入力への遷移
EC-CUBEでは購入フローを計測できるため、どのステップで抜けているかを直接見られます。会員登録を求める位置、送料が確定するタイミング、入力項目の数のどれが効いているかを、離脱ヒートマップで位置として特定します。
テンプレートを直す前にABテストで確かめる
上の3箇所は「仮説」です。ヒートマップでわかるのは何が起きているかであって、直したら良くなるかではありません。
EC-CUBEでは、テンプレートの変更に検証環境での確認とリリース作業が伴います。改修コストが高いぶん、外したときの損失も大きくなります。 ABテストであれば、リリースを伴わずに変更案を一定割合へ配信して比較できます。効果が出た案だけをテンプレートに反映すれば、改修の回数そのものを減らせます。
「自由に直せるが、どこを直すべきか決められない」という状態を抜けるために必要なのは、直す手段ではなく決める材料です。
DejamでEC-CUBEのサイトの改善を進める
Dejamはタグを1本入れるだけで使い始められます。ヘッダーを自分で調整できるEC-CUBEでは、計測から編集まで一度に使える状態にできます。
ヒートマップ
クリック・クリックイベント・熟読・滞在・離脱の5種類を計測します。離脱は5%刻みの20バンドで見られるため、「商品詳細ページのどのあたりで抜けているか」を具体的な位置として特定できます。データ保存期間に制限はありません。
ABテスト
デザイン変更テスト・リダイレクトテスト・ポップアップテストの3種類に対応しています。テンプレートを改修せずに効果を比較できるため、リリース作業を挟まずに検証を回せます。
LPO
流入元ごとにページの内容を出し分けます。同じ商品詳細ページでも、広告からの流入と検索からの流入では見たい情報が違うため、訴求を分けることで無駄打ちが減ります。
よくある質問
Q. JavaScript管理の画面に「機能が制限されている」と表示されます。
A. 4.2.0以降で導入された、改ざん対策としての無効化設定が有効になっています。セキュリティ方針としてこの設定を維持する場合は、Twigテンプレートの直接編集でタグを設置してください。
Q. 登録したのに公開ページにタグが出ません。
A. コンテンツ管理 > キャッシュ管理からキャッシュを削除してください。それでも出ない場合は、他のプラグインのJavaScriptと競合していないかをConsoleタブで確認します。
Q. 2系を使っていますが、同じ手順ですか？
A. ディレクトリ構成と管理画面が異なります。2系ではテンプレート編集からの設置になります。バージョンによって手順が変わるため、自社のバージョンに対応した公式ドキュメントで確認してください。
Q. 自分でテンプレートを直せるのに、ABテストは必要ですか？
A. 直せることと、直した効果を判定できることは別です。改修コストが高い環境ほど、外した施策の損失が大きくなります。ABテストは「変更する手段」ではなく「変更を決める材料」を得るためのものです。
まとめ
- タグはコンテンツ管理 > JavaScript管理から。
<head>に出したい場合はTwigテンプレート編集 - 4.2.0以降はこの機能を無効化できる。制限表示が出たらテンプレート編集で対応
- 反映されないときはコンテンツ管理 > キャッシュ管理
- レスポンスヘッダーを自分で変更できるため、ビジュアルエディタまで使える
- ヘッダーはまるごと外さず、
frame-ancestorsで許可先を限定する - 購入フローのほぼ全体を計測できるが、決済画面の扱いは方針を決めてから
- 見るべきは使われていない機能・商品詳細ページの縦の長さ・購入フローの離脱位置
ECサイト全体のCVR改善の考え方はECサイトのCVR改善ガイドにまとめています。
CVR改善ならDejam！改修せずに検証を回す
Dejamは、LP制作・ヒートマップ分析・ABテスト・AI自動解析をオールインワンで提供するCVR改善特化ツールです。「自由に直せるが、どこを直すべきか決められない」という段階から、本格的なPDCAを回して成果を最大化するまでを総合支援します。
Dejamが選ばれる理由
- 国内唯一のワンプロダクト: LP制作・ヒートマップ分析・ABテストをすべて単一ツールで完結
- 月額3万円〜利用可能: オプティマイズプラン月額3万円〜 / CMSプラン月額5万円〜 / オールインワン月額12万円〜
- ユーザー課金なし: 何名で使っても追加費用は発生しない
- ISMS認証取得: ISO/IEC 27001:2022 & JIS Q 27001:2023認証取得済み
- 毎週アップデート: 市場トレンドとユーザーリクエストに応じて機能を毎週拡充
Dejamの主要機能
- LP/記事LP制作: ノーコード・コードの切り替えに対応。AIで生成したコードを直接取り込み可能
- ヒートマップ: 5種類（クリック/クリックイベント/熟読/滞在/離脱）。データ保存期間無制限
- ABテスト: デザイン変更テスト・リダイレクトテスト・ポップアップテストの3種類
- 自動解析: どのコンテンツがCVRに貢献しているかAIが自動解析
- 独自ドメイン300件まで無料: LP専用ドメインを大量運用しても追加費用なし
テンプレートを改修せずに検証できるため、リリース作業を挟まずに改善を進められます。
