EC-CUBE3でGA4とUAの簡易的なeコマースタグ設定方法
EC-CUBE Advent Calendar 2021 8日目の記事です。
EC-CUBEでサイトを公開した後に、eコマースタグを設定したいという要望があります。 その方法を簡単に書いてきます。
GA4はまだ利用されていない方も多いと思いますので、 今回はGA4とUA両方対応できるようにタグを記述していますが、 どちらかしか利用していない場合、不要なコードは削除してください。
前提条件として、タグマネージャー を利用していることとします。 eコマースの詳細な解説は以下の公式サイトもご確認ください。
EC-CUBE4用はこちらをご覧ください。
EC-CUBE4でGA4とUAの簡易的なeコマースタグ設定方法 - AmidaikeBlog
タグマネージャーの設置方法
タグマネージャー用ブロック作成
ブロック管理より、以下のブロックを作成しておきます。
- ヘッダー用タグ作成
ブロック名 : 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に置き換えてください。
ページ管理に設定
作成したそれぞれのブロックをページ管理のTOPページのレイアウト編集で配置します。
配置場所はそれぞれ、以下の場所へ配置します。
全ページにチェックを入れるのを忘れないでください。
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 }}', }{% 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 }}', }{% if not loop.last %},{% endif %} {% endfor %} ] } }); </script> {% elseif app.request.get('_route') == 'product_detail' %} {# 商品詳細 #} <script> dataLayer.push({ecommerce: null}); // 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 }}', '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> dataLayer.push({ecommerce: null}); // GA4 dataLayer.push({ 'event': 'add_to_cart', 'ecommerce': { 'items': [ {% for CartItem in Cart.CartItems %} {% set ProductClass = CartItem.Object %} {% 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 %} ] } }); // UA dataLayer.push({ 'event': 'addToCart', 'ecommerce': { 'currencyCode': 'JPY', 'add': { 'products': [ {% for CartItem in Cart.CartItems %} {% set ProductClass = CartItem.Object %} {% 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 %} ] } } }); </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.id }}', 'affiliation': '{{ BaseInfo.shop_name }}', 'value': '{{ Order.subtotal }}', 'tax': '{{ Order.tax }}', 'shipping': '{{ Order.delivery_fee_total }}', 'currency': 'JPY', 'items': [ {% for OrderDetail in Order.OrderDetails %} { 'item_name': '{{ OrderDetail.product_name }}', 'item_id': '{{ OrderDetail.product_code ? OrderDetail.product_code : OrderDetail.product.id }}', 'price': '{{ OrderDetail.price_inc_tax }}', 'item_category': '{% for ProductCategory in OrderDetail.Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', 'quantity': {{ OrderDetail.quantity }} }{% if not loop.last %},{% endif %} {% endfor %} ] } }); // UA dataLayer.push({ 'ecommerce': { 'purchase': { 'actionField': { 'id': '{{ Order.id }}', 'affiliation': '{{ BaseInfo.shop_name }}', 'revenue': '{{ Order.subtotal }}', 'tax': '{{ Order.tax }}', 'shipping': '{{ Order.delivery_fee_total }}' }, 'products': [ {% for OrderDetail in Order.OrderDetails %} { 'name': '{{ OrderDetail.product_name }}', 'id': '{{ OrderDetail.product_code ? OrderDetail.product_code : OrderDetail.product.id }}', 'price': '{{ OrderDetail.price_inc_tax }}', 'category': '{% for ProductCategory in OrderDetail.Product.ProductCategories %}{% for Category in ProductCategory.Category.path %}{% if ( Category.parent is not null ) %}{{ Category.Parent.name }}：{{ Category.name }}{% endif %}{% endfor %}{% endfor %}', 'quantity': {{ OrderDetail.quantity }} }{% if not loop.last %},{% endif %} {% endfor %} ] } } }); </script> {% endif %} {% endif %}
こちらの内容ですが、route名で判断して必要なeコマースタグ用のコードを設定しています。 また、項目についても必要最低限の記述しかしていないため、適宜追加してみてください。
ページ管理に設定
作成したそれぞれのブロックを再度ページ管理のTOPページのレイアウト編集で配置します。
配置場所は以下の場所へ配置します。
今回は基本的なアクションしか設定していませんが、「ショッピング カートから商品を削除する」などのアクションについても似たような方法で記述すれば対応可能です。
なお、GA4の場合、タグマネージャーの設定が複雑なためこちらは時間がある時にまたまとめます。
以上でeコマースタグの設置方法となりますので参考にしてください。
