หน้านี้จะอธิบายวิธีใช้คำสั่ง gtag.js เพื่อส่งข้อมูลจากเว็บไซต์ไปยัง Google Analytics
ส่งข้อมูลด้วยคำสั่ง event
เมื่อคุณเพิ่มข้อมูลโค้ดที่ติดทั่วเว็บไซต์ลงในหน้าเว็บแล้ว ให้ใช้คำสั่ง event
เพื่อส่งข้อมูลไปยัง Google Analytics ตัวอย่างเช่น ใช้คำสั่ง event
ต่อไปนี้เพื่อระบุว่าผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Google แล้ว
gtag('event', 'login', {'method': 'Google'});
ดูข้อมูลเพิ่มเติมเกี่ยวกับคำสั่ง event
ในเอกสารอ้างอิง API
กำหนดเส้นทางข้อมูลไปยังกลุ่มและพร็อพเพอร์ตี้
คุณส่งข้อมูลการวัด 1 ชุดไปยังรหัสพร็อพเพอร์ตี้ Google Analytics อย่างน้อย 1 รหัส และส่งข้อมูลอีกชุดไปยังรหัสพร็อพเพอร์ตี้อื่นๆ ได้ คุณจัดระเบียบพร็อพเพอร์ตี้เป็นกลุ่มและกำหนดเส้นทางข้อมูลไปยังกลุ่มได้
ตัวอย่างเช่น ตัวอย่างโค้ดต่อไปนี้แสดงวิธีกำหนดเส้นทางเหตุการณ์ sign_in
ไปยังกลุ่ม "เอเจนซี" ที่มีพร็อพเพอร์ตี้ Google Analytics 2 รายการ
// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });
// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีจัดกลุ่มและกำหนดเส้นทางข้อมูล
รับทราบเมื่อมีการส่งกิจกรรม
ในบางกรณี คุณจำเป็นต้องทราบว่ามีการส่งเหตุการณ์ไปยัง Google Analytics เรียบร้อยแล้วเมื่อใดเพื่อจะได้ดำเนินการต่างๆ ได้ทันทีหลังจากนั้น กรณีนี้พบได้บ่อยเมื่อคุณต้องการบันทึกการโต้ตอบบางอย่างที่อาจนำผู้ใช้ออกจากหน้าปัจจุบัน เบราว์เซอร์จำนวนมากหยุดเรียกใช้ JavaScript ทันทีที่หน้าถัดไปเริ่มโหลด ซึ่งหมายความว่าคำสั่ง event
ของ gtag.js อาจไม่สามารถทํางานได้
ตัวอย่างเช่น คุณอาจต้องการส่งเหตุการณ์ไปยัง Google Analytics เพื่อบันทึกว่าผู้ใช้ได้คลิกปุ่มส่งแบบฟอร์ม ในกรณีส่วนใหญ่ การคลิกปุ่มส่งจะเริ่มโหลดหน้าเว็บถัดไปทันทีก่อนที่คำสั่ง event
จะมีโอกาสได้ดำเนินการ
วิธีแก้ปัญหาคือการสกัดกั้นเหตุการณ์เพื่อหยุดการโหลดหน้าถัดไป เพื่อให้คุณส่งเหตุการณ์ไปยัง Google Analytics ได้ หลังจากส่งกิจกรรมแล้ว ให้ส่งแบบฟอร์มโดยใช้โปรแกรม
ใช้ฟังก์ชันเรียกกลับของเหตุการณ์
คุณสามารถใช้ฟังก์ชันเรียกกลับของเหตุการณ์ที่จะเรียกใช้ทันทีที่ส่งเหตุการณ์สำเร็จ
ตัวอย่างต่อไปนี้แสดงวิธียกเลิกการส่งเริ่มต้นของแบบฟอร์ม ส่งเหตุการณ์ไปยัง Google Analytics แล้วส่งแบบฟอร์มอีกครั้งโดยใช้ฟังก์ชันเรียกกลับของเหตุการณ์
// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevent the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Send the event to Google Analytics and
// resubmit the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': function() {
form.submit();
}
});
});
จัดการระยะหมดเวลา
ตัวอย่างข้างต้นมีข้อด้อยอยู่ 1 ข้อคือ หากโหลดไลบรารี gtag.js ไม่สำเร็จ ฟังก์ชันเรียกกลับของเหตุการณ์จะไม่ทำงานและผู้ใช้จะส่งแบบฟอร์มนี้ไม่ได้
เมื่อใดก็ตามที่คุณใส่ฟังก์ชันการทำงานของเว็บไซต์ที่สำคัญภายในฟังก์ชันโค้ดเรียกกลับของเหตุการณ์ คุณควรใช้ฟังก์ชันระยะหมดเวลาทุกครั้งเพื่อจัดการกรณีที่ไลบรารี gtag.js โหลดไม่สำเร็จ
ตัวอย่างต่อไปนี้ช่วยเพิ่มประสิทธิภาพโค้ดข้างต้นให้ใช้ระยะหมดเวลา หากผ่านไป 1 วินาทีหลังจากที่ผู้ใช้คลิกปุ่มส่งและฟังก์ชันการเรียกกลับของเหตุการณ์ไม่ทำงาน ระบบก็ยังส่งแบบฟอร์มอีกครั้งอยู่
// Gets a reference to the form element, assuming // it contains the ID attribute "signup-form". var form = document.getElementById('signup-form'); // Adds a listener for the "submit" event. form.addEventListener('submit', function(event) { // Prevents the browser from submitting the form // and thus unloading the current page. event.preventDefault(); // Creates a timeout to call submitForm after one second. setTimeout(submitForm, 1000); // Monitors whether or not the form has been submitted. // This prevents the form from being submitted twice in cases // where the event callback function fires normally. var formSubmitted = false; function submitForm() { if (!formSubmitted) { formSubmitted = true; form.submit(); } } // Sends the event to Google Analytics and // resubmits the form once the hit is done. gtag('event', 'signup_form_complete', { 'event_callback': submitForm }); });
หากคุณใช้รูปแบบข้างต้นทั่วทั้งเว็บไซต์ ให้สร้างฟังก์ชันยูทิลิตีเพื่อจัดการการหมดเวลา
ฟังก์ชันยูทิลิตีต่อไปนี้จะยอมรับฟังก์ชันเป็นอินพุตและแสดงผลฟังก์ชันใหม่ หากมีการเรียกฟังก์ชันการแสดงผลก่อนระยะหมดเวลา (ระยะหมดเวลาเริ่มต้นคือ 1 วินาที) ระบบจะล้างระยะหมดเวลาและเรียกใช้ฟังก์ชันอินพุต หากไม่มีการเรียกใช้ฟังก์ชันที่แสดงผลก่อนระยะหมดเวลา ระบบจะเรียกใช้ฟังก์ชันอินพุตโดยไม่คำนึงถึง
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
ตอนนี้คุณสามารถรวมฟังก์ชันโค้ดเรียกกลับของเหตุการณ์ทั้งหมดโดยมีระยะหมดเวลาเพื่อให้เว็บไซต์ทํางานตามที่คาดไว้ได้ แม้ว่าในกรณีที่ส่งเหตุการณ์ไม่สําเร็จหรือไลบรารี gtag.js ไม่โหลดขึ้นมาก็ตาม
// Gets a reference to the form element, assuming // it contains the ID attribute "signup-form". var form = document.getElementById('signup-form'); // Adds a listener for the "submit" event. form.addEventListener('submit', function(event) { // Prevents the browser from submitting the form // and thus unloading the current page. event.preventDefault(); // Sends the event to Google Analytics and // resubmits the form once the hit is done. gtag('event', 'signup_form', { 'event_callback': { createFunctionWithTimeout(function() { form.submit(); }) }}); });
ระบุกลไกการขนส่งแบบต่างๆ
โดยค่าเริ่มต้น gtag.js จะเลือกวิธี HTTPS และกลไกการรับส่งข้อมูลที่จะส่ง Hit ได้อย่างมีประสิทธิภาพ ตัวเลือกทั้ง 3 อย่าง ได้แก่
- "image" (โดยใช้ออบเจ็กต์
Image
) - "xhr" (โดยใช้ออบเจ็กต์
XMLHttpRequest
) - "บีคอน" (โดยใช้เมธอด
navigator.sendBeacon
)
วิธีการ 2 แบบแรกจะแชร์ปัญหาที่อธิบายไว้ในส่วนก่อนหน้า นั่นคือ ระบบจะไม่ส่ง Hit หากมีการยกเลิกการโหลดหน้าเว็บ เมธอด navigator.sendBeacon
แก้ปัญหานี้ด้วยการส่ง Hit แบบไม่พร้อมกันไปยังเว็บเซิร์ฟเวอร์โดยไม่ต้องตั้งค่าโค้ดเรียกกลับของ Hit
รหัสต่อไปนี้จะกำหนดกลไกการส่งไปยัง 'beacon'
สำหรับเบราว์เซอร์ที่รองรับ
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});