eコマースタグを設置する方法 [Googleタグマネージャv2の使い方]

Googleタグマネージャを使って、Googleアナリティクスのeコマース機能を使う方法を説明します。

タグマネージャのバージョン2とユニバーサルアナリティクスを用いて、画像付きで手順を解説します。

eコマースタグとは？
Googleタグマネージャでeコマースタグ
レポートの見方

eコマースタグとは？

注文完了ページ、申込み完了ページなどサイトのゴールとなるページにのみ貼り付けるタグのことです。コンバージョン（成約）タグの一種です。

eコマースタグは、どんな時に使うの？

ネットショップの注文件数や金額をGoogleアナリティクス上でも確認したいとき
問い合わせ件数など、コンバージョンに至るアクセスを重点的に分析したいとき

通販サイト以外でも活用できる

eコマースタグという名称になっているため、通販サイトでのみ使われる機能なイメージが定着していますが、申込み完了や問合せ完了などでも転用することができます。

たとえば、資料請求で1000円の価値があると仮定して組み込むイメージです。eコマース機能を使うことでサイト運営の収益を算出しやすくなるため、通販サイト以外でも実装することをおすすめします。

どこでレポートが見れるの？

Googleアナリティクスレポートの「コンバージョン」の項目で閲覧することができるようになります。

※eコマースレポートの見方は、後ほど下部で説明します。

ザックリとした流れ

完了ページにデータレイヤーコードを設置する。
表示するURLを監視し、完了ページかどうか判定するトリガーを作成する。
eコマースコンバージョンタグを作成し、完了ページのみで配信するトリガーと紐づける。
注文完了ページが表示されたタイミングで、データレイヤーコードをGoogleアナリティクスに送信する

Googleタグマネージャでeコマースタグ

eコマースコンバージョンタグの設置方法について、画像付きで具体的に説明します。

既にタグマネージャでGoogleアナリティクスのページビュートラッキングをしていることを前提としています。まだお済でない場合は、以下を参考にして設置してみてください。

参考タグマネージャでGoogleアナリティクスを設置する方法（v2編）

１．完了ページにeコマース用のデータレイヤーコードを設置する

完了ページにeコマース用のデータレイヤーコードを設置します。Googleタグマネージャのコンテナスニペットの「前」に挿入する必要があります。


 
</head>

<body>

<!-- Google Tag Manager eコマースタグ-->
<script>
dataLayer = [{
  'transactionId': '1234', //注文ID
  'transactionAffiliation': 'Acme Clothing', //注文ID
  'transactionTotal': 38.26, //合計金額
  'transactionTax': 1.29, //消費税
  'transactionShipping': 5, //送料
  'transactionProducts': [{
    'sku': 'DD44', //商品ID
    'name': 'T-Shirt', //商品名（日本語可）
    'category': 'Apparel', //商品カテゴリ
    'price': 11.99, //商品単価
    'quantity': 1 //注文された個数
  },{ //複数商品の場合はループするように記述する
    'sku': 'AA1243544',
    'name': 'Socks',
    'category': 'Apparel',
    'price': 9.99,
    'quantity': 2
  }]
}];
</script>
<!-- End Google Tag Manager eコマースタグ-->

<!-- Google Tag Manager コンテナ スニペット-->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=●●●"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','●●●');</script>
<!-- End Google Tag Manager コンテナ スニペット-->

※Googleタグマネージャのコンテナスニペットはタグ直後が推奨されています。

上記はサンプルコードのためで固定値を入れています。実際に導入するには、これらが動的に変わるように記述する必要があります。
transactionProductsは注文明細に該当します。注文された商品が複数の場合、商品のSKU分ループさせるように記述します。

eコマースタグで使える変数

変数名	区分	説明	型
transactionId	必須	注文IDや管理番号	文字列
transactionAffiliation	オプション	パートナーや販売店	文字列
transactionTotal	必須	注文の合計金額	数値
transactionShipping	オプション	注文の配送料	数値
transactionTax	オプション	注文の税額	数値
transactionProducts	オプション	注文された商品リスト	–

e コマースタグのTransactionProductを使う場合の変数

変数名	区分	説明	型
name	必須	商品の名前	文字列
sku	必須	商品の SKU	文字列
category	オプション	商品のカテゴリ	文字列
price	必須	商品の単価	数値
quantity	必須	商品アイテム数	数値