Googleアナリティクスの基礎：eコマースの設定とタグ＆GTM

X (Twitter) Facebook Hatena Pinterest Email Pocket

Googleアナリティクスは無料で、ネットショップにおける収益計算まで対応する稀有な解析ツールです。eコマース機能や設定に対応したトラッキングツールななかなかないものです。

こんにちは、カグア！です。eコマースタグはじつは使いこなすととても便利なタグです。イベントトラッキング以上にじつは使い出であり、オススメです。

この記事の目次

Googleアナリティクスのeコマースタグとは
eコマースタグの設定
Googleタグマネージャでのeコマース実装
- 1.dataLayerで購入情報を出力
- 2.タグマネージャーでのタグ実装
アフィリエイトサイトでeコマース計測する
- dataLayer.push({～})を使う
まとめ

Googleアナリティクスのeコマースタグとは

すみれ

eコマースタグって何なのですか？

カグア！

いわゆるコンバージョンタグだよ。

すみれ

コンバージョンタグ？

カグア！

購入完了ページなどサイトのゴールとなるページにのみ貼り付けるタグのことさ。

さくら

AdWordsでもゴールのページだけに貼るタグがあるわね。

すみれ

さ、さくらちゃん！AdWordsネタにはぶっ込んでくるわね・・・。

カグア！

そう、いわゆるゴールしたことを通常のPVとは別にカウントさせる、それがコンバージョンタグなんだ。

すみれ

それが購入完了ページというECサイトのゴールだから・・・

さくら

eコマーストラッキングなのね！言わば「eコマースコンバージョンタグ」ね。

カグア！

その通り！

すみれ

言われた～。

eコマースタグの設定

Googleアナリティクスでeコマース計測をするには、つぎの2つの設定を行います。

1.アナリティクス設定でeコマース設定

アナリティクス設定＞ビュー＞eコマースの設定 から、eコマースのステータスと関連商品とをオンにします。
＞＞e コマーストラッキングの設定 – アナリティクスヘルプ

「関連商品」は一定量の購入完了数とリスト生成までの30日が必要ですが、データ蓄積後はAPIやクエリーエクスプローラーから、関連商品情報を取得可能です。2015年9月28日時点では、まだセカンダリディメンションで選ぶなどはできませんが、ECサイトでAPIを使って関連商品を表示させることを想定しているのか、今後の展開が気になりますね。とりあえずオンにしておきましょう。

2.eコマースタグを貼る

eコマースタグはコンバージョンタグですので、通常のページビュー計測のタグとは別に追加で貼り付けます。

通常のGoogleアナリティクスのトラッキングコードの ga(‘send’, ‘pageview’); の次の行あたりに以下を追加すると良いでしょう。※通常トラッキングコード内に含める場合はスクリプトタグは不要。

＞＞e コマーストラッキング – ウェブトラッキング（analytics.js） | ユニバーサルアナリティクスウェブトラッキング（analytics.js） | Google Developers

<script>
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
  'id': '$トランザクションID$',
  'affiliation': '$アフィリエイト名など$',
  'revenue': '$総合計$',
  'shipping': '$送料$',
  'tax': '$税金$'
});
//ループ
ga('ecommerce:addItem', {
  'id': '$トランザクションID$',
  'name': '$商品名$',
  'sku': '$サイズや型番$'
  'category': '$商品カテゴリー$',
  'price': '$単価$',
  'quantity': '$数量$'
});
//ループここまで
ga('ecommerce:send');
</script>

上記コードの $トランザクションID$など、$～$ の部分はシステムの変数部分に置き換えてください。ECサイトであれば、カートに絡んだシステムで、かならず上記変数は書き出せるはずですから、エンジニアと相談して実際の変数で組み込んでください。

ga(‘require’, ‘ecommerce’);

ユニバーサルアナリティクスになってから、プラグインのかたちでeコマースタグは提供されるようになりました。かつてのトラッキングコードのように、アナリティクス設定画面で設定するだけではダメなので注意してください。

ステップ2:ga(‘ecommerce:addTransaction’～);

トランザクションとは「商品の購入処理」のことです。ここでは、その購入自体の総合計や税金、送料などを指定します。このトランザクションIDが、この後の商品ごとの処理に紐づくことになります。

ga(‘ecommerce:addItem’～);

カートに入れた商品情報を書きます。この部分は、購入した品目だけループさせます。たとえば、お米と水を買ったら、ga(‘ecommerce:addItem’～);をループさせて2個出力されるよう、プログラミングしてください。ここは商品種類数だけコードが連なります。

ga(‘ecommerce:send’);

トランザクションデータを送信します。このタグが入っていませんと処理されたトランザクション情報が、Googleアナリティクスに計測されません。

最低限必要なｅコマースタグ

eコマースタグには必須とオプショナルがあります。eコマース機能を稼働させるには、最低限以下のコードを送信するようにしてください。

