WEB担当ツール・ハウツー

【解説】Googleアナリティクス、EC-CUBEのGA4設定方法（eコマーストラッキング対応）

投稿日：2023年2月10日 更新日：

Googleアナリティクス、EC-CUBEのGA4設定方法（eコマーストラッキング対応）の解説です。

トリプラ(tripra)のGA4設定対応についてはこちら

【2023年7月にGA4へ】

2023年7月に、既存バージョン「ユニバーサルアナリティクス」から、新規バージョン「GA4」に完全移行することがGoogleで発表されました。

今回、ECサイト（EC-CUBE）で「GA4」をGoogleタグマネージャー（
GTM ）経由で設定する方法を解説します。
eコマーストラッキングも設定します。

【GA4初期設定の手順資料がほしい方】
Googleアナリティクス（GA4） Web担当者がしている初期設定の全手順の解説
※資料はGoogle docsです。購入後に送付する資料に閲覧URLを共有してますので、適宜、閲覧もしくはダウンロードしてください。
※加工編集も可能です。個人、社内、クライアントへの共有、資料作成の元資料としてもご活用ください。

Googleアナリティクス（GA4） Web担当者がしている初期設定の全手順の解説

【レクチャーしてほしい方】
設定がうまくできない、よく分からない、という方はレクチャーサポートしております。

Googleアナリティクス（GA4）個別講座
－GA4の使い方、初期設定、施策立案まで対応

【設定代行してほしい方】
設定出来ない、設定する時間がない、という方は代行サポートしております。

Googleアナリティクス（GA4）まとめて設定代行サービス

※EC-CUBE（イプシロン決済）の場合も対応事例あり

Web365とは

Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行しています。

Web365について詳しく知りたい方は「Web365とは」ご覧ください。

GA4とGTMの設定

GA4のプロパティ発行と、GTMのアカウント発行、グローバルサイトタグの場所などは、下記に記載しておりますのでご確認ください。

【解説】googleアナリティクス、GA4の設定方法がうまくできないときの複数設定方法

まずは、GTMのグローバルサイトタグがコピペできる状態まで進めてください。

EC-CUBEのGA4設定

本題、まず、ECーCUBEの設定箇所は大きく２つです。

  1. レイアウト管理
  2. ブロック管理

ブロック管理

まずブロック管理で、必要なコードをつくります。

ブロック管理でGTMのグローバルサイトタグのブロックを作成する

まずは、GTMのグローバルサイトタグのブロック作成をします。

ブロック作成、ブロックをレイアウト管理で該当箇所に挿入、というイメージです。

ec-cube_ga4設定06

GTMのグローバルサイトタグは２つ

  1. head用のブロック
  2. body用のブロック

head用のブロック

ec-cube_ga4設定05

ブロック名：Google Analytics (GA4) トラッキングタグ_head
ファイル名：gtag_ga4_head

GTMのグローバルサイトタグのコード：

自身のGTM内のからコピーして貼る。下記コード例

<!-- 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-〇〇');</script>
<!-- End Google Tag Manager -->

body用のブロック

ec-cube_ga4設定04

ブロック名：Google Analytics (GA4) トラッキングタグ_body
ファイル名：gtag_ga4_body

GTMのグローバルサイトタグのコード：

自身のGTM内のからコピーして貼る。下記コード例

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-〇〇"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

レイアウト管理で先のブロックを挿入

先に作成したブロックを該当箇所に挿入します。

ec-cube_ga4設定03

トップページレイアウト

  1. 画像、右のブロック一覧からドラッグドロップで、
  2. <head></head>タグ内に
  3. ブロック「Google Analytics (GA4) トラッキングタグ_head」をドロップ
  4. <body>タグ直後に
  5. ブロック「Google Analytics (GA4) トラッキングタグ_body」をドロップ
  6. 登録をクリック
ec-cube_ga4設定02

下層ページレイアウト

  1. 画像、右のブロック一覧からドラッグドロップで、
  2. <head></head>タグ内に
  3. ブロック「Google Analytics (GA4) トラッキングタグ_head」をドロップ
  4. <body>タグ直後に
  5. ブロック「Google Analytics (GA4) トラッキングタグ_body」をドロップ
  6. 登録をクリック
ec-cube_ga4設定01

eコマーストラッキングの設定

eコマーストラッキングタグのブロックを作成します。

ブロック名：Google Ecommerce Tag
ファイル名：ecommerce_gatag

GTMのグローバルサイトタグのコード：

下記コード例（参考：

{% 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 %}

レイアウト管理で先のブロックを挿入

先に作成したブロックを該当箇所に挿入します。

ec-cube_ga4設定03

トップページレイアウト

  1. 画像、右のブロック一覧からドラッグドロップで、
  2. <head></head>タグ内に
  3. ブロック「 Google Ecommerce Tag 」をドロップ
  4. 登録をクリック

下層ページレイアウト

  1. 画像、右のブロック一覧からドラッグドロップで、
  2. <head></head>タグ内に
  3. ブロック「Google Ecommerce Tag」をドロップ
  4. 登録をクリック

以上です。

テストのチェック方法

テストのチェック方法は、

  1. GTMのプレビューで確認
  2. GA4内のdebug Viewで確認
  3. GA4内のレポート＞リアルタイムでの確認

があります。

３については、下記記事に記載してますので、ご確認ください。

【解説】googleアナリティクス、GA4の設定方法がうまくできないときの複数設定方法

