タグ マネージャーの拡張 e コマース

このガイドでは、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 コマース測定: click
  • 使用可能データ: listproductFieldObjects の配列

商品リンクのクリックを測定するには、次の例のように、クリックされた商品を表す 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>

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

  • e コマース測定: detail
  • 使用可能データ: listproductFieldObjects の配列

商品の詳細の表示を測定するには、表示されている商品を表す 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 コマース測定: addremove
  • 使用可能データ: listproductFieldObjects の配列

同様に、add または remove actionFieldObjectproductFieldObjects のリストを使用して、ショッピング カートへの追加またはショッピング カートからの削除を測定することができます。

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

// 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
       }]
    }
  }
});

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

// 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
      }]
    }
  }
});

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

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

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

  • 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>

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

プロモーションのクリックを測定するには、クリックされたプロモーションを表す 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>

決済を測定する

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

  1. checkout アクションを使用して、決済プロセスの各ステップを測定します。
  2. 必要に応じて、checkout_option アクションを使用して決済オプションを測定します。
  3. (省略可)管理画面の [アナリティクス設定] にある [e コマースの設定] で、決済の目標到達プロセス レポートに表示するわかりやすいステップ名を設定します。

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

  • e コマース測定: checkout
  • 使用可能データ: stepproductFieldObjects の配列

購入手続きボタンと 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>

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

  • e コマース測定: checkout_option
  • 使用可能データ: stepoption

決済オプションを使用すると、決済ステップを測定した後で、そのステップに関する追加情報(たとえば、ユーザーが選択した配送方法の情報)を取得できます。 決済オプションを測定するには、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>

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>

払い戻しを測定する

  • 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 つをまとめて測定することが可能です。

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

<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 コマース機能を有効にする] をオンにし、[マクロからデータを読み込む] を設定します。