Hướng dẫn này mô tả cách triển khai các tính năng Thương mại điện tử nâng cao của Universal Analytics bằng Trình quản lý thẻ của Google trên trang web.
Tổng quan
Tính năng Thương mại điện tử nâng cao của Google Analytics cho phép gửi dữ liệu về lượt hiển thị sản phẩm, chương trình khuyến mãi và doanh số cùng với bất kỳ lượt xem trang và sự kiện nào của bạn trên Google Analytics. Sử dụng số lượt xem trang để theo dõi số lượt hiển thị sản phẩm và số lượt mua sản phẩm; đồng thời sử dụng sự kiện để theo dõi các bước thanh toán và số lượt nhấp vào sản phẩm.
Trước khi bạn bắt đầu
Bạn nên xem lại mục Các hành động và loại dữ liệu thương mại điện tử nâng cao trong Hướng dẫn cho nhà phát triển về thương mại điện tử nâng cao để lập kế hoạch triển khai. Hướng dẫn này sẽ giúp bạn hiểu được trường nào là bắt buộc và không bắt buộc cho từng lượt tương tác thương mại điện tử mà bạn muốn đo lường.
Bật tính năng Thương mại điện tử nâng cao
Trong hầu hết các phương pháp triển khai, bạn nên bật tính năng Thương mại điện tử nâng cao trên mỗi lượt xem trang hoặc thẻ sự kiện Universal Analytics. Bạn có hai tùy chọn để bật tính năng Thương mại điện tử nâng cao trong màn hình trình chỉnh sửa thẻ của giao diện web:
- Triển khai bằng cách sử dụng Lớp dữ liệu (Nên dùng)
- Triển khai bằng Macro JavaScript tuỳ chỉnh
Mặc dù cả hai phương thức này đều cung cấp chức năng thương mại điện tử tương đương, nhưng tất cả trang web hỗ trợ lớp dữ liệu nên sử dụng phương thức Lớp dữ liệu. Hướng dẫn này trình bày phương thức Lớp dữ liệu dưới dạng mặc định, trong khi bài viết Sử dụng Macro JavaScript tuỳ chỉnh được ghi lại ở cuối hướng dẫn này.
Sử dụng lớp dữ liệu
Các phần sau đây sẽ hướng dẫn bạn cách sử dụng lớp dữ liệu để đo lường các hoạt động thương mại điện tử nâng cao sau đây:
- Số lượt hiển thị sản phẩm
- Số lượt nhấp vào sản phẩm
- Số lượt hiển thị chi tiết sản phẩm
- Thêm / Xoá khỏi giỏ hàng
- Số lượt hiển thị quảng cáo
- Số lượt nhấp vào quảng cáo
- Thanh toán
- Mua hàng
- Hoàn tiền
Xoá đối tượng thương mại điện tử
Bạn nên dùng lệnh sau để xoá đối tượng thương mại điện tử trước khi đẩy một sự kiện thương mại điện tử vào lớp dữ liệu. Việc xoá đối tượng sẽ ngăn nhiều sự kiện thương mại điện tử trên một trang ảnh hưởng đến nhau.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
Đo lường số lượt hiển thị sản phẩm
- Đo lường thương mại điện tử:
impressions - Chấp nhận dữ liệu: mảng của
impressionFieldObjects
Đo lường số lượt hiển thị sản phẩm bằng cách sử dụng thao tác impression và một hoặc nhiều
impressionFieldObjects. Ví dụ sau đây giả định các thông tin chi tiết về sản phẩm xuất hiện trên một trang được xác định tại thời điểm tải trang:
<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>
Đo lường lượt nhấp vào sản phẩm
- Đo lường thương mại điện tử:
click - Chấp nhận dữ liệu:
list, mảngproductFieldObjects
Đo lường số lượt nhấp vào đường liên kết sản phẩm bằng cách đẩy một thao tác click vào lớp dữ liệu, cùng với productFieldObject để biểu thị sản phẩm được nhấp, như trong ví dụ sau:
<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>
Đo lường số lượt xem chi tiết sản phẩm
- Đo lường thương mại điện tử:
detail - Chấp nhận dữ liệu:
list, mảngproductFieldObjects
Đo lường chế độ xem chi tiết sản phẩm bằng cách đẩy hành động detail vào lớp dữ liệu,
cùng với một hoặc nhiều productFieldObjects đại diện cho sản phẩm đang được xem:
<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>
Đo lường lượt thêm vào hoặc xoá khỏi giỏ hàng
- Đo lường thương mại điện tử:
add,remove - Chấp nhận dữ liệu:
list, mảngproductFieldObjects
Tương tự, bạn có thể đo lường những lượt thêm hoặc lượt xoá khỏi giỏ hàng bằng cách sử dụng add hoặc remove actionFieldObject và danh sách productFieldObjects:
Thêm sản phẩm vào giỏ hàng
// 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
}]
}
}
});
Xoá sản phẩm khỏi giỏ hàng
// 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
}]
}
}
});
Đo lường quảng cáo
Bạn có thể đo lường cả lượt hiển thị và lượt nhấp vào chương trình khuyến mãi nội bộ trên trang web, chẳng hạn như biểu ngữ hiển thị trên chính trang web đang quảng cáo chương trình giảm giá cho một số sản phẩm cụ thể hoặc ưu đãi vận chuyển miễn phí.
Đo lường số lượt hiển thị quảng cáo
- Đo lường thương mại điện tử:
promoView - Chấp nhận dữ liệu: mảng của
promoFieldObjects
Để đo lường một lượt hiển thị chương trình khuyến mãi, hãy đặt khoá promoView trong var lớp dữ liệu thương mại điện tử của bạn thành promoFieldObject mô tả các chương trình khuyến mãi được hiển thị cho người dùng trên trang:
<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>
Đo lường số lượt nhấp vào quảng cáo
Để đo lường lượt nhấp vào chương trình khuyến mãi, hãy đẩy hành động promoClick vào lớp dữ liệu bằng một mảng chứa promoFieldObject mô tả chương trình khuyến mãi được nhấp:
<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>
Đo lường quy trình thanh toán
Để đo lường từng bước trong quy trình thanh toán, bạn cần:
- Đo lường từng bước của quy trình thanh toán bằng cách sử dụng thao tác
checkout. - Nếu có thể, hãy đo lường các lựa chọn thanh toán bằng thao tác
checkout_option. - (Không bắt buộc) Đặt tên bước thân thiện với người dùng cho báo cáo phễu thanh toán bằng cách định cấu hình Cài đặt thương mại điện tử trong mục Quản trị của giao diện web.
1. Đo lường các bước thanh toán
- Đo lường thương mại điện tử:
checkout - Chấp nhận dữ liệu:
step, mảngproductFieldObjects
Để đo lường quy trình thanh toán (có thể bao gồm nút thanh toán và một hoặc nhiều trang thanh toán nơi người dùng nhập thông tin vận chuyển và thanh toán), hãy sử dụng thao tác checkout và trường step để cho biết giai đoạn nào của quy trình thanh toán đang được đo lường.
Bạn cũng có thể sử dụng trường option để cung cấp một phần dữ liệu bổ sung về trang, chẳng hạn như hình thức thanh toán mà người dùng đã chọn.
<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. Đo lường các tuỳ chọn thanh toán
- Đo lường thương mại điện tử:
checkout_option - Chấp nhận dữ liệu:
step,option
Tuỳ chọn thanh toán sẽ hữu ích trong trường hợp bạn đã đo lường
một bước thanh toán nhưng muốn thu thập thêm thông tin về cùng
bước thanh toán đó. Ví dụ: phương thức vận chuyển do người dùng chọn.
Để đo lường tỷ lệ này, hãy sử dụng thao tác checkout_option cùng với các trường step và 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. Cấu hình phễu thanh toán
Bạn có thể đặt một tên mang tính mô tả cho từng bước trong quy trình thanh toán để sử dụng trong báo cáo. Để định cấu hình các tên này, hãy truy cập vào phần Quản trị của Giao diện web Google Analytics, chọn chế độ xem (hồ sơ) và nhấp vào Cài đặt thương mại điện tử. Làm theo hướng dẫn thiết lập Thương mại điện tử để gắn nhãn từng bước thanh toán mà bạn định theo dõi.
Đo lường giao dịch mua hàng
- Đo lường thương mại điện tử:
purchase - Chấp nhận dữ liệu:
id(Mã giao dịch), mảngproductFieldObjects
Đẩy chi tiết giao dịch của bạn vào Lớp dữ liệu bằng cách sử dụng thao tác purchase, cùng với event sẽ kích hoạt thẻ hỗ trợ thương mại điện tử nâng cao. Trong ví dụ này, thông tin giao dịch được xác định tại thời điểm tải trang và sẽ được gửi cùng với lượt xem trang khi tập lệnh gtm.js trả về:
<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>
Đo lường số tiền hoàn lại
- Đo lường thương mại điện tử:
refund - Chấp nhận dữ liệu:
id(Mã giao dịch), mảngproductFieldObjects
Để đo lường việc hoàn tiền toàn bộ của một giao dịch, hãy đẩy refund
actionFieldObject cùng với mã giao dịch của giao dịch
được hoàn tiền:
<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>
Để đo lường việc hoàn tiền một phần, hãy thêm danh sách productFieldObjects, bao gồm cả mã sản phẩm và số lượng được hoàn tiền:
<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>
Chuyển Phương diện tuỳ chỉnh ở phạm vi sản phẩm
Để chuyển một phương diện tuỳ chỉnh ở phạm vi sản phẩm sang đối tượng thương mại điện tử, hãy sử dụng ký hiệu sau để thêm phương diện đó vào sản phẩm:
dimensionn
trong đó n là một số tự nhiên, ví dụ:
<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>
Chuyển chỉ số tùy chỉnh ở phạm vi sản phẩm
Để chuyển chỉ số tuỳ chỉnh ở phạm vi sản phẩm sang đối tượng thương mại điện tử, hãy sử dụng ký hiệu sau để thêm chỉ số đó vào sản phẩm:
metricn
trong đó n là một số tự nhiên, ví dụ:
<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>
Kết hợp lượt hiển thị và hành động
Trong trường hợp mà bạn có cả lượt hiển thị sản phẩm và một hành động, bạn có thể kết hợp và đo lường các lượt hiển thị đó trong một lượt truy cập duy nhất.
Ví dụ bên dưới cho biết cách đo lường chế độ xem chi tiết sản phẩm bằng số lượt hiển thị sản phẩm từ mục sản phẩm có liên quan:
<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>
Sử dụng Macro JavaScript tùy chỉnh
Nếu trang web của bạn không hỗ trợ lớp dữ liệu, bạn có thể sử dụng macro JavaScript tuỳ chỉnh để gọi một hàm trả về đối tượng dữ liệu thương mại điện tử. Đối tượng này phải sử dụng cú pháp lớp dữ liệu được trình bày ở phần trước của hướng dẫn này, ví dụ:
// 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;
}
Nếu bạn chọn sử dụng macro JavaScript tuỳ chỉnh thay vì lớp dữ liệu, hãy chọn Bật tính năng thương mại điện tử nâng cao và đặt tuỳ chọn Đọc dữ liệu từ macro.