EC-CUBE4でGA4とUAの簡易的なeコマースタグ設定方法
EC-CUBE Advent Calendar 2021 4日目の記事です。
EC-CUBEでサイトを公開した後に、eコマースタグを設定したいという要望があります。 その方法を簡単に書いてきます。
GA4はまだ利用されていない方も多いと思いますので、 今回はGA4とUA両方対応できるようにタグを記述していますが、 どちらかしか利用していない場合、不要なコードは削除してください。
前提条件として、タグマネージャー を利用していることとします。 eコマースの詳細な解説は以下の公式サイトもご確認ください。
タグマネージャーの設置方法
タグマネージャー用ブロック作成
ブロック管理より、以下のブロックを作成しておきます。
- ヘッダー用タグ作成
ブロック名 : Google Tag Manager head
ファイル名 : googletagmanagerhead
コード :
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXXX');</script> <!-- End Google Tag Manager -->
- bodyタグ直下用タグ作成
ブロック名 : Google Tag Manager body
ファイル名 : googletagmanagerbody
コード :
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) -->
XXXXXXXXの箇所はそれぞれのIDに置き換えてください。
レイアウト管理に設定
作成したそれぞれのブロックをトップページ用レイアウトと下層ページ用レイアウトに配置します。
配置場所はそれぞれ、以下の場所へ配置します。
トップページ用レイアウト
下層ページ用レイアウト
eコマースタグ用ブロックの作成
再度ブロック管理より以下のブロックを作成してください。
- eコマースタグ用ブロック作成
ブロック名 : Google Ecommerce Tag
ファイル名 : ecommerce
コード :
{% if app.request.get('_route') == 'product_list' %} {# 商品一覧 #} <script> dataLayer.push({ecommerce: null}); // GA4 dataLayer.push({ 'event': 'view_item_list', 'ecommerce': { 'items': [ {% for Product in pagination %} { 'item_name': '{{ Product.name }}', 'item_id': '{{ Product.getCodeMin ? Product.getCodeMin : Product.id }}', 'price': '{{ Product.getPrice02IncTaxMin }}', 'item_category': '{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', }{% if not loop.last %},{% endif %} {% endfor %} ] } }); // UA dataLayer.push({ 'ecommerce': { 'currencyCode': 'JPY', 'impressions': [ {% for Product in pagination %} { 'name': '{{ Product.name }}', 'id': '{{ Product.getCodeMin ? Product.getCodeMin : Product.id }}', 'price': '{{ Product.getPrice02IncTaxMin }}', 'category': '{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', }{% if not loop.last %},{% endif %} {% endfor %} ] } }); </script> {% elseif app.request.get('_route') == 'product_detail' %} {# 商品詳細 #} <script> // Measure a view of product details. This example assumes the detail view occurs on pageload, dataLayer.push({ecommerce: null}); // Clear the previous ecommerce object. // GA4 dataLayer.push({ 'event': 'view_item', 'ecommerce': { 'items': [{ 'item_name': '{{ Product.name }}', 'item_id': '{{ Product.getCodeMin ? Product.getCodeMin : Product.id }}', 'price': '{{ Product.getPrice02IncTaxMin }}', 'item_category': '{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', 'quantity': '1' }] } }); // UA dataLayer.push({ 'ecommerce': { 'detail': { 'products': [{ 'name': '{{ Product.name }}', // Name or ID is required. 'id': '{{ Product.getCodeMin ? Product.getCodeMin : Product.id }}', 'price': '{{ Product.getPrice02IncTaxMin }}', 'category': '{% for ProductCategory in Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', }] } } }); </script> {% elseif app.request.get('_route') == 'cart' %} {# カートに追加 #} <script> // Measure when a product is added to a shopping cart dataLayer.push({ecommerce: null}); // Clear the previous ecommerce object. // GA4 dataLayer.push({ 'event': 'add_to_cart', 'ecommerce': { 'items': [ {% for CartIndex,Cart in Carts %} {% for CartItem in Cart.CartItems %} {% set ProductClass = CartItem.ProductClass %} {% set Product = ProductClass.Product %} { 'item_name': '{{ Product.name }}', 'item_id': '{{ Product.getCodeMin ? Product.getCodeMin : Product.id }}', 'price': '{{ Product.getPrice02IncTaxMin }}' }{% if not loop.last %},{% endif %} {% endfor %} {% endfor %} ] } }); // UA dataLayer.push({ 'event': 'addToCart', 'ecommerce': { 'currencyCode': 'JPY', 'add': { 'products': [ {% for CartIndex,Cart in Carts %} {% for CartItem in Cart.CartItems %} {% set ProductClass = CartItem.ProductClass %} {% set Product = ProductClass.Product %} { 'name': '{{ Product.name }}', 'id': '{{ Product.getCodeMin ? Product.getCodeMin : Product.id }}', 'price': '{{ Product.getPrice02IncTaxMin }}', 'quantity': {{ CartItem.quantity }} }{% if not loop.last %},{% endif %} {% endfor %} {% endfor %} ] } } }); </script> {% elseif app.request.get('_route') == 'shopping_complete' %} {# 購入完了 #} {% if Order.id %} <script> dataLayer.push({ecommerce: null}); // GA4 dataLayer.push({ 'event': 'purchase', 'ecommerce': { 'transaction_id': '{{ Order.order_no }}', 'affiliation': '{{ BaseInfo.shop_name }}', 'value': '{{ Order.subtotal }}', 'tax': '{{ Order.tax }}', 'shipping': '{{ Order.delivery_fee_total }}', 'currency': 'JPY', 'items': [ {% for OrderItem in Order.MergedProductOrderItems %} { 'item_name': '{{ OrderItem.product_name }}', 'item_id': '{{ OrderItem.product_code ? OrderItem.product_code : OrderItem.product.id }}', 'price': '{{ OrderItem.price_inc_tax }}', 'item_category': '{% for ProductCategory in OrderItem.Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', 'quantity': {{ OrderItem.quantity }} }{% if not loop.last %},{% endif %} {% endfor %} ] } }); // UA dataLayer.push({ 'ecommerce': { 'purchase': { 'actionField': { 'id': '{{ Order.order_no }}', 'affiliation': '{{ BaseInfo.shop_name }}', 'revenue': '{{ Order.subtotal }}', 'tax': '{{ Order.tax }}', 'shipping': '{{ Order.delivery_fee_total }}' }, 'products': [ {% for OrderItem in Order.MergedProductOrderItems %} { 'name': '{{ OrderItem.product_name }}', 'id': '{{ OrderItem.product_code ? OrderItem.product_code : OrderItem.product.id }}', 'price': '{{ OrderItem.price_inc_tax }}', 'category': '{% for ProductCategory in OrderItem.Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', 'quantity': {{ OrderItem.quantity }} }{% if not loop.last %},{% endif %} {% endfor %} ] } } }); </script> {% endif %} {% endif %}
こちらの内容ですが、route名で判断して必要なeコマースタグ用のコードを設定しています。 また、項目についても必要最低限の記述しかしていないため、適宜追加してみてください。
レイアウト管理に設定
作成したそれぞれのブロックをトップページ用レイアウトと下層ページ用レイアウトに配置します。
配置場所はそれぞれ、以下の場所へ配置します。
トップページ用レイアウト
下層ページ用レイアウト
今回は基本的なアクションしか設定していませんが、「ショッピング カートから商品を削除する」などのアクションについても似たような方法で記述すれば対応可能です。
なお、GA4の場合、タグマネージャーの設定が複雑なためこちらは時間がある時にまたまとめます。
以上でeコマースタグの設置方法となりますので参考にしてください。
