拡張 e コマース（UA）デベロッパーガイド

このガイドでは、Google タグマネージャーを使用してユニバーサルアナリティクスの拡張 e コマース機能をウェブサイトに実装する方法について説明します。

概要

Google アナリティクスの拡張 e コマースを使用すると、Google アナリティクスのページビューやイベントとともに商品のインプレッション、プロモーション、売上のデータを送信できます。商品インプレッションや商品購入をトラッキングするには、ページビューを使用します。また、決済ステップや商品クリックをトラッキングするには、イベントを使用します。

準備

拡張 e コマースのデベロッパーガイドの拡張 e コマースデータの種類と操作を確認して、実装計画を立てることをおすすめします。このガイドを活用すると、測定する各 e コマースインタラクションの必須フィールドと省略可能フィールドを判断できます。

拡張 e コマースを有効にする

ほとんどの実装では、ユニバーサルアナリティクスのページビューまたはイベントタグごとに拡張 e コマースを有効にする必要があります。管理画面のタグエディタ画面で拡張 e コマースを有効にする方法は次の 2 つです。

データレイヤーを使用して実装する（推奨）
カスタムの JavaScript マクロを使用して実装する

どちらの方法でも、同等の e コマース機能を使用できますが、データレイヤーをサポートするすべてのウェブサイトでデータレイヤーの方法を使用することをおすすめします。このガイドでは、データレイヤーの方法をデフォルトの方法として説明します。カスタムの JavaScript マクロを使用する方法については、このガイドの最後で説明しています。

データレイヤーを使用する

以下のセクションでは、データレイヤーを使用して、次の拡張 e コマースアクティビティを測定する方法を説明します。

商品インプレッション
商品クリック
商品の詳細の表示
カートへの追加、カートからの削除
プロモーションのインプレッション
プロモーションのクリック
購入手続き
購入
払い戻し

e コマースオブジェクトを消去する

e コマースイベントをデータレイヤーにプッシュする前に、次のコマンドを使用して e コマースオブジェクトを整理することをおすすめします。オブジェクトを整理すると、ページ上に複数存在する e コマースイベント同士の干渉を防ぐことができます。

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

商品インプレッションを測定する

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: null });  // Clear the previous ecommerce object.
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 コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: event が gtm.dom と等しい

商品クリックを測定する

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({ ecommerce: null });  // Clear the previous ecommerce object.
  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>

この例のタグ設定

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: イベント
イベントカテゴリ: Ecommerce
イベントアクション: Product Click
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: event が productClick と等しい

商品の詳細の表示を測定する

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: null });  // Clear the previous ecommerce object.
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({ ecommerce: null });  // Clear the previous ecommerce object.
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
       }]
    }
  }
});

この例のタグ設定

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: イベント
イベントカテゴリ: Ecommerce
イベントアクション: Add to Cart
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: event が addToCart と等しい

ショッピングカートから商品を削除する

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
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
      }]
    }
  }
});

この例のタグ設定

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: イベント
イベントカテゴリ: Ecommerce
イベントアクション: Remove from Cart
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: event が removeFromCart と等しい

特定の商品の特売や送料無料の特典を宣伝するためにサイト自体に表示されるバナーなど、サイト内プロモーションのインプレッションとクリックの両方を測定できます。

e コマース測定: promoView
使用可能データ: promoFieldObjects の配列

プロモーションのインプレッションを測定するには、e コマースデータレイヤー変数の promoView キーを、ページでユーザーに表示されるプロモーションを表す promoFieldObject に設定します。

<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: null });  // Clear the previous ecommerce object.
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>

この例のタグ設定

注: プロモーションのインプレッションにはアクションを設定できますが、promoClick アクションは指定できません。promoClick アクションを測定する場合は、promoView の後に別のヒットで測定する必要があります。

プロモーションのクリックを測定するには、クリックされたプロモーションを表す 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({ ecommerce: null });  // Clear the previous ecommerce object.
  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>

