Halaman ini diterjemahkan oleh Cloud Translation API.

Menyiapkan peristiwa pembelian

Tutorial ini menunjukkan cara menyiapkan peristiwa purchase di situs Anda agar dapat mengukur kapan seseorang melakukan pembelian. Tutorial ini membahas dimensi, metrik, dan laporan yang diisi Analytics dengan data dari peristiwa tersebut. Untuk mempelajari peristiwa e-commerce lebih lanjut, lihat artikel Mengukur e-commerce.

Sebelum memulai

Tutorial ini mengasumsikan bahwa Anda telah melakukan tindakan berikut:

Tutorial ini juga mengasumsikan bahwa Anda memiliki hal berikut:

Akses ke kode sumber situs Anda
Peran Editor (atau yang lebih tinggi) di akun Google Analytics

Langkah 1: Tambahkan peristiwa ke situs Anda

Anda harus menempatkan peristiwa purchase di halaman situs tempat seseorang melakukan pembelian. Misalnya, Anda dapat menambahkan peristiwa di halaman konfirmasi yang muncul saat seseorang melakukan pembelian. Tutorial ini menunjukkan cara menambahkan peristiwa ke halaman tempat seseorang mengklik tombol "Beli".

Tempatkan peristiwa dalam tag <script> di akhir tag <body>. Penempatan peristiwa secara langsung dalam tag <script> akan memicu peristiwa saat halaman dimuat. Bagian berikutnya akan menjelaskan cara memicu peristiwa saat seseorang mengklik tombol "Beli".

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button>Submit</button>
    <script>
    gtag("event", "purchase", {
        transaction_id: "T_12345_1",
        value: 25.42,
        tax: 4.90,
        shipping: 5.99,
        currency: "USD",
        coupon: "SUMMER_SALE",
        items: [
        // If someone purchases more than one item, 
        // you can add those items to the items array
         {
          item_id: "SKU_12345",
          item_name: "Stan and Friends Tee",
          affiliation: "Google Merchandise Store",
          coupon: "SUMMER_FUN",
          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: "ChIJIQBpAG2ahYAR_6128GcTUEo",
          price: 9.99,
          quantity: 1
        }]
    });
    </script>
</body>
</html>

Langkah 2: Hubungkan peristiwa ke sebuah tombol

Anda dapat menggunakan beberapa cara untuk menyiapkan peristiwa purchase agar terpicu saat seseorang mengklik tombol "Beli". Salah satu caranya adalah menambahkan ID ke tombol "Beli", lalu menempatkan kode peristiwanya dalam pemroses peristiwa. Dalam contoh berikut, peristiwa hanya dikirim saat seseorang mengklik tombol dengan ID purchase.

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_2",
                value: 25.42,
                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",
                  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: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 9.99,
                  quantity: 1
                }]
          });
      });
    </script>
</body>
</html>

Langkah 3: Periksa apakah data memang dikumpulkan

Laporan DebugView menampilkan data real time dari situs Anda, sehingga Anda dapat memastikan peristiwa telah disiapkan dengan benar. Untuk mengaktifkan mode debug di halaman web, tambahkan parameter debug_mode berikut ke perintah config:

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID',{ 'debug_mode': true });
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_3",
                value: 25.42,
                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",
                  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: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 9.99,
                  quantity: 1
                }]
        });
    });
    </script>
</body>
</html>

Setelah mengaktifkan mode debug, Anda akan mulai melihat peristiwa mengisi laporan DebugView saat orang menggunakan situs Anda. Misalnya, klik pada tombol "Beli" di situs Anda akan membuat laporan diisi dengan data berikut. Anda dapat memilih peristiwa untuk melihat parameter, properti pengguna, dan item yang terkait dengan peristiwa tersebut.

Screenshot laporan DebugView

Langkah 4: Lihat data e-commerce Anda

Setelah sekitar 24 jam, data yang Anda kirimkan dengan peristiwa purchase akan tersedia di laporan, eksplorasi, dan Data API Google Analytics. Anda juga dapat mengakses data tersebut di BigQuery saat menyiapkan BigQuery Export.

Peristiwa "purchase" akan otomatis mengisi berbagai dimensi dan metrik bawaan, yang digunakan di laporan, eksplorasi, dan sebagainya. Berikut beberapa dimensi yang diisi dengan data dari peristiwa purchase pada langkah pertama:

Parameter	Dimensi	Nilai
`affiliation`	Afiliasi item	Google Merchandise Store
`currency`	Mata uang	USD
`discount`	Jumlah diskon item	2.22
`index`	Posisi daftar item	0
`item_brand`	Merek item	Google
`item_category`	Kategori item	Pakaian
`item_id`	ID Item	SKU_12345
`item_list_id`	ID daftar item	related_products
`item_list_name`	Nama daftar item	Produk Terkait
`item_name`	Nama item	Stan and Friends Tee
`item_variant`	Varian item	green
`location_id`	ID lokasi item	ChIJIQBpAG2ahYAR_6128GcTUEo (ID Tempat Google untuk San Francisco)
`shipping`	Jumlah pengiriman	5.99
`tax`	Jumlah pajak	4.90
`transaction_id`	ID Transaksi	T_12345

Selain dimensi, Google Analytics akan mengisi sejumlah metrik terkait e-commerce dan pendapatan. Misalnya, jika pengguna mengklik tombol "Beli" sekali, metrik berikut akan diisi di Google Analytics:

Metrik Pendapatan item memiliki nilai $9.99
Metrik Total pendapatan memiliki nilai $25.42
Metrik Pembelian e-commerce memiliki nilai 1

Anda dapat menggunakan dimensi dan metrik tersebut untuk membuat eksplorasi dan laporan kustom, tetapi Anda juga dapat menggunakan laporan Pembelian e-commerce bawaan berikut untuk melihat data e-commerce Anda:

Screenshot laporan Pembelian e-commerce