【Googleタグマネージャ】 eコマーストラッキング設定方法

2018年5月16日

Google アナリティクスのeコマーストラッキング方法は、色々なブログで解説されているのですが、Googleタグマネージャ（GTM）使った、eコマーストラッキング方法は、あまりなかったので備忘録も含め、ご紹介します。

目次（ページ内リンク）

1 Googleタグマネージャでeコマーストラッキング方法
2 HTMLソースへのタグ実装
3 GA設定
4 GTM設定
5 動作確認

Googleタグマネージャでeコマーストラッキング方法

これによって、ECサイトの購入情報をGoogleアナリティクスで計測することができます。また、特定の商品を買ったユーザーのサイトのふるまいも確認できます。

HTMLソースへのタグ実装

まず、GTMのトラッキングコードが埋め込んであることが前提です。GTMのトラッキングコードの前に、eコマース用のタグを埋め込みます。

注文完了（または購入完了）ページにて、GTM専用変数であるデータレイヤー変数に
注文情報・商品情報を格納します。

サンプルコード

コードの詳細な記述方法部分は、Google公式ガイドに詳しく説明されているので参照してください。

Google アナリティクスの e コマース - Tag Manager ヘルプ
support.google.com/tagmanager/answer/3002596?hl=ja

<script>
dataLayer = [{
    'transactionId': '1234',
    'transactionAffiliation': 'Acme Clothing',
    'transactionTotal': 38.26,
    'transactionTax': 1.29,
    'transactionShipping': 5,
    'transactionProducts': [{
        'sku': 'DD44',
        'name': 'T-Shirt',
        'category': 'Apparel',
        'price': 11.99,
        'quantity': 1
    },{
        'sku': 'AA1243544',
        'name': 'Socks',
        'category': 'Apparel',
        'price': 9.99,
        'quantity': 2
    }]
}];
</script>

GA設定

eコマーストラッキングを有効にする

GAのビュー設定にて、eコマーストラッキングをONにします。

GTM設定

ルール作成

タグが動作するサンクスページの条件を作成します。

タグ作成

該当トラッキングコードのトランザクションタグを作成します。
（もちろん、ページビューを計測する基本タグは、別途必要です）

バージョン作成→公開

バージョン作成と公開の２ステップは、忘れやすいの注意が必要です。
安易に公開できない環境では、プレビュー＞デバッグで動作確認してください。
（デバッグは、一時的にドラフトコンテナの設定を実行する機能です）

動作確認

リアルタイム確認

リアルタイム確認といっても、eコマースのリアルタイムレポートは存在しないため注意が必要です。
GA DebugをONにして、トランザクションが動作していることをコンソールにて確認
※「GA Debug」は、Google Chromeの拡張機能です。
※コンソールは、開発ツール（F12キー）⇒ コンソール（Escキー）から確認可能です。