ตั้งค่าเหตุการณ์การซื้อ

บทแนะนำนี้จะแสดงวิธีตั้งค่าเหตุการณ์ purchase ในเว็บไซต์เพื่อให้คุณวัดผลเมื่อมีคนทำการซื้อได้ บทแนะนำนี้มีมิติข้อมูล เมตริก และรายงานที่ Analytics สร้างขึ้นโดยใช้ข้อมูลจากเหตุการณ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์อีคอมเมิร์ซได้ที่หัวข้อวัดอีคอมเมิร์ซ

ก่อนเริ่มต้น

บทแนะนำนี้จะถือว่าคุณดำเนินการต่อไปนี้แล้ว

และจะถือว่าคุณมีสิ่งต่อไปนี้ด้วย

  • การเข้าถึงซอร์สโค้ดของเว็บไซต์
  • บทบาทผู้แก้ไข (หรือสูงกว่า) ในบัญชี Google Analytics

ขั้นตอนที่ 1: เพิ่มเหตุการณ์ลงในเว็บไซต์

คุณควรวางเหตุการณ์ purchase ไว้บนหน้าเว็บของเว็บไซต์ที่ผู้อื่นทำการซื้อ เช่น คุณอาจเพิ่มเหตุการณ์ลงในหน้าการยืนยันที่จะปรากฏเมื่อมีคนทำการซื้อ บทแนะนำนี้จะแสดงวิธีเพิ่มเหตุการณ์ลงในหน้าเว็บที่มีคนคลิกปุ่ม "ซื้อ"

วางเหตุการณ์ลงในแท็ก <script> ต่อท้ายแท็ก <body> การวางเหตุการณ์ในแท็ก <script> โดยตรงจะทริกเกอร์เหตุการณ์เมื่อโหลดหน้าเว็บ ส่วนถัดไปจะอธิบายวิธีทริกเกอร์เหตุการณ์เมื่อมีผู้คลิก "ซื้อ"

<!--
  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: 30.03,
        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: 10.01,
          quantity: 3
        }]
    });
    </script>
</body>
</html>

ขั้นตอนที่ 2: เชื่อมต่อเหตุการณ์กับปุ่ม

คุณสามารถตั้งค่าเหตุการณ์ purchase เพื่อให้ทริกเกอร์เมื่อมีคนคลิกปุ่ม "ซื้อ" ได้หลายวิธี วิธีหนึ่งคือการเพิ่มรหัสลงในปุ่ม "ซื้อ" แล้ววางโค้ดเหตุการณ์ใน Listener เหตุการณ์ ในตัวอย่างต่อไปนี้ ระบบจะส่งเหตุการณ์เมื่อมีผู้คลิกปุ่มที่มีรหัส 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: 30.03,
                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: 10.01,
                  quantity: 3
                }]
          });
      });
    </script>
</body>
</html>

ขั้นตอนที่ 3: ตรวจสอบว่าคุณรวบรวมข้อมูลอยู่

รายงาน DebugView จะแสดงข้อมูลแบบเรียลไทม์จากเว็บไซต์ คุณจึงตั้งค่าเหตุการณ์ได้อย่างถูกต้อง หากต้องการเปิดใช้โหมดแก้ไขข้อบกพร่องในหน้าเว็บ ให้เพิ่มพารามิเตอร์ debug_mode ต่อไปนี้ในคำสั่ง 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: 30.03,
                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: 10.01,
                  quantity: 3
                }]
        });
    });
    </script>
</body>
</html>

เมื่อเปิดใช้โหมดแก้ไขข้อบกพร่องแล้ว คุณจะเริ่มเห็นเหตุการณ์ปรากฏในรายงาน DebugView เมื่อมีผู้ใช้เว็บไซต์ ตัวอย่างเช่น การคลิกปุ่ม "ซื้อ" ในเว็บไซต์จะเป็นการเติมข้อมูลในรายงานด้วยข้อมูลต่อไปนี้ คุณสามารถเลือกเหตุการณ์เพื่อดูพารามิเตอร์ พร็อพเพอร์ตี้ผู้ใช้ และรายการที่เชื่อมโยงกับเหตุการณ์นั้นได้

ภาพหน้าจอของรายงาน DebugView

ขั้นตอนที่ 4: ดูข้อมูลอีคอมเมิร์ซ

หลังจากผ่านไปประมาณ 24 ชั่วโมง ข้อมูลที่คุณส่งพร้อมกับเหตุการณ์ purchase จะพร้อมใช้งานในรายงาน การสํารวจ และ Data API ของ Google Analytics นอกจากนี้ คุณยังเข้าถึงข้อมูลใน BigQuery เมื่อตั้งค่า BigQuery Export ได้อีกด้วย

เหตุการณ์ "การซื้อ" จะสร้างมิติข้อมูลและเมตริกต่างๆ ที่สร้างไว้ล่วงหน้าโดยอัตโนมัติ ซึ่งใช้ในรายงาน การสํารวจ และอื่นๆ มิติข้อมูลบางส่วนที่ได้รับข้อมูลจากเหตุการณ์ purchase ในขั้นตอนแรกมีดังนี้

พารามิเตอร์ มิติข้อมูล ค่า
affiliation แอฟฟิลิเอตสินค้า Google Merchandise Store
currency สกุลเงิน USD
discount จำนวนส่วนลดสินค้า 2.22
index ตำแหน่งรายการสินค้า 0
item_brand แบรนด์สินค้า Google
item_category หมวดหมู่สินค้า เสื้อผ้า
item_id รหัสรายการ SKU_12345
item_list_id รหัสชุดรายการ related_products
item_list_name ชื่อรายการสินค้า ผลิตภัณฑ์ที่เกี่ยวข้อง
item_name ชื่อรายการ เสื้อยืด Stan and Friends
item_variant ผลิตภัณฑ์ย่อย green
location_id รหัสสถานที่ตั้งรายการ ChIJIQBpAG2ahYAR_6128GcTUEo (รหัส Google Place สำหรับซานฟรานซิสโก)
shipping ค่าจัดส่ง 5.99
tax จำนวนภาษี 4.90
transaction_id รหัสธุรกรรม T_12345

นอกจากมิติข้อมูลแล้ว Google Analytics ยังสร้างเมตริกอีคอมเมิร์ซและเมตริกที่เกี่ยวข้องกับรายได้อีกจำนวนหนึ่งด้วย ตัวอย่างเช่น หากผู้ใช้คลิกปุ่ม "ซื้อ" ครั้งเดียว ระบบจะสร้างเมตริกต่อไปนี้ใน Google Analytics

  • เมตริกรายได้จากสินค้ามีค่าเท่ากับ $30.03
  • เมตริกรายได้ทั้งหมดมีค่า $30.03
  • เมตริกการซื้อผ่านอีคอมเมิร์ซมีค่าเป็น 1

คุณใช้มิติข้อมูลและเมตริกเหล่านี้เพื่อสร้างการสํารวจและรายงานที่กําหนดเองได้ นอกจากนี้ยังใช้รายงานการซื้อผ่านอีคอมเมิร์ซที่สร้างไว้ล่วงหน้าต่อไปนี้เพื่อดูข้อมูลอีคอมเมิร์ซได้ด้วย

ภาพหน้าจอของรายงานการซื้อผ่านอีคอมเมิร์ซ