トリプラ(tripra)のGA4設定対応についてはこちら

当記事が有益だと思っていただけた方

当記事が有益だと思っていただけた方は、当サイトの活動についてサポートいただけるとありがいたいです。サポート決済ページはこちら

手順や見方、個別課題について受講したい方

GA4の初期設定や見方、考え方、個別の課題について課題解決型の講座です。
Googleアナリティクス（GA4）個別講座
－GA4の使い方、初期設定、施策立案まで対応

　

設定代行してほしい方

設定出来ない、設定する時間がない、という方は代行サポートしております。
Googleアナリティクス（GA4）まとめて設定代行サービス

※EC-CUBE（イプシロン決済）の場合も対応事例あり

Web改善を相談したい方

サイト計測・分析で相談したい方、そもそものWebサイトの分析提案や改善実行など相談したい方はこちらよりお気軽にご連絡ください。

    必須お名前

    必須メールアドレス

    必須メッセージ本文





    Web制作+Webマーケティングの個別講座開講中

    Web365はWeb担当者のスキルセットである
    サイトを変更する「提案力」と「技術力」について個別指導しております

    ・Webで集客するための「考え方」を知りたい方
    ・サイトの制作改善のセオリーを知りたい方
    ・自身のサイトでケーススタディをしたい方
    ・サイトの制作改善の「技術的なスキル」を習得したい方
    ・分析から改善運用まで自身でしたい方
    ・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方

    どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。





    外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

    Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています

    ・成果にこだわるサイト制作改善をお望みの方
    ・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
    ・分析から改善運用まで一括で依頼したい方


    是非Web365までご相談ください。

    【パートナー募集】
    Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供

    Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

    ・クライアントへのWebマーケティング、Web改善のプラン検討している方
    ・社内のWebマーケティングのリテラシーを高めたい方
    ・分析から改善運用まで一括でサポート依頼したい方

    Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています

    ・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
    ・クライアントへのWeb改善プラン実行のディレクションサポート
    ・社内のGoogleアナリティクスなどのレクチャー
    ・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
    ・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
    ・クライアントへのWeb広告運用代行
    ・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）


    まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。

    WEB担当ツール・ハウツー

    執筆者：

    関連記事

    WEBサイトのコンテンツを効率的に作る方法「動画コンテンツをテキストコンテンツに転用する」

    Webサイトの大事な役割であり、運用が大変なものが、「コンテンツ作成」です。 自身のサイトのコンセプトに適うコンテンツを新規で作成し、改善更新することはサイト運用でとても重要です。 しかし、重要なのは …

    【簡単】Googleカレンダーの予定から月次業務実績表を作成する方法

    Googleカレンダーの予定から月次の業務実績表を作成する方法、流れを解説します。 Web365とは Web365は、外部Web担当者として、クライアントのWebサイトの集客力を高める施策を運用代行し …

    イメージ01_ヒートマップの分析改善方法

    【事例】ヒートマップ分析でWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と改善方法を解説

    Webサイトの改善で、ユーザーの閲覧具合をみて、改善をはかりたいとき、「ヒートマップ」での分析はひとつの選択肢です。 今回は、ヒートマップでWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と …

    Word原稿をWordPressにUPするとき画像が横向きなる対応や効率的な公開方法

    クライアントさんからいただいたWord原稿をWordPressにUPしたいときの効率的な公開方法を解説します。その際の画像がWordPressのメディア内で横向きになってしまうときの対応も解説します。 …

    AIを活用した内部リンク戦略：効果的な記事選定の方法

    あなたのWebサイト、もっと効果的に活用したいと思いませんか？この記事では、クライアントが作成した記事に過去の関連記事を提案するプロセスを解説します。内部リンクを増やし、ユーザーの次の行動を促す方法で …

    テキストメールのリンクパラメータ

    【Webマーケティング】テキストメールのメルマガ効果測定はリンクパラメータがおすすめ

    テキストメールでのメルマガ送付の効果測定をどうしようか試行錯誤していませんか？ そんなときは、リンクパラメータの付与がおすすめです。 リンクパラメータでメールのリンクがクリックされたかがGoogleア …

    【簡単】サイトマップを自作するときのリンク抽出ツールの紹介

    サイトマップを自作するときに、リンクをひとつひとつコピペするのは大変です。抽出ツールをいくつか探してみて、おすすめを紹介します。 まず、ここでのサイトマップの定義は、サイトのページのタイトルとリンクを …

    PREV
    【現役Web担当が講師】自社で初めてWeb担当になったひとのためのWeb担当講座
    NEXT
    ルッカースタジオ/Looker studioで経営レポート作成コンサル
    －効率経営に向けたDX化の導入まで対応

    2024/06/20

    YouTube動画をAIで要約！会議運営マニュアルの作り方

    2024/06/15

    AIを活用した内部リンク戦略：効果的な記事選定の方法

    Googleアナリティクス（GA4）のまとめて設定代行サービス

    2023/08/12

    トリプラ（tripla）でGoogleアナリティクス（GA4）、初めにしておきたい全設定、まとめて代行サービス

    ルッカースタジオ/Looker studio 経営レポート作成コンサル

    2023/03/23

    ルッカースタジオ/Looker studioで経営レポート作成コンサル
    －効率経営に向けたDX化の導入まで対応

    eコマースのイメージ画像

    2023/02/10

    【解説】Googleアナリティクス、EC-CUBEのGA4設定方法（eコマーストラッキング対応）