Universal Analytics (UA) will be deprecated on July 1, 2023, which means it will stop processing data. Analytics 360 properties will stop working on October 1, 2023. Migrate to Google Analytics 4.

Enhanced E-commerce untuk Tag Manager

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Panduan ini menjelaskan cara menerapkan fitur Enhanced E-commerce Universal Analytics menggunakan Google Tag Manager di situs.

Ringkasan

Enhanced E-commerce Google Analytics memungkinkan data penjualan, promosi, serta tayangan produk dikirim bersama kunjungan halaman dan peristiwa Google Analytics. Gunakan kunjungan halaman untuk melacak tayangan produk dan pembelian produk; dan gunakan peristiwa untuk melacak langkah checkout dan klik produk.

Sebelum Anda Mulai

Sebaiknya tinjau bagian Jenis dan Tindakan Data Enhanced E-commerce dalam Panduan Developer Enhanced E-commerce untuk membantu Anda merencanakan penerapan. Panduan ini akan membantu Anda memahami kolom mana yang wajib dan opsional untuk setiap interaksi e-commerce yang ingin diukur.

Mengaktifkan Enhanced E-commerce

Pada sebagian besar penerapan, Anda harus mengaktifkan Enhanced E-commerce di setiap tag peristiwa atau kunjungan halaman Universal Analytics. Anda memiliki dua opsi untuk mengaktifkan Enhanced E-commerce di layar editor tag antarmuka web:

  • Terapkan menggunakan Lapisan Data (Direkomendasikan)
  • Terapkan menggunakan Makro JavaScript Kustom

Meskipun kedua metode tersebut memberikan fungsi e-commerce yang setara, sebaiknya semua situs yang mendukung lapisan data menggunakan metode Lapisan Data. Panduan ini menyajikan metode Lapisan Data sebagai default, sedangkan metode yang Menggunakan Makro JavaScript Kustom didokumentasikan di bagian akhir panduan ini.

Menggunakan Lapisan Data

Bagian ini akan menunjukkan cara menggunakan lapisan data untuk mengukur aktivitas Enhanced E-commerce berikut:

Menghapus objek e-commerce

Sebaiknya gunakan perintah berikut untuk menghapus objek e-commerce sebelum mengirim peristiwa e-commerce ke lapisan data. Dengan menghapus objek, beberapa peristiwa e-commerce di halaman tidak akan memengaruhi satu sama lain.

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

Mengukur Tayangan Produk

  • Pengukuran E-commerce: impressions
  • Menerima Data: array impressionFieldObjects

Ukur tayangan produk menggunakan tindakan impression dan satu atau beberapa impressionFieldObjects. Contoh berikut mengasumsikan detail tentang produk yang ditampilkan di halaman diketahui pada saat halaman dimuat:

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

Mengukur Klik Produk

  • Pengukuran E-commerce: click
  • Menerima Data: list, array productFieldObjects

Ukur klik pada link produk dengan mengirim tindakan click ke lapisan data, bersama productFieldObject untuk merepresentasikan produk yang diklik, seperti dalam contoh ini:

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

Mengukur Tampilan Detail Produk

  • Pengukuran E-commerce: detail
  • Menerima Data: list, array productFieldObjects

Ukur tampilan detail produk dengan mengirim tindakan detail ke lapisan data, bersama satu atau beberapa productFieldObjects yang merepresentasikan produk yang dilihat:

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

Mengukur Penambahan atau Penghapusan Produk dari Keranjang Belanja

  • Pengukuran E-commerce: add, remove
  • Menerima Data: list, array productFieldObjects

Anda juga dapat mengukur penambahan atau penghapusan produk dari keranjang belanja menggunakan add atau remove actionFieldObject dan daftar productFieldObjects:

Menambahkan Produk ke Keranjang Belanja

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

Menghapus Produk dari Keranjang Belanja

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

Mengukur Promosi

Anda dapat mengukur tayangan dan klik pada promosi situs internal, seperti banner yang ditampilkan di situs itu sendiri, yang mengiklankan diskon untuk subkumpulan produk tertentu atau penawaran pengiriman gratis.

Mengukur Tayangan Promosi

  • Pengukuran E-commerce: promoView
  • Menerima Data: array promoFieldObjects

Untuk mengukur tayangan promosi, tetapkan kunci promoView pada variabel lapisan data e-commerce Anda ke promoFieldObject yang menjelaskan promosi yang ditampilkan kepada pengguna di halaman tersebut:

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

Mengukur Klik Promosi

Untuk mengukur klik pada promosi, kirim tindakan promoClick ke lapisan data dengan array yang berisi promoFieldObject yang menjelaskan promosi yang diklik:

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

Mengukur Checkout

