13
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

EC-CUBE4でGTM+Google Analyticsのeコマース設定

EC-CUBE4でのeコマース設定、GTMでの設定方法があまり見当たらなかったのでメモ
ブロック管理、レイアウト管理を利用した設定方法です。

タグマネージャのタグを設置

タグマネージャ用のタグを設置します。ブロックを作成し、レイアウトに配置していきます。

ブロックを作成する

GTMのタグは、Googleタグマネージャーの管理画面から、管理→Google タグ マネージャーをインストールで確認できます。

head内に記述するものと、body内に記述するものの2つがあります。

image.png

これをコンテンツ管理→ブロック管理で、それぞれブロックを作成します。

head内に設置するブロック
image.png

body内に設置するブロック
image.png

以下のように、Google Tag Manager(head)とGoogle Tag Manager(body)の2つを作成しました。

image.png

レイアウトに配置する

次に、作成したブロックをレイアウトに配置します。

コンテンツ管理→レイアウト管理から、作成したブロックを配置します。
<head></head>タグ内に、Google Tag Manager(head)を、<body>タグ直後に、Google Tag Manager(body)を配置します。

image.png

上記は「トップページ用レイアウト」の設定例ですが、「下層ページ用レイアウト」にも同様に設定します。

コンバージョンタグを設置

購入完了ページでコンバージョンを計測できるよう、コンバージョンタグをブロックで作成し、レイアウトに配置します。

ブロックを作成する

コンテンツ管理→ブロック管理から新規ブロックを作成します。

image.png

コードは以下のように作成しました。


{% if app.request.pathinfo == '/shopping/complete' %}

<script>
        var transaction_products = [];
        {% for OrderItem in Order.MergedProductOrderItems %}
        transaction_products.push({
            sku: '{{ OrderItem.product_code ? OrderItem.product_code : OrderItem.product.id }}',
            name: '{{ OrderItem.product_name }}',
            price: '{{ OrderItem.price_inc_tax }}',
            quantity: '{{ OrderItem.quantity }}'
        });
        {% endfor %}
        window.dataLayer = window.dataLayer || []
        dataLayer.push({
            'transactionId': '{{ Order.order_no ? Order.order_no : Order.id }}',
            'transactionTotal': {{ Order.payment_total }},
            'transactionProducts': transaction_products
        });
</script>

{% endif %}

必要最低限のパラメータだけ指定していますが、その他にも渡せるパラメータはあるようなので、詳細はタグマネージャのドキュメントを参考にするとよいと思います。

また、EC-CUBE側の値は以下のものを渡すことができます。

項目 変数
注文ID {{ Order.id }}
注文番号 {{ Order.order_no }}
支払金額 {{ Order.payment_total }}
商品ID {{ OrderItem.product.id }}
商品規格ID {{ OrderItem.product_class.id }}
商品コード {{ OrderItem.product_code }}
金額 {{ OrderItem.price }}
金額(税込) {{ OrderItem.price_inc_tax }}
個数 {{ OrderItem.quantity }}
規格名1 {{ OrderItem.class_category_name1 }}
規格名2 {{ OrderItem.class_category_name2 }}
商品名 {{ OrderItem.product_name }}

その他の値はソースコードを参照してみてください。
https://github.com/EC-CUBE/ec-cube/blob/4.0/src/Eccube/Entity/Order.php
https://github.com/EC-CUBE/ec-cube/blob/4.0/src/Eccube/Entity/OrderItem.php

レイアウトに配置する

作成したブロックを、レイアウトに配置します。
こちらのブロックは、「下層ページ用レイアウト」のみ設定します。

image.png

<head></head>タグ内に作成したブロックを配置します。
このとき、Google Tag Manager(head)より上に配置する必要があります。

GTMおよびAnalyticsの設定

あとは、AnalyticsとGTM側で設定が完了すれば計測開始できます。

  • Analytics→eコマース設定を有効にする
  • GTM→トラッキングタイプをトランザクションに設定したユニバーサル アナリティクス タグを作成する

詳しくはドキュメントを参考にしてみてください。
https://support.google.com/tagmanager/answer/6107169?hl=ja

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
13
Help us understand the problem. What are the problem?