ga('require','ecommerce');
ga('ecommerce:addTransaction', {'id': '$トランザクションID$'});
ga('ecommerce:addItem', {'id': '$トランザクションID$','name': '$商品名$'});
ga('ecommerce:send');

さすがに商品価格などを含めないことはないでしょうから、addItem部分にあと価格と数量を入れればよいかと思います。

キャンセル処理をするには

Googleアナリティクスでは、さすがに100%や売上管理データベースと連動しているわけではありません。あくまでsendされたeコマース情報を蓄積しているだけです。ですから、注文キャンセルがあり、その日の売上とGoogleアナリティクス上の売上と異なる場合もあります。

ですから運営者が、キャンセルと同等の処理をあえて行う必要があります。クリア送信をするか、マイナス商品の購入をするかいずれかとなります（後者は商品名など例示しています）。

ga('ecommerce:clear');

ga('require','ecommerce');
ga('ecommerce:addTransaction', {'id':'9999'});
ga('ecommerce:addItem', {'id':'99999','name': 'キャンセル', 'price': '-9999','quantity': '1'
});
ga('ecommerce:send');

外部からアクセス不可領域に、上記コードを含むページを作り、スタッフ内だけで共有すると良いでしょう。

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

通常のユニバーサルアナリティクスタグと、購入完了ページ表示をトリガーとしたeコマースタグの発行がメインとなります。ただし、購入情報などデータの受け渡しに、dataLayerかdataLayer.push({～})を行います。

＞＞Google アナリティクスの e コマース – Tag Manager ヘルプ

1.dataLayerで購入情報を出力

GTMに購入情報を渡すために、Googleタグマネージャのコンテナタグよりも上の部分に、dataLayerを使いコード内に書き出してください。どうしても、GTMよりも先に出力できないという場合は、そもそもユニバーサルアナリティクスタグを、ページ読込の完了（DOM）まで待機するトリガーで発火させる、もしくはdataLayer.push({‘a’: ‘a’})を使い、カスタムイベントも含め、そのイベント発生をトリガーにしてｅコマースタグを発火させると良いでしょう。

<script>
dataLayer = [{
    'transactionId': '99999',
    'transactionAffiliation': 'Brandshop',
    'transactionTotal': 10000,
    'transactionTax': 800,
    'transactionShipping': 500,
    'transactionProducts': [{
        'sku': 'M',
        'name': 'T-Shirt',
        'category': 'mens',
        'price': 980,
        'quantity': 1
    },{
        'sku': 'XL',
        'name': 'Socks',
        'category': 'mens',
        'price': 1000,
        'quantity': 5
    }]
}];
</script>

2.タグマネージャーでのタグ実装

購入完了ページを検知するトリガーを作り、通常のユニバーサルアナリティクスタグとは別に、新規タグを作ってください。

前述のdataLayer内のプロパティ名で書かれていれば、あとはGTMがそれらの変数にちゃんと読み込んでくれます。

アフィリエイトサイトでeコマース計測する

通常の目標設定では1セッションで1種類につき1回しかCVカウントされません。しかし、アフィリエイトサイトでは、サイト内の商品リンクを複数回クリックすることは自然です。

アフィリエイトサイトで送客をKPIにしている場合、それでは得られる目標完了数などの情報は限定的になってしまいます。そこで、1セッション中何回でもCVカウントできるeコマース機能が便利です。じっさい私は、ｅコマーストラッキングをしてデータを取得しています。

dataLayer.push({～})を使う

任意のタイミングでdataLayerを出力したい、そんなときにはそのイベントごとにdataLayer.push({～})というメソッドを使います。その名のとおりデータをプッシュしてくれます。これをカスタム変数タグで作り、クリックをトリガーにすればOKです。

いっぽうでポイントは、データレイヤーで購入情報が送信（ここではアフィリエイトクリック）されるとき、カスタムイベントのシグナルを送ることです。次にeコマースタグはそれをトリガーにして発火させたいからです。

<script>
now = new Date();
//<![EDATA[
var transactionId = now.getTime();
var cartProducts = [];
cartProducts.push({
	"id": transactionId,
	"name" : "$商品名$",
	"category" : "$商品カテゴリー$",
	"price" : "$価格$" ,
	"quantity" : "$数量$"
});
// TagManagerへデータを転送
dataLayer.push({
	"transactionId" : transactionId,
	"transactionTotal" : "$合計$",
	"transactionProducts" : cartProducts,
	"event" : "trackTrans" // イベント名
});
//]]>
</script>

＞＞Googleタグマネージャを用いたイベントトラッキングやeコマーストラッキングの設定方法 ++ SEO HACKS公式ブログ
＞＞Reference | Google Tag Manager for Web Tracking | Google Developers

そうしますと、どのアフィリエイトがクリックされたのかがわかります。