전자상거래

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

전자상거래 보고서는 사용자의 쇼핑 행동에 대한 인사이트를 제공하므로, 가장 인기 있는 제품을 수치화하고 프로모션 및 간접 광고가 수익에 미치는 영향을 확인할 수 있습니다. 이벤트를 올바르게 설정하면 일반적인 전환 경로를 측정하고 더 나은 고객 환경을 선별할 수 있습니다.

이 도움말에서는 추천 온라인 판매 이벤트를 구현하고 이벤트 데이터를 보고하는 방법을 설명합니다. 다음 리소스를 사용하여 전자상거래 이벤트 데이터를 확인할 수 있습니다.

Firebase를 통해 전자상거래 모바일 앱을 구현하는 방법을 자세히 알아보려면 전자상거래 측정을 참고하세요.

시작하기 전에

웹사이트에 Google 애널리틱스: GA4 구성 태그를 추가했으며 애널리틱스 및 웹사이트 소스 코드에 액세스할 수 있는지 확인하세요.

권장사항

  • 디버그 모드를 사용 설정하여 실시간으로 이벤트를 확인하고 보다 손쉽게 문제를 해결하세요.
  • 전자상거래 이벤트와 함께 맞춤 매개변수를 전송할 때 맞춤 측정기준 및 측정항목 한도를 검토하세요.
  • 수익 측정항목을 올바르게 계산할 수 있도록 value(수익) 데이터를 전송할 때 currency를 설정하세요.
  • 매개변수가 선택사항인지 여부와 관계없이 데이터가 있는 각 전자상거래 매개변수를 설정하세요.
  • 샘플 전자상거래 웹사이트를 사용하여 웹사이트에 태그를 추가하는 방법의 예시를 확인하세요.

구현

상품의 배열을 포함하여 제품과 이벤트를 연결합니다. items 배열에는 최대 200개의 요소가 포함될 수 있습니다.

items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    },
    {
      item_id: "SKU_12346",
      item_name: "Google Grey Women's Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 3.33,
      index: 1,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "gray",
      location_id: "L_12345",
      price: 20.99,
      quantity: 1
    }
]

위의 매개변수로 Google 애널리틱스에서 다음 측정기준을 채울 수 있습니다.

측정기준
상품 ID SKU_12345
상품 이름 Stan and Friends Tee
상품 목록 위치 0
상품 브랜드 Google Merchandise Store
상품 카테고리 Apparel
상품 카테고리 2 Adult
상품 카테고리 3 Shirts
상품 카테고리 4 Crew
상품 카테고리 5 Short sleeve
상품 목록 ID related_products
상품 목록 이름 Related Products
상품 위치 ID L_12345

기존 전자상거래 데이터 영역 객체에서 이전

이전에 Google 애널리틱스 웹 서비스에 향상된 전자상거래를 구현했고 'impressions', 'products' 등의 데이터 영역 객체가 있는 개발자는 이 문서에서 설명한 것과 같이 'items'에 대한 참조 대신 데이터 영역 객체를 계속 사용할 수 있습니다.

전자상거래 객체 삭제

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

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

제품 조회수 및 상호작용

제품 조회수 및 상호작용을 측정하면 사용자에게 제품이 표시되는 빈도, 사용자가 제품을 조회하는 빈도, 선택하는 빈도에 대한 인사이트를 확보할 수 있습니다. 이러한 이벤트를 프로모션 데이터와 함께 사용하면 캠페인의 효과를 측정할 수 있습니다.

상품 목록 보기

사용자에게 상품 목록이 표시되면 표시된 상품이 포함된 items 배열 매개변수와 함께 view_item_list 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

