태그 관리자용 향상된 전자상거래

이 가이드에서는 웹사이트에서 Google 태그 관리자를 사용하여 유니버설 애널리틱스 향상된 전자상거래 기능을 구현하는 방법을 설명합니다.

개요

Google 애널리틱스 향상된 전자상거래를 사용하면 제품 노출, 프로모션, 판매 데이터를 Google 애널리틱스 페이지 조회 및 이벤트와 함께 전송할 수 있습니다. 제품 노출수 및 제품 구매를 추적하려면 페이지 조회수를 사용하고, 결제 단계 및 제품 클릭수를 추적하려면 이벤트를 사용하세요.

시작하기 전에

구현을 계획하는 데 도움이 되도록 향상된 전자상거래 개발자 가이드향상된 전자상거래 데이터 유형 및 작업 섹션을 검토하는 것이 좋습니다. 이 가이드는 측정하려는 각 전자상거래 상호작용의 필수 필드와 선택적 필드를 파악하는 데 유용합니다.

향상된 전자상거래 사용 설정

대부분의 구현에서는 유니버설 애널리틱스 페이지 조회 또는 이벤트 태그마다 향상된 전자상거래를 사용 설정해야 합니다. 웹 인터페이스의 태그 편집기 화면에서 향상된 전자상거래를 사용 설정하는 방식에는 두 가지가 있습니다.

  • 데이터 영역을 사용하여 구현(권장)
  • 맞춤 자바스크립트 매크로를 사용하여 구현

두 방식 모두 동일한 전자상거래 기능을 제공하지만, 데이터 영역을 지원하는 모든 웹사이트의 경우 데이터 영역 방식을 사용하는 것이 좋습니다. 이 가이드에서는 데이터 영역 방식을 기본값으로 제시하지만, 이 가이드의 마지막에 맞춤 자바스크립트 매크로 사용에 대한 설명이 나와 있습니다.

데이터 영역 이용

다음 섹션에는 데이터 영역을 사용하여 다음과 같은 향상된 전자상거래 활동을 측정하는 방법이 나와 있습니다.

전자상거래 객체 삭제

전자상거래 이벤트를 데이터 영역에 푸시하기 전에 다음 명령어를 사용하여 전자상거래 객체를 삭제하는 것이 좋습니다. 객체를 삭제하면 페이지의 여러 전자상거래 이벤트가 서로 영향을 주지 않도록 방지할 수 있습니다.

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

제품 노출수 측정

  • 전자상거래 측정: impressions
  • 허용되는 데이터: impressionFieldObjects의 배열

impression 작업과 하나 이상의 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>

제품 클릭수 측정

  • 전자상거래 측정: 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>

제품 세부정보의 조회수 측정

  • 전자상거래 측정: detail
  • 허용되는 데이터: list, productFieldObjects의 배열

조회 중인 제품을 나타내는 하나 이상의 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>

장바구니에 추가 또는 장바구니에서 삭제한 횟수 측정

  • 전자상거래 측정: add, remove
  • 허용되는 데이터: list, productFieldObjects의 배열

마찬가지로 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
      }]
    }
  }
});

프로모션 측정

특정 제품 하위 집합에서 판매를 광고하는 사이트 자체에 표시되는 배너나 무료 배송 혜택과 같은 내부 사이트 프로모션의 노출수와 클릭수를 모두 측정할 수 있습니다.

프로모션 노출수 측정

  • 전자상거래 측정: promoView
  • 허용되는 데이터: promoFieldObjects의 배열

프로모션 노출수를 측정하려면 다음과 같이 전자상거래 데이터 영역 변수에서 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. 원하는 경우 웹 인터페이스의 관리 섹션에서 전자상거래 설정을 구성하여 결제 유입경로 보고서에 사용자 친화적인 단계 이름을 설정합니다.

1. 결제 단계 측정

  • 전자상거래 측정: checkout
  • 허용되는 데이터: step, productFieldObjects의 배열

결제 버튼과 더불어 사용자가 배송 및 결제 정보를 입력하는 하나 이상의 결제 페이지가 포함될 수 있는 결제 프로세스를 측정하려면, 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 결제 옵션 측정

  • 전자상거래 측정: checkout_option
  • 허용되는 데이터: step, option

결제 옵션은 이미 결제 단계를 측정했으나 동일한 결제 단계에 대해 추가 정보를 파악하려는 경우에 유용합니다. 예를 들어 사용자가 선택한 배송 방법이 있습니다. 이를 측정하려면 checkout_option 작업을 stepoption 필드와 함께 사용합니다.

<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 애널리틱스 웹 인터페이스의 관리 섹션으로 이동하여 보기(프로필)를 선택하고 전자상거래 설정을 클릭합니다. 전자상거래 설정 안내에 따라 추적할 각 결제 단계에 라벨을 지정합니다.

Google 애널리틱스 관리자 인터페이스의 전자상거래 설정 결제
         유입경로는 4단계, 즉 1. 장바구니 검토, 2. 결제 정보
         수집, 3. 구매 세부정보 확인, 4. 영수증으로 정의됩니다.
그림 1: 전자상거래 설정, 결제 유입경로

구매 측정

  • 전자상거래 측정: purchase
  • 허용되는 데이터: id(거래 ID), productFieldObjects의 배열

purchase 작업을 사용하여 거래 세부정보를 향상된 전자상거래가 사용 설정된 태그를 실행하는 event와 함께 데이터 영역에 푸시합니다. 이 예시에서는 페이지 로드 시 거래 세부정보가 알려져 있으며, 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>

환불 측정

  • 전자상거래 측정: refund
  • 허용되는 데이터: id(거래 ID), productFieldObjects의 배열

거래의 전액 환불을 측정하려면 다음과 같이 refund actionFieldObject를 환불 중인 거래의 거래 ID와 함께 푸시합니다.

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

제품 범위 맞춤 측정기준 전달

제품 범위 맞춤 측정기준을 전자상거래 객체에 전달하려면 다음 표기법을 사용하여 제품에 추가합니다.

  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>

제품 범위 맞춤 측정항목 전달

제품 범위 맞춤 측정항목을 전자상거래 객체에 전달하려면 다음 표기법을 사용하여 제품에 추가합니다.

  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>

노출수와 작업 결합

제품 노출수와 작업이 모두 있는 경우 단일 조회에서 이들을 결합하고 측정할 수 있습니다.

아래의 예시에는 관련 상품 섹션에서 제품 노출수를 사용하여 제품 세부정보 보기를 측정하는 방법이 나와 있습니다.

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

맞춤 자바스크립트 매크로 사용

웹사이트에서 데이터 영역을 지원하지 않는 경우, 맞춤 자바스크립트 매크로를 사용하여 전자상거래 데이터 객체를 반환하는 함수를 호출할 수 있습니다. 이 객체는 이 가이드의 앞부분에 제시된 데이터 영역 구문을 사용해야 하며, 예를 들면 다음과 같습니다.

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

데이터 영역 대신 맞춤 자바스크립트 매크로를 사용하는 경우 향상된 전자상거래 기능 사용 설정을 선택하고 매크로에서 데이터 읽기 옵션을 설정합니다.