บทแนะนำนี้จะแสดงวิธีตั้งค่าเหตุการณ์ purchase
ในเว็บไซต์เพื่อให้คุณวัดผลเมื่อมีคนทำการซื้อได้ บทแนะนำนี้มีมิติข้อมูล เมตริก และรายงานที่ Analytics สร้างขึ้นโดยใช้ข้อมูลจากเหตุการณ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์อีคอมเมิร์ซได้ที่หัวข้อวัดอีคอมเมิร์ซ
ก่อนเริ่มต้น
บทแนะนำนี้จะถือว่าคุณดำเนินการต่อไปนี้แล้ว
- สร้างบัญชีและพร็อพเพอร์ตี้ Google Analytics 4
- สร้างสตรีมข้อมูลเว็บสําหรับเว็บไซต์
- วางแท็ก Google 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 เมื่อมีผู้ใช้เว็บไซต์ ตัวอย่างเช่น การคลิกปุ่ม "ซื้อ" ในเว็บไซต์จะเป็นการเติมข้อมูลในรายงานด้วยข้อมูลต่อไปนี้ คุณสามารถเลือกเหตุการณ์เพื่อดูพารามิเตอร์ พร็อพเพอร์ตี้ผู้ใช้ และรายการที่เชื่อมโยงกับเหตุการณ์นั้นได้
ขั้นตอนที่ 4: ดูข้อมูลอีคอมเมิร์ซ
หลังจากผ่านไปประมาณ 24 ชั่วโมง ข้อมูลที่คุณส่งพร้อมกับเหตุการณ์ purchase
จะพร้อมใช้งานในรายงาน การสํารวจ และ Data API ของ Google Analytics
นอกจากนี้ คุณยังเข้าถึงข้อมูลใน BigQuery เมื่อตั้งค่า BigQuery Export ได้อีกด้วย
เหตุการณ์ "การซื้อ" จะสร้างมิติข้อมูลและเมตริกต่างๆ ที่สร้างไว้ล่วงหน้าโดยอัตโนมัติ ซึ่งใช้ในรายงาน การสํารวจ และอื่นๆ มิติข้อมูลบางส่วนที่ได้รับข้อมูลจากเหตุการณ์ purchase
ในขั้นตอนแรกมีดังนี้
พารามิเตอร์ | มิติข้อมูล | ค่า |
---|---|---|
affiliation |
แอฟฟิลิเอตสินค้า | Google Merchandise Store |
currency |
สกุลเงิน | USD |
discount |
จำนวนส่วนลดสินค้า | 2.22 |
index |
ตำแหน่งรายการสินค้า | 0 |
item_brand |
แบรนด์สินค้า | |
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
คุณใช้มิติข้อมูลและเมตริกเหล่านี้เพื่อสร้างการสํารวจและรายงานที่กําหนดเองได้ นอกจากนี้ยังใช้รายงานการซื้อผ่านอีคอมเมิร์ซที่สร้างไว้ล่วงหน้าต่อไปนี้เพื่อดูข้อมูลอีคอมเมิร์ซได้ด้วย