관련 상품 목록에 있는 작은 셔츠 컬렉션이 사용자에게 표시됩니다. 사용자에게 셔츠가 표시된 페이지에서 개발자는 사용자가 페이지를 열면 다음 스니펫이 트리거되도록 자바스크립트에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: view_item_list
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 view_item_list와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item_list",
  ecommerce: {
    items: [
     {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    },
    {
      item_id: "SKU_12346",
      item_name: "Google Grey Women's Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 3.33,
      index: 1,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "gray",
      location_id: "L_12345",
      price: 20.99,
      promotion_id: "P_12345",
      promotion_name: "Summer Sale",
      quantity: 1
    }]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 상품 목록 조회수 측정항목을 1씩 올립니다.

상품 보기

사용자에게 제품이 표시되면, 표시된 상품이 포함된 items 배열 매개변수와 함께 view_item 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee 페이지를 방문합니다. 사용자에게 셔츠가 표시된 페이지에서 개발자는 사용자가 페이지를 열면 다음 스니펫이 트리거되도록 자바스크립트에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: view_item
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 view_item과 같음
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item",
  ecommerce: {
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 상품 조회수 측정항목을 1씩 올립니다.

상품 선택

사용자가 목록에서 상품을 선택하면, 선택된 상품을 포함하는 items 배열 매개변수와 함께 select_item 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

사용자가 목록에서 상품을 선택하면, 선택된 상품을 포함하는 items 배열 매개변수와 함께 select_item 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은이벤트 참조를 참고하세요.

예시

사용자가 관련 상품 목록에서 링크를 클릭하여 Stan and Friends Tee 페이지로 이동합니다. 사용자가 제품을 선택하는 페이지에서, 개발자는 사용자가 제품 페이지를 열 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: select_item
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 select_item과 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "select_item",
  ecommerce: {
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

내부 프로모션

내부 프로모션은 사이트의 한 부분을 다른 부분에서 광고하는 방식입니다. 예를 들어 셔츠를 5% 할인한다고 광고하는 배너를 홈페이지에 게재할 수 있습니다. 프로모션 조회수와 클릭수를 사용하여 프로모션으로 시작된 구매에 기여도를 부여할 수 있습니다.

프로모션 보기

사용자에게 프로모션이 표시될 때 프로모션 상품이 포함된 items 배열 매개변수와 함께 view_promotion 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee 프로모션을 광고하는 배너를 조회합니다. 사용자에게 프로모션이 표시되는 페이지에서, 개발자는 사용자가 페이지를 방문할 때 다음 스니펫이 트리거되도록 자바스크립트에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: view_promotion
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 view_promotion과 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_promotion",
  ecommerce: {
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 상품 프로모션 조회수 측정항목을 1씩 올립니다.

프로모션 선택

사용자가 프로모션을 클릭하면 프로모션과 연결된 선택한 상품이 포함된 items 배열 매개변수와 함께 select_promotion 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee 프로모션을 클릭합니다. 사용자에게 프로모션이 표시되는 페이지에서, 개발자는 사용자가 프로모션을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: select_promotion
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 select_promotion과 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "select_promotion",
  ecommerce: {
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 상품 프로모션 클릭수 측정항목을 1씩 올립니다.

장바구니 상호작용

이러한 이벤트를 통해 개발자는 사용자가 판매 제품에 대한 관심을 보이는 빈도를 측정할 수 있습니다.

장바구니에 추가

사용자가 장바구니에 상품을 추가할 때 장바구니에 추가한 상품을 포함하는 items 배열 매개변수와 함께 add_to_cart 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee의 '장바구니에 추가' 버튼을 클릭합니다. 제품 페이지에서, 개발자는 사용자가 버튼을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: add_to_cart
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 add_to_cart와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 다음 측정항목을 업데이트합니다.

  • 장바구니에 추가 측정항목이 1씩 증가
  • 조회수 대비 장바구니 추가 비율 측정항목의 분자가 1씩 증가

위시리스트에 추가

사용자가 위시리스트에 상품을 추가할 때 위시리스트에 추가한 상품을 포함하는 items 배열 매개변수와 함께 add_to_wishlist 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee의 '위시리스트에 추가' 버튼을 클릭합니다. 제품 페이지에서, 개발자는 사용자가 버튼을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: add_to_wishlist
  • 데이터 영역 변수(이름 - 데이터 영역 변수 이름):
    • 전자상거래 상품 - ecommerce.items
    • 전자상거래 값 - ecommerce.value
    • 전자상거래 통화 - ecommerce.currency
  • 이벤트 매개변수(매개변수 이름 - 값):
    • items - {{Item E-commerce}}
    • value - {{Ecommerce Value}}
    • currency - {{Ecommerce Currency}}
  • 트리거: 이벤트가 add_to_wishlist와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_to_wishlist",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

장바구니에서 삭제

사용자가 장바구니에서 상품을 삭제할 때 삭제한 상품이 포함된 items 배열 매개변수와 함께 remove_from_cart 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee의 '장바구니에서 삭제' 버튼을 클릭합니다. 장바구니 페이지에서, 개발자는 사용자가 버튼을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: remove_from_cart
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 remove_from_cart와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

장바구니 보기

사용자가 장바구니를 조회할 때 장바구니에 있는 상품을 포함하는 items 배열 매개변수와 함께 view_cart 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Stan and Friends Tee가 담긴 장바구니를 조회합니다. 장바구니 페이지에서, 개발자는 사용자가 페이지에 방문했을 때 다음 스니펫이 트리거되도록 자바스크립트에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: view_cart
  • 데이터 영역 변수(이름 - 데이터 영역 변수 이름):
    • 전자상거래 상품 - ecommerce.items
    • 전자상거래 값 - ecommerce.value
    • 전자상거래 통화 - ecommerce.currency
  • 이벤트 매개변수(매개변수 이름 - 값):
    • items - {{Item E-commerce}}
    • value - {{Ecommerce Value}}
    • currency - {{Ecommerce Currency}}
  • 트리거: 이벤트가 view_cart와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_cart",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 조회수 대비 장바구니 추가 비율 측정항목의 분모를 1씩 올립니다.

결제 유입경로

결제 유입경로에는 결제 프로세스 시작부터 제품 구매까지의 단계가 포함됩니다. 유입경로 탐색 분석을 생성하여 결제 유입경로의 각 단계와 각 단계를 완료한 사용자 수를 시각화할 수 있습니다.

결제 시작

사용자가 결제 프로세스를 시작할 때 장바구니에 있는 상품이 포함된 items 배열 매개변수와 함께 begin_checkout 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee를 구매하기 위해 결제 프로세스(예: '결제' 버튼 클릭)를 시작합니다. 사용자가 결제를 시작하는 페이지(예: 장바구니 페이지)에서, 개발자는 사용자가 결제를 시작하기 위해 버튼을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: begin_checkout
  • 이벤트 매개변수(이름 - 값): 'items' - {{Ecommerce Items}}
  • 변수 유형: 데이터 영역 변수 - 'ecommerce.items'
  • 트리거: 이벤트가 begin_checkout과 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 결제 측정항목을 1씩 올립니다.

결제 정보 추가

사용자가 결제 중에 결제 정보를 추가할 때 사용자가 구매하려는 상품이 포함된 items 배열 매개변수와 함께 add_payment_info 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee를 구매하기 위해 신용카드 정보를 추가합니다. 사용자가 결제 정보를 추가하는 페이지에서, 개발자는 사용자가 결제 정보를 추가하기 위해 버튼을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: add_payment_info
  • 데이터 영역 변수(이름 - 데이터 영역 변수 이름):
    • 전자상거래 상품 - ecommerce.items
    • 전자상거래 값 - ecommerce.value
    • 전자상거래 통화 - ecommerce.currency
    • 전자상거래 쿠폰 - ecommerce.coupon
    • 전자상거래 결제 방식 - ecommerce.payment_type
  • 이벤트 매개변수(매개변수 이름 - 값):
    • items - {{Ecommerce Items}}
    • value - {{Ecommerce Value}}
    • currency - {{Ecommerce Currency}}
    • coupon - {{Ecommerce Coupon}}
    • payment_type - {{Ecommerce Payment Type}}
  • 트리거: 이벤트가 add_payment_info와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_payment_info",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    coupon: "SUMMER_FUN",
    payment_type: "Credit Card",
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

배송 정보 추가

사용자가 결제 중에 배송 정보를 추가할 때 사용자가 구매하려는 상품이 포함된 items 배열 매개변수와 함께 add_shipping_info 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee를 구매하기 위해 배송 정보를 추가합니다. 사용자가 배송 정보를 추가하는 페이지에서, 개발자는 사용자가 배송 정보를 추가하기 위해 버튼을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: add_shipping_info
  • 데이터 영역 변수(이름 - 데이터 영역 변수 이름):
    • 전자상거래 상품 - ecommerce.items
    • 전자상거래 값 - ecommerce.value
    • 전자상거래 통화 - ecommerce.currency
    • 전자상거래 쿠폰 - ecommerce.coupon
    • 전자상거래 배송 등급 - ecommerce.shipping_tier
  • 이벤트 매개변수(매개변수 이름 - 값):
    • items - {{Ecommerce Items}}
    • value - {{Ecommerce Value}}
    • currency - {{Ecommerce Currency}}
    • coupon - {{Ecommerce Coupon}}
    • shipping_tier - {{Ecommerce Shipping Tier}}
  • 트리거: 이벤트가 add_shipping_info와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_shipping_info",
  ecommerce: {
    currency: "USD",
    value: 7.77,
    coupon: "SUMMER_FUN",
    shipping_tier: "Ground",
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

Ground를 보려면 shipping_tier 이벤트 매개변수를 사용하여 맞춤 측정기준을 만들어야 합니다.

구매

사용자가 버튼을 클릭하거나 확인 페이지를 방문하여 결제 프로세스를 완료할 때 사용자가 구매하는 상품이 포함된 items 배열 매개변수와 함께 purchase 이벤트를 전송합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

예시

사용자가 Google Merchandise Store에서 Stan and Friends Tee를 구매합니다. 사용자가 클릭하여 구매하는 페이지에서, 개발자는 사용자가 버튼을 클릭할 때 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: purchase
  • 데이터 영역 변수(이름 - 데이터 영역 변수 이름):
    • 전자상거래 상품 - ecommerce.items
    • 전자상거래 거래 ID - ecommerce.transaction_id
    • 전자상거래 제휴 - ecommerce.affiliation
    • 전자상거래 값 - ecommerce.value
    • 전자상거래 세금 - ecommerce.tax
    • 전자상거래 배송 - ecommerce.shipping
    • 전자상거래 통화 - ecommerce.currency
    • 전자상거래 쿠폰 - ecommerce.coupon
  • 이벤트 매개변수(매개변수 이름 - 값):
    • items - {{Ecommerce Items}}
    • transaction_id - {{Ecommerce Transaction ID}}
    • affiliation - {{Ecommerce Affiliation}}
    • value - {{Ecommerce Value}}
    • tax - {{Ecommerce Tax}}
    • shipping - {{Ecommerce Shipping}}
    • currency - {{Ecommerce Currency}}
    • coupon - {{Ecommerce Coupon}}
  • 트리거: 이벤트가 purchase와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T_12345",
      affiliation: "Google Merchandise Store",
      value: 36.32,
      tax: 4.90,
      shipping: 5.99,
      currency: "USD",
      coupon: "SUMMER_SALE",
      items: [
       {
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        currency: "USD",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "green",
        location_id: "L_12345",
        price: 9.99,
        quantity: 1
      },
      {
        item_id: "SKU_12346",
        item_name: "Google Grey Women's Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        currency: "USD",
        discount: 3.33,
        index: 1,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "gray",
        location_id: "L_12345",
        price: 20.99,
        promotion_id: "P_12345",
        promotion_name: "Summer Sale",
        quantity: 1
      }]
  }
});

애널리틱스에서는 이벤트가 트리거될 때마다 다음 측정항목을 업데이트합니다.

  • 구매 수익총 수익 측정항목이 미화 48달러씩 증가합니다.
  • 조회수 대비 구매 비율 측정항목의 분자가 1씩 증가합니다.
  • 수량전자상거래 구매 측정항목이 1씩 증가합니다.

환불

사용자에게 환불되면 사용자에게 환불된 상품을 포함하는 items 배열 매개변수와 함께 refund 이벤트를 전송합니다. 구매한 상품 중 일부가 환불되면 부분 환불 처리할 수 있으며, 구매한 모든 상품이 환불되면 전액 환불 처리할 수 있습니다. 전액 환불 처리하려면 items 배열을 제외합니다. 전송할 매개변수에 대한 자세한 내용은 이벤트 참조를 참고하세요.

부분 환불 예시

Google Navy Polo의 환불 처리 시점을 측정하려고 합니다. 환불을 처리하는 페이지에서, 개발자는 버튼을 클릭하여 환불을 처리하면 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: refund
  • 데이터 영역 변수(이름 - 데이터 영역 변수 이름):
    • 전자상거래 상품 - ecommerce.items
    • 전자상거래 거래 ID - ecommerce.transaction_id
    • 전자상거래 제휴 - ecommerce.affiliation
    • 전자상거래 값 - ecommerce.value
    • 전자상거래 세금 - ecommerce.tax
    • 전자상거래 배송 - ecommerce.shipping
    • 전자상거래 통화 - ecommerce.currency
    • 전자상거래 쿠폰 - ecommerce.coupon
  • 이벤트 매개변수(매개변수 이름 - 값):
    • items - {{Ecommerce Items}}
    • transaction_id - {{Ecommerce Transaction ID}}
    • affiliation - {{Ecommerce Affiliation}}
    • value - {{Ecommerce Value}}
    • tax - {{Ecommerce Tax}}
    • shipping - {{Ecommerce Shipping}}
    • currency - {{Ecommerce Currency}}
    • coupon - {{Ecommerce Coupon}}
  • 트리거: 이벤트가 refund와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "refund",
  ecommerce: {
    currency: "USD",
    transaction_id: "T_12345",
    value: 12.21,
    affiliation: "Google Merchandise Store",
    coupon: "SUMMER_FUN",
    shipping: 3.33,
    tax: 1.11,
    items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
    ]
  }
});

