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

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

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

## ブロックを作成する

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/984d595c-53f3-82a3-3331-fc4cc0750e2f.png)

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

head内に設置するブロック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/d56e341c-20a5-7b84-b82c-b93371d748eb.png)

body内に設置するブロック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/7c4dc9c4-c938-b87a-f844-cc32179b60c8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/15798768-ed37-036d-7570-73ffe8b1c9c9.png)

## レイアウトに配置する

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/1ff5fcad-8867-ab52-9939-707c5efa3027.png)

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

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

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

## ブロックを作成する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/682c4b02-25c8-d188-fcdc-b5ad37c93a08.png)

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

```twig

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

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

https://support.google.com/tagmanager/answer/6107169?hl=ja

また、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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72858/5c512f15-daeb-00f5-cdf8-c67767a7047a.png)

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

# GTMおよびAnalyticsの設定

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

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

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