ねとたす

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

      2015/12/15

google-tagmanager-600

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

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

スポンサード

eコマースタグとは?

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

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

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

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

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

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

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

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

Googleアナリティクスのコンバージョンレポート画面

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

ザックリとした流れ

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

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

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

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

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

1.完了ページに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 必須 商品アイテム数 数値

すべて変数に入れないといけないの?

必須項目については必ず記述する必要があります。問合せ完了ページなどで使う場合、固定値の1として記述しておくのもテクニックのひとつです。

オプションで記述しない場合はどうするの?

行ごと削除しても、”にして空にしてもどちらでも大丈夫です。

eコマース用のデータレイヤーコードを設置する時の注意点

データレイヤーコードは Google タグマネージャのコンテナスニペットの「前」に挿入します。ソース上の位置的には、コンテナスニペットの上に記述することになります。

2.完了ページだけで動作するトリガーを作成する

Googleタグマネージャトップのサイドバーの[トリガー]をクリックし、トリガーを新規作成します。[ページビュー]を選択し、[続行]をクリックします。

タグマネージャでeコマースコンバージョンタグを設置する手順1

配信するタイミングが、完了ページのみで動作するようにします。

タグマネージャでeコマースコンバージョンタグを設置する手順2

上記の場合、
https://netotas.net/shoping/complete.php
のページで、トリガーが作動するようになります。

これでトリガーの準備は終わりです。

参考 特定のページのみにタグを配信する方法

3.コンバージョンタグを準備します。

タグマネージャのサイドバー、[タグ]をクリックし、[新規作成]をクリックします。
Googleアナリティクスのeコマース機能を使うので、Googleアナリティクスを選択します。

タグマネージャでeコマースコンバージョンタグを設置する手順3

自身のトラッキングID、プロファイルIDを入力し、トラッキングタイプにて「トランザクション」を選択します。

タグマネージャでeコマースコンバージョンタグを設置する手順4

配信するタイミングで[一部のページ]をクリックし、先ほど作成した完了ページのみで反応するトリガーを選択します。

タグマネージャでeコマースコンバージョンタグを設置する手順5

これで、タグの準備がおわりました。
バージョンを作成して、[公開]をすると計測が開始されます。

レポートの見方

eコマースコンバージョンを計測すると、Googleアナリティクスの「コンバージョン」という項目でデータを閲覧することができるようになります。

tagmanager-tag-ecommerce4

購入された商品名、個数、売上などの注文情報を確認することができるようになります。ここまでであれば通販サイトの管理画面上と変わりがないかもしれません。

最大のメリットは、Googleアナリティクスで集計しているアクセスデータと紐づけて分析できる点にあります。

つまり、費用対効果を可視化できるようになる

注文にいたった参照元サイトなどを確認できるようになります。つまり、コンバージョンをアシストしてくたメディアはなにか?費用対効果を可視化できるようになります。

tagmanager-tag-ecommerce6

また、コンバージョンにいたるまでの経路がわかるようになります。
たとえば、初回は[検索エンジン]からサイトを訪問し、後日リスティング広告からサイトを再訪問し注文にいたったとしましょう。リスティング広告は直接的に貢献していますが、検索エンジンも間接的に貢献している、つまり価値があるということです。

tagmanager-tag-ecommerce5

このように、eコマースタグを適切に活用することで、より多くの情報をもとに収益にかかわる分析をすることができます。

NEW!! ありがたいことに最近、仕事依頼に関する相談が増えてきましたので、ウェブサイト・ECサイト支援に関するサービスサイトを立ち上げました!

 - タグマネージャ

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

ウェブが好きな中小企業診断士のブログ

Copyright© ねとたす , 2016 All Rights Reserved.