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

บทแนะนํานี้จะแสดงวิธีตั้งค่าเหตุการณ์ 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

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

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