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

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

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

คุณสามารถสร้างเหตุการณ์ purchase เพื่อทริกเกอร์เมื่อมีผู้คลิกปุ่ม "ซื้อ" ได้หลายวิธี วิธีหนึ่งคือการเพิ่มรหัสลงในปุ่ม "ซื้อ" แล้ววางโค้ดเหตุการณ์ในตัวฟังเหตุการณ์ ในตัวอย่างต่อไปนี้ ระบบจะส่งเหตุการณ์เมื่อมีผู้คลิกปุ่มที่มีรหัส 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>

ขั้นตอนที่ 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: 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>

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

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

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

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

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

พารามิเตอร์ มิติข้อมูล ค่า
affiliation แอฟฟิลิเอตของสินค้า Google Merchandise Store
currency Currency (สกุลเงิน) USD
discount จํานวนส่วนลดสินค้า 2.22
index ตําแหน่งรายการสินค้า 0
item_brand แบรนด์สินค้า Google
item_category หมวดหมู่รายการ เสื้อผ้า
item_id รหัสรายการ SKU_12345
item_list_id รหัสรายการสินค้า ผลิตภัณฑ์ที่เกี่ยวข้อง
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 ยังป้อนข้อมูลเมตริกอีคอมเมิร์ซและรายได้อีกด้วย เช่น หากผู้ใช้คลิกปุ่ม "การซื้อ" 1 ครั้ง ระบบจะใส่เมตริกต่อไปนี้ใน Google Analytics

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

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

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