注: このデベロッパー サイトは developers.google.com/tag-platform に移行中です。2021 年 9 月 30 日までに、リダイレクトが開始されます。

e コマース(GA4)デベロッパー ガイド

このガイドでは、ウェブサイトで Google タグ マネージャーを使用して Google アナリティクス 4(GA4)の e コマース機能を実装する方法を説明します。

GA4 e コマース機能を使うと、多くの推奨 e コマース イベントに商品リスト、インプレッション、プロモーション、販売データを付加して送信できます。

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

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

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

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

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

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

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

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

商品リストやアイテムリストの表示、インプレッションを測定する

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

// Measure product views / impressions
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
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_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "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_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Black",
       item_list_name: "Search Results",
       item_list_id: "SR123",
       index: 2,
       quantity: 1
     }]
  }
});

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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 onProductClick(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  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_category2: productObj.category_2,
        item_category3: productObj.category_3,
        item_category4: 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
      }]
    }
  });
}

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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({ ecommerce: null });  // Clear the previous ecommerce object.
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_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "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
    }]
  }
});

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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({ ecommerce: null });  // Clear the previous ecommerce object.
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_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      item_list_name: "Search Results",
      item_list_id: "SR123",
      index: 1,
      quantity: 2
    }]
  }
});

この例のタグ設定:

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

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

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

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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({ ecommerce: null });  // Clear the previous ecommerce object.
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_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "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
    }]
  }
});

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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({ ecommerce: null });  // Clear the previous ecommerce object.
  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_category2: productObj.category_2,
        item_category3: productObj.category_3,
        item_category4: 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
      }]
    }
  });
}

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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({ ecommerce: null });  // Clear the previous ecommerce object.
  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_category2: "Mens",
        item_category3: "Shirts",
        item_category4: "Tshirts",
        item_variant: "Black",
        item_list_name: "Search Results",
        item_list_id: "SR123",
        index: 1,
        quantity: 1
      }]
    }
  });
}

この例のタグ設定:

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

購入を測定する

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

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

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: purchase
  • データレイヤー変数(名前 - データレイヤー変数名):
    • e コマース アイテム - ecommerce.items
    • e コマース トランザクション ID - ecommerce.transaction_id
    • e コマースのアフィリエーション - ecommerce.affiliation
    • e コマースの値 - ecommerce.value
    • e コマースの税 - ecommerce.tax
    • e コマースの配送 - ecommerce.shipping
    • e コマースの通貨 - ecommerce.currency
    • e コマースのクーポン - ecommerce.coupon
  • イベント パラメータ(パラメータ名 - 値):
    • items - {{e コマースの商品}}
    • transaction_id - {{e コマース トランザクション ID}}
    • affiliation - {{e コマースのアフィリエーション}}
    • value - {{e コマースの値}}
    • tax - {{e コマースの税}}
    • shipping - {{e コマースの配送}}
    • currency - {{e コマースの通貨}}
    • coupon - {{e コマースのクーポン}}
  • トリガー: イベントが purchase と等しい

払い戻しを測定する

トランザクションの全額払い戻しを測定するには、払い戻し対象のトランザクション 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({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "refund",
  ecommerce: {
    transaction_id: "T12345" // Transaction ID. Required for purchases and refunds.
  }
});

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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({ ecommerce: null });  // Clear the previous ecommerce object.
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_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "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.
      }]
  }
});

この例のタグ設定:

  • タグタイプ: GA4 イベント
  • イベント名: 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 getEcommerceData() {
  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' パラメータからの値を指定することができます。

この例のタグ設定:

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

gaEcommerceData 変数の設定

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