แท็ก Google (gtag.js) เป็นข้อมูลโค้ดที่เพิ่มลงในเว็บไซต์เพื่อวัดกิจกรรมของผู้ใช้ในผลิตภัณฑ์ต่างๆ ของ Google ได้ ซึ่งรวมถึง Google Analytics 4, Google Ads และ Google Marketing Platform ดูข้อมูลเพิ่มเติมเกี่ยวกับแท็ก Google
คำแนะนำนี้อธิบายวิธีผสานรวมแท็ก Google เข้ากับระบบจัดการเนื้อหา (CMS) หรือเครื่องมือสร้างเว็บไซต์เพื่อให้ผู้ใช้ปลายทางเข้าถึงผลิตภัณฑ์การวัดผลของ Google ได้
ผู้ชม
คู่มือนี้มีไว้สําหรับเจ้าของระบบจัดการเนื้อหา (CMS) หรือเครื่องมือสร้างเว็บไซต์ที่ต้องการให้ผู้ใช้ได้ผสานรวมกับผลิตภัณฑ์การวัดผลของ Google คู่มือนี้ไม่ได้มีไว้สำหรับผู้ใช้ CMS หรือเครื่องมือสร้างเว็บไซต์
ก่อนเริ่มต้น
ตรวจสอบว่าคุณมีรหัสนักพัฒนาซอฟต์แวร์ของแท็ก Google หากไม่มีรหัสนักพัฒนาซอฟต์แวร์ของแท็ก Google ให้กรอกข้อมูลในแบบฟอร์มคำขอรหัสนักพัฒนาซอฟต์แวร์แท็ก Google รหัสนักพัฒนาซอฟต์แวร์ต่างจากรหัสอื่นๆ เช่น รหัสการวัดหรือรหัส Conversion ที่ผู้ใช้ปลายทางเพิ่มลงในโค้ดการวัดเว็บไซต์
ภาพรวม
หากต้องการผสานรวมแพลตฟอร์มของคุณกับผลิตภัณฑ์ Google ให้ทำตามขั้นตอนต่อไปนี้
- สร้างการผสานรวมกับแท็ก Google
- อัปเดตโครงสร้างข้อมูลจากผู้ใช้
- ใช้ Consent API
- ตั้งค่าข้อมูลเหตุการณ์
- ยืนยันการผสานรวมที่อัปเดต
- อัปเดตวิธีการทำให้ผู้ใช้ใช้งานได้
สร้างการผสานรวมกับแท็ก Google
เมื่อสร้างการผสานรวมกับแท็ก Google ลูกค้าจะทําให้ผลิตภัณฑ์การวัดผลของ Google ใช้งานได้ (ผ่าน gtag.js) ในทุกหน้าของเว็บไซต์ โปรดนําการผสานรวมแท็กเดิมที่มีอยู่ออก (เช่น analytics.js) ก่อนสร้างการผสานรวมกับ gtag.js
หากต้องการสร้างการผสานรวมกับแท็ก Google ให้แทนที่ข้อมูลโค้ดที่มีอยู่ด้วยข้อมูลโค้ดต่อไปนี้ ตรวจสอบว่าผู้ใช้แทนที่ TAG_ID
ด้วยรหัสแท็กของตนเองได้
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID
gtag('config', 'GOOGLE_TAG_ID');
</script>
โปรดทราบดังต่อไปนี้
- ผู้ลงโฆษณาสามารถเลือกไม่ใช้ฟีเจอร์การปรับโฆษณาตามโปรไฟล์ของผู้ใช้ เช่น รีมาร์เก็ตติ้งด้วยพารามิเตอร์
allow_ad_personalization_signals
(ดูปิดใช้การรวบรวมข้อมูลโฆษณาที่ปรับตามโปรไฟล์ของผู้ใช้ - โดยหลักการแล้ว ข้อมูลโค้ดแท็ก Google ควรปรากฏเพียงครั้งเดียวต่อหน้า ข้อมูลโค้ดรองรับรหัสแท็กได้หลายรหัส หากมีอินสแตนซ์ของ gtag.js อยู่แล้ว คุณควรเพิ่มรหัสแท็กใหม่ลงในแท็กที่มีอยู่ ดูข้อมูลเพิ่มเติม
อัปเดตโครงสร้างอินพุตของผู้ใช้
ลูกค้าควรระบุรหัสแท็ก Google ได้หลายรูปแบบผ่านอินเทอร์เฟซเดียว ไม่ว่าจะติดตั้งใช้งานผลิตภัณฑ์การวัดผลของ Google หรือไม่ก็ตาม
ตัวอย่างต่อไปนี้แสดงอินพุตแท็ก Google แบบง่าย การผสานรวมนี้ควรอยู่ในกรอบของการทำให้ใช้งานได้สำหรับแท็ก Google คุณอาจใช้คำบรรยายเป็นวิธีในการทำให้ Google Ads และ Google Analytics ใช้งานได้
แผนภาพต่อไปนี้จะแสดงให้เห็นว่าแพลตฟอร์มหนึ่งๆ อาจมีโฟลว์ผู้ใช้สําหรับ Analytics และ Google Ads แยกกันอย่างไร แต่แต่ละขั้นตอนจะนําไปยังอินเทอร์เฟซเดียวซึ่งผู้ใช้ใส่รหัสแท็ก Google ของตน
รหัสแท็กควรยอมรับตัวแปรรหัสหลายรายการที่ใช้รูปแบบนิพจน์ทั่วไป [A-Z]{1,3}\w{5,}[\w]*
ใช้งาน Consent API (หรือโหมดความยินยอม)
แท็ก Google มี Consent API ในตัวเพื่อจัดการความยินยอมของผู้ใช้ โดยจะแยกความยินยอมของผู้ใช้สำหรับคุกกี้เพื่อวัตถุประสงค์ด้านโฆษณาออกจากความยินยอมของผู้ใช้เพื่อจุดประสงค์ในการวิเคราะห์ได้
ผลลัพธ์ที่คาดหวังคือลูกค้าได้รับการโทรอย่างน้อย gtag('consent', 'update' {...})
รายการโดยที่ลูกค้าไม่ต้องดำเนินการใดๆ วิธีนี้ช่วยให้แท็ก Google (Google Ads, Floodlight, Google Analytics, Conversion Linker) อ่านสถานะความยินยอมล่าสุดของผู้ใช้ได้ และรวมสถานะดังกล่าวไว้ในคําขอเครือข่ายที่ส่งไปยัง Google (ผ่านพารามิเตอร์ &gcs
)
ขั้นตอนการติดตั้งใช้งานเพิ่มเติมคือการติดตั้งใช้งานหรือช่วยเหลือผู้ลงโฆษณาในการทําให้สถานะ gtag('consent', default' {...})
ใช้งานได้ (เช่น ผ่าน UI) และการเลิกบล็อกแท็ก Google (กล่าวคือ ไม่มีการเริ่มทำงานตามเงื่อนไขตามความยินยอม) เพื่อเปิดใช้โหมดความยินยอมให้เริ่มทํางานในลักษณะที่อิงตามความยินยอม
ดูรายละเอียดการใช้งานได้ที่จัดการการตั้งค่าความยินยอม (เว็บ)
ตั้งค่าข้อมูลเหตุการณ์
คุณควรส่งข้อมูลเหตุการณ์ที่สมบูรณ์จากเว็บไซต์ของลูกค้าไปยังบัญชี Google ของลูกค้า โดยที่ลูกค้าไม่ต้องดำเนินการใดๆ ตัวอย่างเช่น คุณสามารถเพิ่มเหตุการณ์ในช่องทางการซื้อ (เช่น add_to_cart
, begin_checkout
,
add_payment_info
, add_shipping_info
และ purchase
) การสร้างความสนใจในตัวสินค้า และการลงชื่อสมัครใช้
แนวทางปฏิบัติแนะนำในการเพิ่มเหตุการณ์มีดังนี้
- บันทึกทุกอย่างที่เป็นไปได้
- ตั้งค่าเหตุการณ์หลักอย่างน้อย 8 รายการ
- จัดลําดับความสําคัญของเหตุการณ์อีคอมเมิร์ซ
บันทึกทุกอย่างที่เป็นไปได้
คุณควรตั้งค่าเหตุการณ์โดยค่าเริ่มต้นหากเป็นไปได้ ซึ่งรวมถึงกรณีต่อไปนี้
- เหตุการณ์สําคัญ เช่น
purchase
หรือsign_up
- เหตุการณ์ก่อนเหตุการณ์สำคัญ เช่น
add_to_cart
- การมีส่วนร่วมตามพฤติกรรม เช่น การโต้ตอบกับสื่อที่ช่วยให้ลูกค้า เข้าใจวิธีการมีส่วนร่วมกับผู้ใช้ปลายทาง
คุณควรเพิ่มข้อมูลโค้ดเหตุการณ์สําคัญในหน้าเหตุการณ์สําคัญเท่านั้น (เช่น การยืนยันการซื้อ การยืนยันการส่งแบบฟอร์ม) โปรดทราบว่าคุณยังควรเพิ่มแท็ก Google ในทุกหน้าของเว็บไซต์อยู่
ระบบจะส่งเหตุการณ์โดยใช้คำสั่ง event
ซึ่งรวมถึงรหัสนักพัฒนาซอฟต์แวร์แท็ก Google เดียวกับที่คุณระบุไว้ในแท็กที่ติดทั่วเว็บไซต์ที่อธิบายไว้ข้างต้น
gtag('event', 'my_event', {
'developer_id.<developer ID>': true,
// Additional event parameters
});
เช่น คุณใช้คําสั่ง event
เพื่อส่งเหตุการณ์ login
ที่มีค่า method
เป็น "Google" ได้ ดังนี้
gtag('event', 'login', {
'developer_id.<developer ID>': true,
'method': 'Google'
});
<!-- Event snippet for sales conversion page -->
<script>
gtag('event', 'conversion', {
'developer_id.<developer ID>': true,
'value': <value>,
'currency': '<currency>',
'transaction_id': '<transaction_id>'
});
</script>
โปรดทราบดังต่อไปนี้
- รหัสนักพัฒนาซอฟต์แวร์
<developer ID>
ไม่ซ้ำกันและเฉพาะเจาะจงสำหรับแพลตฟอร์มของคุณ แนบรหัสกับทุกกิจกรรม - พารามิเตอร์ต่อไปนี้ไม่บังคับและละเว้นได้
'value'
คือค่าที่เป็นตัวเลขของเหตุการณ์สำคัญ (เช่น ราคาการซื้อ)'currency'
คือรหัสสกุลเงินแบบ 3 ตัวอักษร ซึ่งมีประโยชน์สำหรับผู้ลงโฆษณา ที่ยอมรับหลายสกุลเงิน'transaction_id'
คือรหัสที่ไม่ซ้ำกันสำหรับธุรกรรม (เช่น รหัสคำสั่งซื้อ) ซึ่งใช้ในการขจัดความซ้ำซ้อน
- แม้ว่าพารามิเตอร์บางรายการจะไม่บังคับ แต่ขอแนะนําให้คุณใส่ข้อมูลให้มากที่สุดเท่าที่จะทําได้สําหรับแต่ละเหตุการณ์
- พารามิเตอร์ให้ข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ผู้ใช้โต้ตอบกับเว็บไซต์หรือแอป เช่น เมื่อมีผู้เข้ามาดูผลิตภัณฑ์ที่คุณขาย คุณสามารถใส่พารามิเตอร์ที่อธิบายผลิตภัณฑ์ที่ผู้ใช้ดู เช่น ชื่อ หมวดหมู่ และราคา
- พารามิเตอร์บางอย่างจะป้อนข้อมูลมิติข้อมูลและเมตริกที่กำหนดไว้ล่วงหน้าใน Google Analytics โดยอัตโนมัติ และช่วยให้ผู้ใช้เข้าใจลูกค้าได้ดียิ่งขึ้น
หากต้องการวัดเหตุการณ์สำคัญตามการคลิก (เช่น การคลิกปุ่ม หรือการตอบสนองแบบไดนามิกสำหรับเว็บไซต์โดยใช้ AJAX) คุณยังใช้ข้อมูลโค้ดต่อไปนี้ได้ด้วย
<!-- Event snippet for sales conversion page
In your HTML page, add the snippet and call gtag_report_conversion
when someone clicks on the chosen link or button. -->
<script>
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'developer_id.<developer ID>': true,
'value': <value>,
'currency': '<currency>',
'transaction_id': '<transaction_id>',
'event_callback': callback
});
return false;
}
</script>
ตั้งค่าเหตุการณ์หลักอย่างน้อย 8 รายการ
เราขอแนะนำให้คุณตั้งค่าชุดเหตุการณ์หลักที่มีคุณค่าต่อเจ้าของเว็บไซต์มากที่สุด เราขอแนะนำให้คุณตั้งค่าเหตุการณ์ต่อไปนี้เป็นอย่างต่ำ
view_item_list
: เมื่อผู้ใช้ดูรายการสินค้า (เช่น รายการสินค้า) ดูข้อมูลเพิ่มเติมgtag('event', 'view_item_list', { item_list_id: "related_products", item_list_name: "Related products", items: [{ item_id: "SKU_123", item_name: "Test Item", currency: "USD", discount: 2.22, price: 99.9, quantity: 1 }] });
add_to_cart
: เมื่อผู้ใช้เพิ่มผลิตภัณฑ์อย่างน้อย 1 รายการลงในรถเข็นช็อปปิ้ง ดูข้อมูลเพิ่มเติมgtag('event', 'add_to_cart', { value: 99.0, currency: "USD", items: [{ item_id: "SKU_123", item_name: "Test Product", price: 99.0, currency: ‘USD’, quantity: 1, item_category: "All Products" }] });
begin_checkout
: เมื่อผู้ใช้เริ่มกระบวนการชำระเงินสำหรับผลิตภัณฑ์อย่างน้อย 1 รายการ ดูข้อมูลเพิ่มเติมgtag('event', 'begin_checkout') { value: 99.0, currency: "USD", items: [{ item_id: "SKU_123", item_name: "Test Product", price: 99.0, currency: ‘USD’, quantity: 1, item_category: "All Products" }] });
purchase
: เมื่อผู้ใช้ซื้อผลิตภัณฑ์หรือบริการอย่างน้อย 1 รายการ ดูข้อมูลเพิ่มเติมgtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});
sign_up
: เมื่อผู้ใช้ลงชื่อสมัครใช้เพื่อให้ผู้ใช้ปลายทางดูวิธีลงชื่อสมัครใช้ที่ได้รับความนิยมสูงสุดได้ (เช่น บัญชี Google, อีเมล) ดูข้อมูลเพิ่มเติมgtag('event', 'sign_up', {method: 'web'});
generate_lead
: เมื่อผู้ใช้ส่งแบบฟอร์ม ดูข้อมูลเพิ่มเติมgtag('event', 'generate_lead', {value: XX, currency: 'USD'});
subscribe
: เมื่อผู้ใช้สมัครใช้บริการหรือสมัครรับจดหมายข่าวgtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});
book_appointment
: เมื่อผู้ใช้จองการนัดหมายgtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});
คำแนะนำเพิ่มเติม
Google รองรับเหตุการณ์และพารามิเตอร์อื่นๆ อีกจำนวนมาก โดยเฉพาะในอีคอมเมิร์ซ โดยทั่วไป เราขอแนะนําให้คุณจับภาพสิ่งต่อไปนี้
- เหตุการณ์ความสำเร็จใดๆ ที่เกี่ยวข้องกับมูลค่าโดยตรง
- เหตุการณ์ความสําเร็จที่ส่งผลให้เกิดเหตุการณ์สําคัญ (add_to_cart, sign_up ฯลฯ)
- การมีส่วนร่วมและการโต้ตอบของผู้ใช้ที่ช่วยให้ผู้ลงโฆษณาทราบว่า กำลังมีส่วนร่วมกับผู้ใช้ปลายทางอย่างไร
แหล่งข้อมูลเพิ่มเติมที่อธิบายเพิ่มเติมเกี่ยวกับการรวบรวมเหตุการณ์มีดังนี้
- เหตุการณ์
- เหตุการณ์ที่แนะนำตามกรณีการใช้งาน
- วัดอีคอมเมิร์ซสําหรับพร็อพเพอร์ตี้ Google Analytics 4
เราสนใจที่จะพูดคุยเกี่ยวกับส่วนขยายที่เป็นไปได้สำหรับสคีมานี้ โปรดแจ้งให้เราทราบหากคุณมีข้อเสนอแนะ
ยืนยันการผสานรวมที่อัปเดตแล้ว
ก่อนที่จะนำการเปลี่ยนแปลงไปใช้จริง ให้ตรวจสอบความเข้ากันได้กับสิ่งต่อไปนี้
- แท็ก Google ที่มีปลายทาง Google Analytics 4
- แท็ก Google สําหรับรีมาร์เก็ตติ้งและการวัด Conversion
นอกจากนี้ โปรดตรวจสอบว่าแท็กเริ่มทํางานอย่างถูกต้องในทุกหน้า รวมถึงหน้าเหตุการณ์สําคัญ โดยใช้เครื่องมือต่อไปนี้
- ผู้ช่วยแท็กของ Google: แท็ก Assistant ช่วยให้คุณเห็นว่าแท็ก Google ใดเริ่มทำงานและในลำดับใด แท็ก โหมดแก้ไขข้อบกพร่องของ Assistant จะแสดงข้อมูลที่ส่งไปยังชั้นข้อมูลและ เหตุการณ์ที่ทำให้เกิดการแลกเปลี่ยนข้อมูลดังกล่าว
- เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome: ใช้แท็บเครือข่ายเพื่อกรองคำขอที่มี "google" เพื่อยืนยันวิธีส่งข้อมูล
- (ฝั่งเซิร์ฟเวอร์) รายงานแบบเรียลไทม์ของ Google Analytics: สร้างบัญชี Google Analytics ได้ฟรีและใช้รายงานแบบเรียลไทม์เพื่อดูว่าเซิร์ฟเวอร์ของ Google ได้รับ Hit ของแท็กหรือไม่
หากต้องการรายงานข้อบกพร่องหรือแสดงความคิดเห็นเกี่ยวกับข้อมูลที่ขาดหายไป ให้กรอกแบบฟอร์มการสนับสนุนระบบจัดการเนื้อหา
หากเป็นไปได้ โปรดแชร์สิทธิ์เข้าถึงการทดสอบกับ Google เพื่อทำการยืนยันอย่างต่อเนื่อง
อัปเดตวิธีการติดตั้งใช้งานสำหรับผู้ใช้
อัปเดตเอกสารประกอบเพื่อให้วิธีการที่ชัดเจนเกี่ยวกับวิธีใช้ผลิตภัณฑ์การวัดผลของ Google ผ่านการติดตั้งใช้งาน โปรดแชร์ฉบับร่างของวิธีการเหล่านี้โดยกรอกข้อมูลในแบบฟอร์มตรวจสอบเอกสารประกอบการตั้งค่าการผสานรวม CMS เพื่อให้เราแสดงความคิดเห็นได้