Untuk mengukur setiap langkah dalam proses checkout, Anda perlu:

  1. Mengukur setiap langkah proses checkout menggunakan tindakan checkout.
  2. Mengukur opsi checkout menggunakan tindakan checkout_option, jika relevan.
  3. (Opsional) Menetapkan nama langkah yang mudah digunakan untuk laporan funnel checkout dengan mengonfigurasi Setelan E-commerce di bagian Admin pada antarmuka web.

1. Mengukur Langkah pada Proses Checkout

  • Pengukuran E-commerce: checkout
  • Menerima Data: step, array productFieldObjects

Untuk mengukur proses checkout, yang mungkin mencakup tombol checkout dan satu atau beberapa halaman checkout tempat pengguna memasukkan informasi pengiriman dan pembayaran, gunakan tindakan checkout dan kolom step untuk menunjukkan tahap pada proses checkout yang sedang diukur. Anda juga dapat menggunakan kolom option untuk memasukkan data tambahan tentang halaman, seperti jenis pembayaran yang dipilih oleh pengguna.

<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. Mengukur Opsi Checkout

  • Pengukuran E-commerce: checkout_option
  • Menerima Data: step, option

Opsi checkout berguna jika Anda telah mengukur langkah checkout, tetapi ingin mengambil informasi tambahan tentang langkah checkout tersebut. Misalnya, metode pengiriman yang dipilih oleh pengguna. Untuk mengukurnya, gunakan tindakan checkout_option bersama dengan kolom step dan 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. Konfigurasi Funnel Checkout

Opsional, setiap langkah dalam proses checkout dapat diberi nama deskriptif yang akan digunakan dalam laporan. Untuk mengonfigurasi nama ini, kunjungi bagian Admin pada Antarmuka Web Google Analytics, pilih tampilan (profil), lalu klik Setelan E-commerce. Ikuti petunjuk penyiapan E-commerce untuk memberi label pada setiap langkah checkout yang ingin Anda lacak.

Penyiapan e-commerce di bagian admin pada antarmuka Google Analytics. Funnel checkout didefinisikan dengan empat langkah: 1. Meninjau Keranjang, 2. Mengumpulkan Info Pembayaran, 3. Mengonfirmasi Detail Pembelian, 4. Tanda Terima.
Gambar 1: Penyiapan e-commerce, funnel checkout.

Mengukur Pembelian

  • Pengukuran E-commerce: purchase
  • Menerima Data: id (ID Transaksi), array productFieldObjects

Kirim detail transaksi Anda ke Lapisan Data menggunakan tindakan purchase, bersama dengan event yang akan memicu tag yang diaktifkan Enhanced E-commerce. Dalam contoh ini, detail transaksi diketahui saat halaman dimuat, dan akan dikirim bersama kunjungan halaman saat skrip gtm.js menampilkan:

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

Mengukur Pengembalian Dana

  • Pengukuran E-commerce: refund
  • Menerima Data: id (ID Transaksi), array productFieldObjects

Untuk mengukur pengembalian dana penuh dari sebuah transaksi, kirim refund actionFieldObject bersama dengan ID transaksi untuk transaksi yang dananya dikembalikan:

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

Untuk mengukur pengembalian dana sebagian, tambahkan daftar productFieldObjects, termasuk ID dan jumlah produk yang dananya dikembalikan:

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

Meneruskan Dimensi Kustom Cakupan Produk

Untuk meneruskan dimensi kustom cakupan produk ke objek e-commerce, gunakan notasi berikut untuk menambahkannya ke produk:

  dimensionn

jika n adalah bilangan asli, contohnya: 

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

Meneruskan Metrik Kustom Cakupan Produk

Untuk meneruskan metrik kustom cakupan produk ke objek e-commerce, gunakan notasi berikut untuk menambahkannya ke produk:

  metricn

jika n adalah bilangan asli, contohnya: 

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

Menggabungkan Tayangan dan Tindakan

Jika memiliki tayangan produk dan tindakan, Anda dapat menggabungkan dan mengukur keduanya dalam satu hit.

Contoh di bawah ini menunjukkan cara mengukur tampilan detail produk dengan tayangan produk dari bagian produk terkait:

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

Menggunakan Makro JavaScript Kustom

Jika situs Anda tidak mendukung lapisan data, Anda dapat menggunakan makro JavaScript kustom untuk memanggil fungsi yang menampilkan objek data e-commerce. Objek ini harus menggunakan sintaksis lapisan data yang ditunjukkan sebelumnya dalam panduan ini, contohnya:

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

Jika Anda memilih menggunakan makro JavaScript kustom, dan bukan lapisan data, pilih Aktifkan Fitur Enhanced E-commerce dan tetapkan opsi Baca data dari makro.