ECCUBEでの購入イベントの計測は、Google Analytics 4（GA4）とGoogle Tag Manager（GTM）を正しく設定することで可能です。しかし、サンクスページに追加したスクリプトが安定して動作しない場合、計測漏れやデータの不整合が発生することがあります。この記事では、具体的な原因と修正方法を解説します。
GA4とGTMの基本設定を再確認
まず、GA4のタグがGTMに正しく設定されているか確認します。トリガーは購入完了ページに限定し、ページビューではなくカスタムイベントで送信することが望ましいです。
また、GTM上で変数やデータレイヤーの設定が正しくマッピングされているか確認しましょう。特に、{{ Order.orderNo }}や{{ Order.payment_total }}などの変数が正しく出力されているかが重要です。
サンクスページでのスクリプト実装の注意点
サンクスページに直接スクリプトを埋め込む場合、window.addEventListener(‘load’)でデータレイヤーにpushしていますが、ECCUBEのキャッシュやAjaxロードによりスクリプトの実行タイミングが遅れることがあります。
その場合、DOMContentLoadedやGTMのカスタムHTMLタグを使用し、トリガーを購入完了ページに設定することで、計測の安定性が向上します。
データレイヤーの構造確認と修正例
items配列内の各商品情報が正しく出力されないと、ecommerceイベントが正しく認識されません。特に、item_nameやprice、quantityの値にnullや未定義が混じると計測漏れの原因となります。
以下は修正版の例です。必要に応じてデフォルト値や文字列のエスケープを追加しています。
window.dataLayer = window.dataLayer || [];
document.addEventListener('DOMContentLoaded', function() {
dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: '{{ Order.orderNo|default("unknown") }}',
value: {{ Order.payment_total|default(0) }},
currency: 'JPY',
tax: {{ Order.tax|default(0) }},
shipping: {{ Order.delivery_fee_total|default(0) }},
items: [
{% for OrderItem in Order.MergedProductOrderItems %}
{
item_id: '{{ OrderItem.product_code|default("unknown") }}',
item_name: '{{ OrderItem.product_name|e("js")|default("unknown") }}',
price: {{ OrderItem.price_inc_tax|default(0) }},
quantity: {{ OrderItem.quantity|default(1) }},
item_category: '未分類'
}{% if not loop.last %},{% endif %}
{% endfor %}
]
}
});
});テストとデバッグ方法
修正後は、GA4のデバッグモードやGTMのプレビュー機能を利用して、正しくイベントが送信されているか確認します。特に、購入完了ページにアクセスして、dataLayerに正しい値がpushされているかをチェックします。
また、ブラウザのコンソールでエラーが出ていないか確認することも重要です。エラーがある場合は、変数名や構文を再確認してください。
まとめ
ECCUBEでGA4の購入イベントを安定して計測するには、データレイヤーの正確な構造とGTMの適切なトリガー設定が鍵となります。直接スクリプトを埋め込む場合は、DOMContentLoadedイベントを利用することで安定性が向上します。また、テストとデバッグを必ず行い、未定義の変数や構文エラーがないことを確認することが成功のポイントです。
コメント