e コマース(アプリ + ウェブ)デベロッパー ガイド

このガイドでは、Google タグ マネージャーを使用してウェブサイトにアプリ + ウェブの e コマース機能を実装する方法について説明します。

アプリ + ウェブの e コマースを使うと、商品リスト、インプレッション、プロモーション、売上データを複数の推奨される e コマース イベントと同時に送信できます。

管理画面のタグエディタ画面で e コマースを有効にする方法は次の 2 つです。

  1. データレイヤーを使用して実装する(推奨)
  2. カスタム JavaScript 変数を使用して実装する

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

以前の e コマース データレイヤー オブジェクトからの移行

すでに Google アナリティクスのウェブ プロパティで拡張 e コマースを実装していて、'impressions''products' などのデータレイヤー オブジェクトがある場合は、このドキュメントに示すように 'items' を参照する代わりに、それらを引き続き使用することができます。

商品 / アイテムリストの表示回数とインプレッションを測定する

アイテムリストの表示回数およびインプレッションを測定するには、アイテムリストをデータレイヤーに送信して、そのデータと一緒に view_item_list イベントを収集します。次の例は、ページに表示される商品についての詳細が、ページの読み込み時にわかっていることを前提としています。

// Measure product views / impressions
dataLayer.push({
  'event': 'view_item_list',
  'ecommerce': {
    'items': [
     {
       'item_name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'item_id': '12345',
       'price': '15.25',
       'item_brand': 'Google',
       'item_category': 'Apparel',
       'item_category_2': 'Mens',
       'item_category_3': 'Shirts',
       'item_category_4': 'Tshirts',
       'item_variant': 'Gray',
       'item_list_name': 'Search Results',
       'item_list_id': 'SR123',
       'index': 1,
       'quantity': '1'
     },
     {
       'item_name': 'Donut Friday Scented T-Shirt',
       'item_id': '67890',
       'price': '33.75',
       'item_brand': 'Google',
       'item_category': 'Apparel',
       'item_category_2': 'Mens',
       'item_category_3': 'Shirts',
       'item_category_4': 'Tshirts',
       'item_variant': 'Black',
       'item_list_name': 'Search Results',
       'item_list_id': 'SR123',
       'index': 2,
       'quantity': '1'
     }]
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: view_item_list
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が gtm.dom と等しい

商品 / アイテムリストのクリックを測定する

商品 / アイテムリストのクリックを測定するには、次の例のようにアイテムをデータレイヤーに送信し、クリックされた商品を表す select_item イベントを収集します。

/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object that represents the product that is clicked.
 */
function(productObj) {
  dataLayer.push({
    'event': 'select_item',
    'ecommerce': {
      'items': [{
        'item_name': productObj.name, // Name or ID is required.
        'item_id': productObj.id,
        'item_brand': productObj.brand,
        'item_category': productObj.category,
        'item_category_2': productObj.category_2,
        'item_category_3': productObj.category_3,
        'item_category_4': productObj.category_4,
        'item_variant': productObj.variant,
        'item_list_name': productObj.list_name,
        'item_list_id': productObj.list_id,
        'index': productObj.index,
        'quantity': productObj.quantity,
        'price': productObj.price
      }]
    }
  });
}

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: select_item
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が select_item と等しい

商品 / アイテムの詳細表示回数とインプレッションを測定する

商品の詳細表示の回数を測定するには、アイテムリストをデータレイヤーに送信し、そのデータとともに view_item イベントを収集します。この例では、ページに表示される商品についての詳細が、ページの読み込み時にわかっていることを前提としています。

// Measure a view of product details. This example assumes the detail view occurs on pageload,
dataLayer.push({
  'event': 'view_item',
  'ecommerce': {
    'items': [{
      'item_name': 'Donut Friday Scented T-Shirt', // Name or ID is required.
      'item_id': '67890',
      'price': '33.75',
      'item_brand': 'Google',
      'item_category': 'Apparel',
      'item_category_2': 'Mens',
      'item_category_3': 'Shirts',
      'item_category_4': 'Tshirts',
      'item_variant': 'Black',
      'item_list_name': 'Search Results',  // If associated with a list selection.
      'item_list_id': 'SR123',  // If associated with a list selection.
      'index': 1,  // If associated with a list selection.
      'quantity': '1'
    }]
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: view_item
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が gtm.dom と等しい

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

同様に、ショッピング カートへの追加またはショッピング カートからの削除を測定するために、追加されたアイテムや削除されたアイテムとともに add_to_cart または remove_from_cart イベントを収集することができます。

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

// Measure when a product is added to a shopping cart
dataLayer.push({
  'event': 'add_to_cart',
  'ecommerce': {
    'items': [{
      'item_name': 'Donut Friday Scented T-Shirt', // Name or ID is required.
      'item_id': '67890',
      'price': '33.75',
      'item_brand': 'Google',
      'item_category': 'Apparel',
      'item_category_2': 'Mens',
      'item_category_3': 'Shirts',
      'item_category_4': 'Tshirts',
      'item_variant': 'Black',
      'item_list_name': 'Search Results',
      'item_list_id': 'SR123',
      'index': 1,
      'quantity': '2'
    }]
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: add_to_cart
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が add_to_cart と等しい

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

// Measure the removal of a product from a shopping cart.
dataLayer.push({
  'event': 'remove_from_cart',
  'ecommerce': {
    'items': [{
      'item_name': 'Donut Friday Scented T-Shirt', // Name or ID is required.
      'item_id': '67890',
      'price': '33.75',
      'item_brand': 'Google',
      'item_category': 'Apparel',
      'item_variant': 'Black',
      'item_list_name': 'Search Results',  // If associated with a list selection.
      'item_list_id': 'SR123',  // If associated with a list selection.
      'index': 1,  // If associated with a list selection.
      'quantity': '1'
    }]
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: remove_from_cart
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が remove_from_cart と等しい

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

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

プロモーションの表示回数とインプレッションを測定する

商品の詳細表示の回数を測定するには、プロモーションの詳細をデータレイヤーに送信し、そのデータとともに view_promotion イベントを収集します。この例では、ページに表示される商品についての詳細が、ページの読み込み時にわかっていることを前提としています。

// Measure promotion views. This example assumes that information about the
// promotions displayed is available when the page loads.
dataLayer.push({
  'event': 'view_promotion',
  'ecommerce': {
    'items': [{
      'item_name': 'Donut Friday Scented T-Shirt', // Name or ID is required.
      'item_id': '67890',
      'price': '33.75',
      'item_brand': 'Google',
      'item_category': 'Apparel',
      'item_category_2': 'Mens',
      'item_category_3': 'Shirts',
      'item_category_4': 'Tshirts',
      'item_variant': 'Black',
      'promotion_id': 'abc123',
      'promotion_name': 'summer_promo',
      'creative_name': 'instore_suummer',
      'creative_slot': '1',
      'location_id': 'hero_banner',
      'index': 1,
      'quantity': '1'
    }]
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: view_promotion
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が gtm.dom と等しい

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

プロモーションのクリックを測定するには、プロモーションが関連付けられているアイテムの配列とともに select_promotion イベントを収集します。

/**
 * Call this function when a user clicks on a promotion.
 * @param {Object} promoObj An object that represents an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({
    'event': 'select_promotion',
    'ecommerce': {
      'items': [{
        'item_name': promoObj.name, // Name or ID is required.
        'item_id': promoObj.id,
        'item_brand': promoObj.brand,
        'item_category': promoObj.category,
        'item_category_2': productObj.category_2,
        'item_category_3': productObj.category_3,
        'item_category_4': productObj.category_4,
        'item_variant': promoObj.variant,
        'promotion_id': promoObj.pid,
        'promotion_name': promoObj.pname,
        'creative_name': promoObj.pcreative_name,
        'creative_slot': promoObj.pcreative_slot,
        'location_id': promoObj.plocation,
        'index': promoObj.index,
        'quantity': promoObj.quantity,
        'price': promoObj.price
      }]
    }
  });
}

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: select_promotion
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が select_promotion と等しい

決済を測定する

決済を測定するには、商品の詳細をデータレイヤーに送信して、そのデータとともに begin_checkout イベントを収集します。

/**
 * A function to handle a click on a checkout button.
 */
function onCheckout() {
  dataLayer.push({
    'event': 'begin_checkout',
    'ecommerce': {
      'items': [{
        'item_name': 'Donut Friday Scented T-Shirt', // Name or ID is required.
        'item_id': '67890',
        'price': '33.75',
        'item_brand': 'Google',
        'item_category': 'Apparel',
        'item_category_2': 'Mens',
        'item_category_3': 'Shirts',
        'item_category_4': 'Tshirts',
        'item_variant': 'Black',
        'item_list_name': 'Search Results',
        'item_list_id': 'SR123',
        'index': 1,
        'quantity': '1'
      }]
    }
  });
}

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: begin_checkout
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が begin_checkout と等しい

購入を測定する

トランザクションを測定するには、アイテムリストをデータレイヤーに送信して、そのデータとともに purchase イベントを収集します。この例では、ページに表示される商品についての詳細が、ページの読み込み時にわかっていることを前提としています。

dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'purchase': {
      'transaction_id': 'T12345',
      'affiliation': 'Online Store',
      'value': '35.43',
      'tax': '4.90',
      'shipping': '5.99',
      'currency': 'EUR',
      'coupon': 'SUMMER_SALE',
      'items': [{
        'item_name': 'Triblend Android T-Shirt',
        'item_id': '12345',
        'item_price': '15.25',
        'item_brand': 'Google',
        'item_category': 'Apparel',
        'item_variant': 'Gray',
        'quantity': 1,
        'item_coupon': ''
      }, {
        'item_name': 'Donut Friday Scented T-Shirt',
        'item_id': '67890',
        'item_price': '33.75',
        'item_brand': 'Google',
        'item_category': 'Apparel',
        'item_variant': 'Black',
        'quantity': 1
      }]
    }
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: purchase
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が gtm.dom と等しい

払い戻しを測定する

トランザクションの全額払い戻しを測定するには、払い戻し対象のトランザクション ID とともに refund イベントを収集します。

// To refund an entire transaction, provide the transaction ID.
// This example assumes the details of the completed refund are
// available when the page loads:
dataLayer.push({
  'event': 'refund',
  'ecommerce': {
    'transaction_id': 'T12345' // Transaction ID. Required for purchases and refunds.
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: refund
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が gtm.dom と等しい

一部払い戻しを測定するには、払い戻し対象の ID と数量を含む items のリストを追加します。

// To measure a partial refund, provide an array of productFieldObjects and
// specify the ID and quantity of each product to be returned. This example
// assumes the partial refund details are known at the time the page loads:
dataLayer.push({
  'event': 'refund',
  'ecommerce': {
      'transaction_id': 'T12345', // Transaction ID.
      'items': [{
       'item_name': 'Donut Friday Scented T-Shirt',
       'item_id': '67890', // ID is required.
       'price': '33.75',
       'item_brand': 'Google',
       'item_category': 'Apparel',
       'item_category_2': 'Mens',
       'item_category_3': 'Shirts',
       'item_category_4': 'Tshirts',
       'item_variant': 'Black',
       'item_list_name': 'Search Results', // If associated with a list selection.
       'item_list_id': 'SR123', // If associated with a list selection.
       'index': 1, // If associated with a list selection.
       'quantity': '1' // Quantity is required.
      }]
  }
});

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: refund
  • イベント パラメータ(名前 - 値): 'items' - {{Ecommerce Items}}
  • 変数タイプ: データレイヤー変数 - 'ecommerce.items'
  • トリガー: event が gtm.dom と等しい

カスタム JavaScript 変数を使用する

ウェブサイトでデータレイヤーがサポートされていない場合は、カスタム JavaScript 変数を使用して、e コマースデータ オブジェクトを返す関数を呼び出すことができます。このオブジェクトでは、このガイドの前半に示したデータレイヤーの構文を使用する必要があります。次に例を示します。

// A Custom JavaScript Variable that returns an ecommerceData object
// that follows the data layer syntax.
function() {
  var ecommerceProductData = [
    {
      'item_name': 'Donut Friday Scented T-Shirt',
      'item_id': '67890',  // ID is required.
      // Rest of the product data should follow the data layer syntax.
    },
    // Multiple products may be included.
  ];
  return ecommerceProductData;
}

カスタム JavaScript 変数を使用する場合は、データレイヤーと同じ方法で使用できます。タグ設定内のイベント パラメータには、'items' パラメータからの値を指定することができます。

この例のタグ設定:

  • タグタイプ: アプリ + ウェブイベント
  • イベント名: any
  • 変数のデータを読む: {{gaEcommerceData}}
  • トリガー: event が gtm.dom と等しい

gaEcommerceData 変数の設定

  • 変数の種類: カスタム JavaScript
  • 関数本体: 上記の例を使用