このガイドでは、Google タグ マネージャーを使用してユニバーサル アナリティクスの拡張 e コマース機能をウェブサイトに実装する方法について説明します。
概要
Google アナリティクスの拡張 e コマースを使用すると、Google アナリティクスのページビューやイベントとともに商品のインプレッション、プロモーション、売上のデータを送信できます。商品インプレッションや商品購入をトラッキングするには、ページビューを使用します。また、決済ステップや商品クリックをトラッキングするには、イベントを使用します。
準備
拡張 e コマースのデベロッパー ガイドの拡張 e コマースデータの種類と操作のセクションを確認して、実装計画を立てることをおすすめします。このガイドを活用すると、測定する各 e コマース インタラクションの必須フィールドと省略可能フィールドを判断できます。
拡張 e コマースを有効にする
ほとんどの実装では、ユニバーサル アナリティクスのページビューまたはイベントタグごとに拡張 e コマースを有効にする必要があります。管理画面のタグエディタ画面で拡張 e コマースを有効にする方法は次の 2 つです。
- データレイヤーを使用して実装する（推奨）
- カスタムの JavaScript マクロを使用して実装する
どちらの方法でも、同等の e コマース機能を使用できますが、データレイヤーをサポートするすべてのウェブサイトでデータレイヤーの方法を使用することをおすすめします。このガイドでは、データレイヤーの方法をデフォルトの方法として説明します。カスタムの JavaScript マクロを使用する方法については、このガイドの最後で説明しています。
データレイヤーを使用する
以下のセクションでは、データレイヤーを使用して、次の拡張 e コマース アクティビティを測定する方法を説明します。
商品インプレッションを測定する
- e コマース測定:
impressions - 使用可能データ:
impressionFieldObjectsの配列
商品インプレッションを測定するには、impression アクションと 1 つ以上の impressionFieldObjects を使用します。次の例は、ページに表示される商品についての詳細が、ページの読み込み時にわかっていることを前提としています。
<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({
'ecommerce': {
'currencyCode': 'EUR', // Local currency is optional.
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Search Results',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Search Results',
'position': 2
}]
}
});
</script>
商品クリックを測定する
- e コマース測定:
click - 使用可能データ:
list、productFieldObjectsの配列
商品リンクのクリックを測定するには、次の例のように、クリックした商品を表す productFieldObject とともに、click アクションをデータレイヤーにプッシュします。
<script>
/**
* Call this function when a user clicks on a product link. This function uses the event
* callback datalayer variable to handle navigation after the ecommerce data has been sent
* to Google Analytics.
* @param {Object} productObj An object representing a product.
*/
function(productObj) {
dataLayer.push({
'event': 'productClick',
'ecommerce': {
'click': {
'actionField': {'list': 'Search Results'}, // Optional list property.
'products': [{
'name': productObj.name, // Name or ID is required.
'id': productObj.id,
'price': productObj.price,
'brand': productObj.brand,
'category': productObj.cat,
'variant': productObj.variant,
'position': productObj.position
}]
}
},
'eventCallback': function() {
document.location = productObj.url
}
});
}
</script>
商品の詳細の表示を測定する
- e コマース測定:
detail - 使用可能データ:
list、productFieldObjectsの配列
商品の詳細の表示を測定するには、表示されている商品を表す 1 つ以上の productFieldObjects とともに、detail アクションをデータレイヤーにプッシュします。
<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({
'ecommerce': {
'detail': {
'actionField': {'list': 'Apparel Gallery'}, // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
ショッピング カートへの追加またはショッピング カートからの削除を測定する
- e コマース測定:
add、remove - 使用可能データ:
list、productFieldObjectsの配列
同様に、add または remove actionFieldObject と productFieldObjects のリストを使用して、ショッピング カートへの追加またはショッピング カートからの削除を測定することができます。
ショッピング カートへの商品の追加
// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': { // 'add' actionFieldObject measures.
'products': [{ // adding a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
ショッピング カートからの商品の削除
// Measure the removal of a product from a shopping cart.
dataLayer.push({
'event': 'removeFromCart',
'ecommerce': {
'remove': { // 'remove' actionFieldObject measures.
'products': [{ // removing a product to a shopping cart.
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
プロモーションを測定する
特定の商品の特売や送料無料の特典を宣伝するためにサイト自体に表示されるバナーなど、サイト内プロモーションのインプレッションとクリックの両方を測定できます。
プロモーションのインプレッションを測定する
- e コマース測定:
promoView - 使用可能データ:
promoFieldObjectsの配列
プロモーションのインプレッションを測定するには、ページでユーザーに表示されるプロモーションを表す promoFieldObject に、e コマース データレイヤー変数の promoView キーを設定します。
<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({
'ecommerce': {
'promoView': {
'promotions': [ // Array of promoFieldObjects.
{
'id': 'JUNE_PROMO13', // ID or Name is required.
'name': 'June Sale',
'creative': 'banner1',
'position': 'slot1'
},
{
'id': 'FREE_SHIP13',
'name': 'Free Shipping Promo',
'creative': 'skyscraper1',
'position': 'slot2'
}]
}
}
});
</script>
プロモーションのクリックを測定する
プロモーションのクリックを測定するには、クリックしたプロモーションを表す promoFieldObject を含む配列を使用して、promoClick アクションをデータレイヤーにプッシュします。
<script>
/**
* Call this function when a user clicks on a promotion. This function uses the eventCallBack
* datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
*
* @param {Object} promoObj An object representing an internal site promotion.
*/
function onPromoClick(promoObj) {
dataLayer.push({
'event': 'promotionClick',
'ecommerce': {
'promoClick': {
'promotions': [
{
'id': promoObj.id, // Name or ID is required.
'name': promoObj.name,
'creative': promoObj.creative,
'position': promoObj.pos
}]
}
},
'eventCallback': function() {
document.location = promoObj.destinationUrl;
}
});
}
</script>
決済を測定する
決済プロセスの各ステップを測定する手順は次のとおりです。
checkoutアクションを使用して、決済プロセスの各ステップを測定します。- 必要に応じて、
checkout_optionアクションを使用して決済オプションを測定します。 - （省略可）管理画面の [アナリティクス設定] の [e コマースの設定] で、決済目標到達プロセスのレポートに表示するわかりやすいステップ名を設定します。
1. 決済ステップを測定する
- e コマース測定:
checkout - 使用可能データ:
step、productFieldObjectsの配列
購入手続きボタンと、ユーザーが配送先情報や支払い情報を入力する 1 つ以上の購入手続きページを含む決済プロセスを測定する場合、checkout アクションと step フィールドを使用して、決済プロセスのどのステップが測定されているかを示します。
option フィールドを使用して、ユーザーが選択した支払い方法など、ページに関する追加データを提供することもできます。
<script>
/**
* A function to handle a click on a checkout button. This function uses the eventCallback
* data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
*/
function onCheckout() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1, 'option': 'Visa'},
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
},
'eventCallback': function() {
document.location = 'checkout.html';
}
});
}
</script>
2. 決済オプションを測定する
- e コマース測定:
checkout_option - 使用可能データ:
step、option
決済オプションは、決済ステップはすでに測定済みのときに、同じ決済ステップに関する追加情報を取得する場合に便利です。取得する情報としては、ユーザーが選択した配送方法などが考えられます。
これを測定するには、checkout_option アクションを step および option フィールドとともに使用します。
<script>
/**
* A function to handle a click leading to a checkout option selection.
*/
function onCheckoutOption(step, checkoutOption) {
dataLayer.push({
'event': 'checkoutOption',
'ecommerce': {
'checkout_option': {
'actionField': {'step': step, 'option': checkoutOption}
}
}
});
}
</script>
3. 決済目標到達プロセスの設定
必要に応じて、決済プロセスのステップごとに、レポートで使用するわかりやすい名前を設定できます。こうした名前を設定するには、Google アナリティクスの管理画面の [アナリティクス設定] で対象のビュー（旧プロファイル）を選択して [e コマースの設定] をクリックします。表示される e コマースの設定手順に従って、測定する個々の決済ステップに名前を設定します。
購入を測定する
- e コマース測定:
purchase - 使用可能データ:
id（トランザクション ID）、productFieldObjectsの配列
拡張 e コマース対応のタグを配信する event とともに、purchase アクションを使用して、トランザクションの詳細をデータレイヤーにプッシュします。この例では、ページの読み込み時にトランザクションの詳細がわかっているものとして、トランザクションの詳細を gtm.js スクリプトから返されるとページビューとともに送信します。
<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty string.
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>
払い戻しを測定する
- e コマース測定:
refund - 使用可能データ:
id（トランザクション ID）、productFieldObjectsの配列
トランザクションの全額払い戻しを測定するには、払い戻し対象のトランザクションのトランザクション ID とともに refund actionFieldObject をプッシュします。
<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'} // Transaction ID. Required for purchases and refunds.
}
}
});
</script>
一部払い戻しを測定するには、払い戻し対象の商品 ID と数量を含む productFieldObjects のリストを追加します。
<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'}, // Transaction ID.
'products': [
{'id': 'P4567', 'quantity': 1}, // Product ID and quantity. Required for partial refunds.
{'id': 'P8901','quantity': 2}
]
}
}
});
</script>
商品スコープのカスタム ディメンションを渡す
商品スコープのカスタム ディメンションを e コマース オブジェクトに渡すには、次の表記法を使用して商品に追加します。
dimensionn
ここで、n は自然数です。次に例を示します。
<script>
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'dimension1': 'Same day delivery'
}]
}
}
});
</script>
商品スコープのカスタム指標を渡す
商品スコープのカスタム指標を e コマース オブジェクトに渡すには、次の表記法を使用して商品に追加します。
metricn
ここで、n は自然数です。次に例を示します。
<script>
dataLayer.push({
'ecommerce': {
'purchase': {
...
'products': [{
'name': 'Goal Flow Garden Hose',
'id': 'p001',
'brand': 'Google Analytics',
'category': 'Home Goods',
'variant': 'Green',
'price': '20',
'quantity': 1,
'metric3': '10' // Custom metric 'Cost'
}]
}
}
});
</script>
インプレッションとアクションを組み合わせる
商品のインプレッションとアクションの両方を測定する場合は、両者を組み合わせて、1 回のヒットでまとめて測定できます。
次のサンプルコードは、商品の詳細を表示するアクションを、関連商品セクションの商品インプレッションとともに測定する方法を示したものです。
<script>
dataLayer.push({
'ecommerce': {
'impressions': [
{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'list': 'Related Products',
'position': 1
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'list': 'Related Products',
'position': 2
}],
'detail': {
'actionField': {'list': 'Apparel Gallery'} // 'detail' actions have an optional list property.
'products': [{
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
カスタムの JavaScript マクロを使用する
ウェブサイトでデータレイヤーがサポートされていない場合は、カスタムの JavaScript マクロを使用して、e コマースデータ オブジェクトを返す関数を呼び出すことができます。このオブジェクトでは、このガイドの前半に示したデータレイヤーの構文を使用する必要があります。次に例を示します。
// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
var ecommerceData = {
'ecommerce': {
'purchase': {
'actionField': {'id': 'T12345'},
'products': [
// List of productFieldObjects
],
... // Rest of the code should follow the data layer syntax.
}
};
return ecommerceData;
}
データレイヤーの代わりにカスタムの JavaScript マクロを使用する場合は、[拡張 e コマース機能を有効にする] をオンにし、[マクロからデータを読み込む] を設定します。