この例のタグ設定

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: イベント
イベントカテゴリ: Ecommerce
イベントアクション: Promotion Click
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: event が promotionClick と等しい

決済を測定する

決済プロセスの各ステップを測定する手順は次のとおりです。

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({ ecommerce: null });  // Clear the previous ecommerce object.
  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>

この例のタグ設定

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: イベント
イベントカテゴリ: Ecommerce
イベントアクション: Checkout
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: event が checkout と等しい

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({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

この例のタグ設定

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: イベント
イベントカテゴリ: Ecommerce
イベントアクション: Checkout Option
拡張 e コマース機能を有効にする: true
データレイヤーを使用する: true
トリガー: event が checkoutOption と等しい

3. 決済目標到達プロセスの設定を行う

必要に応じて、決済プロセスのステップごとに、レポートで使用するわかりやすい名前を設定できます。こうした名前を設定するには、Google アナリティクスの管理画面の [アナリティクス設定] で対象のビュー（旧プロファイル）を選択して [e コマースの設定] をクリックします。表示される e コマースの設定手順に沿って、測定する個々の決済ステップに名前を設定します。

Google アナリティクスの管理画面での e コマース設定決済の目標到達プロセスは、次の 4 つのステップで構成されます。1. カートの確認、2. お支払い情報の収集、3. 購入情報の確認、4. 領収。 — 図 1: 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: null });  // Clear the previous ecommerce object.
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>

注: ecommerce.purchase.products 配列を使用すると、Google アナリティクスと Floodlight 検索に購入を報告することができます。ただし、上記の例の配列要素は、Floodlight 検索でサポートされている配列要素とは多少異なります。Floodlight 検索で購入の詳細を報告する方法については、JSON 形式の要件の例をご覧ください。

この例のタグ設定

払い戻しを測定する

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: null });  // Clear the previous ecommerce object.
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: null });  // Clear the previous ecommerce object.
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: null });  // Clear the previous ecommerce object.
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: null });  // Clear the previous ecommerce object.
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 回のヒットで 2 つをまとめて測定することが可能です。

注: 1 回のヒットでは productFieldObjects の配列ごとに 1 つのアクションしか送信できません。ただし、同じヒットでインプレッションデータを送信することはできます。

次のサンプルコードは、商品の詳細を表示するアクションを、関連商品セクションの商品インプレッションとともに測定する方法を示しています。

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
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 コマース機能を有効にする] をオンにし、[マクロからデータを読み込む] を設定します。

この例のタグ設定

タグタイプ: ユニバーサルアナリティクス
トラッキングタイプ: ページビュー
拡張 e コマース機能を有効にする: true
マクロからデータを読み込む: {{gaEcommerceData}}
トリガー: event が gtm.dom と等しい

gaEcommerceData マクロ設定
マクロのタイプ: カスタム JavaScript
関数本体: 上記の例を参照

拡張 e コマース（UA）デベロッパー ガイド

概要

準備

拡張 e コマースを有効にする

データレイヤーを使用する

e コマース オブジェクトを消去する

商品インプレッションを測定する

商品クリックを測定する

商品の詳細の表示を測定する

ショッピング カートへの追加またはショッピング カートからの削除を測定する

ショッピング カートに商品を追加する

ショッピング カートから商品を削除する

プロモーションを測定する

プロモーションのインプレッションを測定する

プロモーションのクリックを測定する

決済を測定する

1. 決済ステップを測定する

2. 決済オプションを測定する

3. 決済目標到達プロセスの設定を行う

購入を測定する

払い戻しを測定する

商品スコープのカスタム ディメンションを渡す

商品スコープのカスタム指標を渡す

インプレッションとアクションを同時に測定する

カスタムの JavaScript マクロを使用する

拡張 e コマース（UA）デベロッパーガイド

e コマースオブジェクトを消去する

ショッピングカートへの追加またはショッピングカートからの削除を測定する

ショッピングカートに商品を追加する

ショッピングカートから商品を削除する

商品スコープのカスタムディメンションを渡す