전액 환불 예시

사용자의 모든 최근 구매에 대해 환불 처리 시점을 측정하려고 합니다. 환불을 처리하는 페이지에서, 개발자는 버튼을 클릭하여 환불을 처리하면 다음 스니펫이 트리거되도록 자바스크립트의 이벤트 리스너에 이러한 스니펫을 추가할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: refund
  • 데이터 영역 변수(이름 - 데이터 영역 변수 이름):
    • 전자상거래 거래 ID - ecommerce.transaction_id
  • 이벤트 매개변수(매개변수 이름 - 값):
    • transaction_id - {{Ecommerce Transaction ID}}
  • 트리거: 이벤트가 refund와 일치
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "refund",
  ecommerce: {
    transaction_id: "T12345" // Transaction ID. Required for purchases and refunds.
  }
});

맞춤 자바스크립트 변수 사용

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

// A Custom JavaScript Variable that returns an ecommerceData object
// that follows the data layer syntax.
function getEcommerceData() {
  var ecommerceProductData = [
    {
      item_name: "Stan and Friends Tee",
      item_id: "SKU_12345",  // ID is required.
      // Rest of the product data should follow the data layer syntax.
    },
    // Multiple products may be included.
  ];
  return ecommerceProductData;
}

맞춤 자바스크립트 변수를 대신 사용하는 경우, 데이터 영역과 동일한 방식으로 사용할 수 있습니다. 즉, 'items' 매개변수의 값을 태그 구성의 이벤트 매개변수로 제공할 수 있습니다.

이 예시의 태그는 다음과 같이 구성되어 있습니다.

  • 태그 유형: GA4 이벤트
  • 이벤트 이름: 임의
  • 변수에서 데이터 읽기: {{gaEcommerceData}}
  • 트리거: 이벤트가 gtm.dom과 일치

gaEcommerceData 변수 설정

  • 변수 유형: 맞춤 자바스크립트
  • 함수 본문: 위의 예시 사용