เอกสารนี้มีคำแนะนำที่ครอบคลุมเกี่ยวกับวิธีใช้เมธอด _trackTiming
เกริ่นนำ
การศึกษาพบว่าการลดเวลาที่ใช้ในการโหลดหน้าเว็บจะช่วยปรับปรุงประสบการณ์โดยรวมของผู้ใช้เว็บไซต์ Google Analytics มีรายงานที่มีประสิทธิภาพจำนวนมากซึ่งจะติดตามเวลาในการโหลดหน้าเว็บโดยอัตโนมัติ แต่หากต้องการติดตามเวลาที่ใช้ในการโหลดทรัพยากรหนึ่งๆ ล่ะ
เช่น การโหลดไลบรารี JavaScript ยอดนิยมใช้เวลานานเกินไปจนทำให้ประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้บางรายลดลงใช่ไหม
ระยะเวลาของผู้ใช้ช่วยให้คุณตอบคำถามนี้ได้โดยระบุวิธีเดิมสำหรับการติดตามระยะเวลาใน Google Analytics
หากต้องการดูตัวอย่างที่ใช้ได้ โปรดดูตัวอย่างโค้ดการจับเวลาของผู้ใช้
การตั้งค่าการจับเวลาผู้ใช้
หากต้องการรวบรวมข้อมูลเวลาของผู้ใช้ คุณจะต้องใช้เมธอด _trackTiming
ซึ่งจะส่งข้อมูลเวลาไปยัง Google Analytics
_gaq.push([‘_trackTiming’, category, variable, time, opt_label, opt_sample]);
ตำแหน่งของพารามิเตอร์ ได้แก่
พารามิเตอร์ | ค่า | จำเป็น | สรุป |
---|---|---|---|
category |
string |
ใช่ | สตริงสำหรับการจัดหมวดหมู่ตัวแปรเวลาของผู้ใช้ทั้งหมดเป็นกลุ่มเชิงตรรกะเพื่อให้การรายงานง่ายขึ้น
เช่น คุณอาจใช้ค่า jQuery หากคุณกำลังติดตามเวลาที่ใช้ในการโหลดไลบรารี JavaScript ดังกล่าว |
variable |
string |
ใช่ | สตริงสำหรับระบุชื่อการดำเนินการของทรัพยากรที่ติดตามอยู่ เช่น คุณอาจใช้ค่า JavaScript Load หากคุณต้องการติดตามเวลาที่ใช้ในการโหลดไลบรารี JavaScript ของ jQuery โปรดทราบว่าคุณใช้ตัวแปรเดียวกันในหลายหมวดหมู่ได้เพื่อติดตามระยะเวลาของเหตุการณ์ที่ใช้ได้กับหมวดหมู่เหล่านี้ เช่น Javascript Load และ Page Ready Time เป็นต้น |
time |
number |
ใช่ | จำนวนมิลลิวินาทีในเวลาที่ผ่านไปในการรายงานไปยัง Google Analytics หากไลบรารี jQuery ใช้เวลาโหลด 20 มิลลิวินาที คุณจะส่งค่า 20 |
opt_label |
string |
ไม่ | สตริงที่ใช้เพื่อเพิ่มความยืดหยุ่นในการแสดงภาพระยะเวลาของผู้ใช้ในรายงาน คุณใช้ป้ายกำกับเพื่อเน้นการทดสอบย่อยต่างๆ สำหรับชุดค่าผสมหมวดหมู่และตัวแปรเดียวกันได้ด้วย เช่น หากโหลด jQuery จากเครือข่ายนำส่งเนื้อหาของ Google เราจะใช้ค่า Google CDN |
opt_sampleRate |
number |
ไม่ | จำนวนที่จะลบล้างเปอร์เซ็นต์ของผู้เข้าชมที่ Hit ตามเวลาซึ่งส่งไปยัง Google Analytics ด้วยตนเอง
ค่าเริ่มต้นจะกำหนดไว้ที่จำนวนเดียวกับการรวบรวมข้อมูลความเร็วเว็บไซต์ทั่วไปและอิงตามเปอร์เซ็นต์ของผู้เข้าชม ดังนั้น หากคุณต้องการติดตาม Hit _trackTiming สำหรับผู้เข้าชม 100% ให้ใช้ค่า 100
โปรดทราบว่าแต่ละ Hit จะนับรวมกับ Hit ทั่วไป 500 Hit ต่อเซสชัน |
เวลาที่ใช้ในการติดตาม
เมื่อใช้เมธอด _trackTiming
คุณจะระบุจำนวนมิลลิวินาทีที่ใช้ในพารามิเตอร์ time
ดังนั้นคุณซึ่งเป็นนักพัฒนาแอปที่จะเขียนโค้ดเพื่อคว้าโอกาสนี้ไว้ วิธีที่ง่ายที่สุดในการดำเนินการนี้คือการสร้างการประทับเวลาที่จุดเริ่มต้นของช่วงเวลาและสร้างการประทับเวลาอีกครั้งที่ตอนท้ายของช่วงเวลา จากนั้นคุณจะใช้ผลต่างระหว่างการประทับเวลาทั้ง 2 รายการนี้ได้
ต่อไปนี้คือตัวอย่างเล็กๆ น้อยๆ
var startTime = new Date().getTime(); setTimeout(myCallback, 200); function myCallback(event) { var endTime = new Date().getTime(); var timeSpent = endTime - startTime; _gaq.push(['_trackTiming', 'Test', 'callback_timeout', timeSpent, 'animation']); }
ระบบจะดึงข้อมูลการประทับเวลาเริ่มต้นโดยการสร้างออบเจ็กต์ Date
ใหม่ และรับข้อมูลเวลาเป็นมิลลิวินาที ถัดไป ระบบจะใช้ฟังก์ชัน setTimeout
เพื่อเรียกใช้ฟังก์ชัน myCallback
ใน 200 มิลลิวินาที เมื่อระบบเรียกใช้ฟังก์ชันเรียกกลับ ระบบจะดึงข้อมูลการประทับเวลา endTime
โดยการสร้างออบเจ็กต์ Date
ใหม่ จากนั้นระบบจะคำนวณความแตกต่างของเวลาสิ้นสุดและเวลาเริ่มต้นเพื่อให้ได้เวลาที่ใช้
สุดท้ายแล้วระบบจะส่งเวลาที่ใช้ไปยัง Google Analytics
ตัวอย่างนี้ไม่สำคัญ แต่ก็แสดงให้เห็นถึงแนวคิดของวิธีการติดตามเวลา มาดูตัวอย่างที่สมจริงมากขึ้นกัน
เวลาที่ใช้ในการติดตามการโหลดทรัพยากร JavaScript
ปัจจุบันเว็บไซต์จำนวนมากมีไลบรารี JavaScript ของบุคคลที่สามหรือขอข้อมูลผ่านออบเจ็กต์ JSON แม้ว่าเว็บไซต์อาจโหลดทรัพยากรเหล่านี้ได้อย่างรวดเร็วที่บ้าน แต่ทรัพยากรเดียวกันอาจโหลดช้ามากสำหรับผู้ใช้ในประเทศอื่นๆ ทรัพยากรที่โหลดช้าเหล่านี้อาจทําให้ประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้ในต่างประเทศแย่ลง
ฟีเจอร์ปรับความเร็วเว็บไซต์ของผู้ใช้สามารถช่วยคุณรวบรวมและรายงานเวลาที่ใช้ในการโหลดทรัพยากรเหล่านี้ได้
ตัวอย่างง่ายๆ ที่สาธิตวิธีติดตามเวลาที่ใช้ของฟังก์ชันที่โหลดทรัพยากร JavaScript แบบไม่พร้อมกันมีดังนี้
var startTime; function loadJs(url, callback) { var js = document.createElement('script'); js.async = true; js.src = url; var s = document.getElementsByTagName('script')[0]; js.onload = callback; startTime = new Date().getTime(); s.parentNode.insertBefore(js, s); } function myCallback(event) { var endTime = new Date().getTime(); var timeSpent = endTime - startTime; _gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN']); // Library has loaded. Now you can use it. };
โปรดสังเกตว่าตัวอย่างนี้คล้ายกับตัวอย่างก่อนหน้านี้มาก
ในตัวอย่างนี้ loadJs
เป็นฟังก์ชันยูทิลิตีที่โหลดทรัพยากร JavaScript ด้วยการสร้างองค์ประกอบสคริปต์แบบไดนามิกและแนบไว้กับ DOM ของเบราว์เซอร์ ฟังก์ชันนี้ยอมรับพารามิเตอร์ 2 ตัว ได้แก่ URL เป็นสตริง และฟังก์ชันเรียกกลับที่จะทำงานเมื่อสคริปต์โหลดขึ้น
ภายใน loadJs
ระบบจะจัดเก็บการประทับเวลาเริ่มต้นไว้ใน startTime
เมื่อโหลดทรัพยากรแล้ว ฟังก์ชันการติดต่อกลับจะทำงาน ในฟังก์ชันเรียกกลับ ระบบจะดึงข้อมูลการประทับเวลาสิ้นสุดและใช้ในการคำนวณเวลาที่ใช้ในการโหลดทรัพยากร JavaScript ระบบจะส่งเวลาที่ใช้นี้ไปยัง Google Analytics โดยใช้เมธอด _trackTiming
หากคุณโทรหา
loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, callback);
จะโหลดไลบรารี jQuery แบบไม่พร้อมกันจากเครือข่ายการแสดงเนื้อหาของ Google และเมื่อดำเนินการเสร็จแล้ว ให้เรียกใช้ฟังก์ชันเรียกกลับ ซึ่งจะส่งเวลาในการโหลดของทรัพยากรไปยัง Google Analytics
การทำงานกับการจับเวลาหลายครั้งของผู้ใช้
สมมติว่าคุณต้องการโหลดทรัพยากร JavaScript หลายรายการโดยใช้โค้ดด้านบน
เนื่องจากตัวแปร startTime
เป็นแบบส่วนกลาง ทุกครั้งที่คุณติดตามจุดเริ่มต้นของระยะเวลาหนึ่งๆ ระบบจะเขียนทับตัวแปร startTime
ซึ่งทำให้ใช้เวลาไม่ถูกต้อง
ดังนั้นตามแนวทางปฏิบัติแนะนำ คุณจึงต้องคงอินสแตนซ์ของเวลาเริ่มต้นและสิ้นสุดที่ไม่ซ้ำกันสำหรับทรัพยากรทุกรายการที่ต้องการติดตาม
นอกจากนี้ โปรดสังเกตว่าพารามิเตอร์หมวดหมู่และตัวแปรไปยัง _trackTiming
นั้นฮาร์ดโค้ดไว้ ดังนั้นหากใช้ loadJs
เพื่อโหลดทรัพยากรหลายรายการ คุณจะแยกทรัพยากรแต่ละรายการในรายงาน Google Analytics ไม่ได้
ทั้ง 2 ปัญหานี้แก้ไขได้ด้วยการจัดเก็บพารามิเตอร์เวลาและ _trackTiming
ในออบเจ็กต์ JavaScript
การสร้างออบเจ็กต์ JavaScript เพื่อจัดเก็บเวลาของผู้ใช้
ต่อไปนี้เป็นออบเจ็กต์ JavaScript ง่ายๆ ที่ใช้จัดเก็บข้อมูลเวลาของผู้ใช้สำหรับทรัพยากรแต่ละรายการที่ติดตามได้
function TrackTiming(category, variable, opt_label) { this.category = category; this.variable = variable; this.label = opt_label ? opt_label : undefined; this.startTime; this.endTime; return this; } TrackTiming.prototype.startTime = function() { this.startTime = new Date().getTime(); return this; } TrackTiming.prototype.endTime = function() { this.endTime = new Date().getTime(); return this; } TrackTiming.prototype.send = function() { var timeSpent = this.endTime - this.startTime; window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]); return this; }
ตอนนี้เราใช้ออบเจ็กต์นี้เพื่อทำให้ loadJs
ใช้งานได้กับคำขอหลายรายการแล้ว
กำลังส่งการกำกับเวลาของผู้ใช้ที่จัดเก็บไว้
ตอนนี้เรามีวิธีจัดเก็บข้อมูลเวลาของทรัพยากรแต่ละรายการที่ต้องการติดตามแล้ว วิธีอัปเดต loadJs
เพื่อใช้งานมีดังนี้
var tt = new TrackTiming('jQuery', 'Load Library', 'Google CDN'); loadJs(‘//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, myCallback, tt); function loadJs(url, callback, tt) { var js = document.createElement('script'); js.async = true; js.src = url; js.onload = callback; var s = document.getElementsByTagName('script')[0]; tt.startTime(); js.tt = tt; s.parentNode.insertBefore(js, s); } function myCallback(event) { var e = event || window.event; var target = e.target ? e.target : e.srcElement; target.tt.endTime().send(); // Library has loaded. Now you can use it. }
โค้ดด้านบนเริ่มต้นด้วยการสร้างออบเจ็กต์ TrackTiming
ใหม่ที่มีการส่งผ่านหมวดหมู่ ตัวแปร และป้ายกำกับที่ไม่บังคับไปยังตัวสร้าง จากนั้นระบบจะส่งออบเจ็กต์ TrackTiming
เป็นพารามิเตอร์ไปยังฟังก์ชัน loadJs
ภายใน loadJs
ระบบจะเรียกใช้เมธอด startTime
เพื่อรับและจัดเก็บการประทับเวลาเริ่มต้น
ในตัวอย่างก่อนหน้านี้ ฟังก์ชันเรียกกลับสามารถเข้าถึงตัวแปร startTime
ได้อย่างง่ายดายเนื่องจากเป็นตัวแปรส่วนกลาง ตอนนี้ startTime
เป็นส่วนหนึ่งของออบเจ็กต์ TrackTiming
แล้ว เราจึงต้องมีวิธีส่งออบเจ็กต์นี้จากฟังก์ชันloadJs ไปยังฟังก์ชันเรียกกลับ
วิธีแก้ปัญหานี้คือการเพิ่มออบเจ็กต์ TrackTiming
เป็นพร็อพเพอร์ตี้ลงในองค์ประกอบสคริปต์ เนื่องจากฟังก์ชันโค้ดเรียกกลับจะทำงานจากเมธอด onload
ของสคริปต์ ระบบจึงส่งผ่านออบเจ็กต์เหตุการณ์เป็นพารามิเตอร์ จากนั้นคุณจะใช้ออบเจ็กต์เหตุการณ์นี้เพื่อดึงออบเจ็กต์สคริปต์ต้นฉบับที่เริ่มการทำงานของเหตุการณ์ได้ และออบเจ็กต์ดังกล่าวสามารถใช้เพื่อเข้าถึงออบเจ็กต์ TrackTiming
ได้
เมื่อเราเข้าถึงออบเจ็กต์ TrackTiming
เดิมได้แล้ว สคริปต์จะหยุดเวลาและส่งข้อมูลได้
ดู การสาธิตการใช้งานตัวอย่างนี้แบบสดๆ ในเว็บไซต์ตัวอย่างของเรา
รูปแบบของการเพิ่มออบเจ็กต์ TrackTiming เป็นพร็อพเพอร์ตี้ไปยังออบเจ็กต์ที่ติดตามมีแนวโน้มที่จะทำงานได้ดีในการติดตามกลไกการโหลดแบบไม่พร้อมกันอื่นๆ เช่น การใช้ออบเจ็กต์ XMLHttpRequest
การติดตาม XMLHttpRequests
อีกวิธีหนึ่งที่ใช้บ่อยในการโหลดทรัพยากรของหน้าเว็บแบบไม่พร้อมกันคือการใช้ออบเจ็กต์ XMLHttpRequest
นอกจากนี้ คุณยังติดตามเวลาที่ใช้ในการโหลดทรัพยากรเหล่านี้ได้โดยใช้ทั้งเมธอด _trackTiming
และออบเจ็กต์ TimeTracker
ตัวอย่างที่โหลดไฟล์ใบเสนอราคาจากเซิร์ฟเวอร์มีดังนี้
var url = ‘//myhost.com/quotes.txt’; var tt = new TrackTime('xhr demo', 'load quotes'); makeXhrRequest(url, myCallback, tt); function makeXhrRequest(url, callback, tt) { if (window.XMLHttpRequest) { var xhr = new window.XMLHttpRequest; xhr.open('GET', url, true); xhr.onreadystatechange = callback; tt.startTime(); xhr.tt = tt; xhr.send(); } } function myCallback(event) { var e = event || window.event; var target = e.target ? e.target : e.srcElement; if (target.readyState == 4) { if (target.status == 200) { target.tt.endTime().send(); // Do something with the resource. } } }
ตัวอย่างนี้ดูคล้ายกับตัวอย่างloadJs ดูการสาธิตการใช้งานจริงที่นี่
หลีกเลี่ยงการส่งข้อมูลที่ไม่ถูกต้อง
ในตัวอย่างด้านบน หากต้องการทราบเวลาที่ใช้ โค้ดจะหักเวลาสิ้นสุดออกจากเวลาเริ่มต้น ซึ่งจะทํางานได้ดีตราบใดที่เวลาเริ่มต้นน้อยกว่าเวลาสิ้นสุด แต่อาจกลายเป็นปัญหาได้หากเวลาในเบราว์เซอร์เปลี่ยนแปลง หากผู้ใช้เปลี่ยนเวลาแมชชีนหลังจากตั้งเวลาเริ่มต้นแล้ว ระบบอาจส่งข้อมูลที่ไม่ถูกต้องไปยัง Google Analytics ได้ ปัญหาใหญ่เกี่ยวกับการส่งค่าที่ไม่ถูกต้องจำนวนมากเพียงค่าเดียวคือการส่งค่าเมตริกเฉลี่ยและเมตริกรวมจะบิดเบือน
โดยทั่วไปแล้ว แนวทางปฏิบัติแนะนำคือให้ตรวจสอบว่าเวลาที่ใช้มากกว่า 0 และน้อยกว่าบางเวลาก่อนที่จะส่งข้อมูลไปยัง Google Analytics เราแก้ไขวิธีการส่ง TimeTracker
ข้างต้นเพื่อดำเนินการตรวจสอบนี้ได้
TrackTiming.prototype.send = function() { var timeSpent = this.endTime - this.startTime; var hourInMillis = 1000 * 60 * 60; if (0 < timeSpent && timeSpent < hourInMillis) { window._gaq.push(['_trackTiming', this.category, this.variable, timeSpent, this.label]); } return this; }
การลบล้างอัตราการสุ่มตัวอย่างและการแก้ไขข้อบกพร่อง
เมธอด _trackTiming
จะส่งข้อมูลไปยัง Google Analytics ที่อัตราเดียวกันเท่านั้นสําหรับเมตริกความเร็วเว็บไซต์ทั้งหมดที่ Google Analytics รวบรวม ค่าเริ่มต้นคือ 1% ของผู้เข้าชมทั้งหมด
สำหรับเว็บไซต์ที่มีการเข้าชมจำนวนมาก ค่าเริ่มต้นจะสามารถทำได้ แต่สำหรับเว็บไซต์ที่มีการเข้าชมน้อย คุณจะเพิ่มอัตราการสุ่มตัวอย่างได้โดยการตั้งค่าพารามิเตอร์อัตราตัวอย่างซึ่งไม่บังคับ ตัวอย่างเช่น
_gaq.push(['_trackTiming', 'jQuery', 'Load Library', timeSpent, 'Google CDN', 50]);
จะรวบรวมข้อมูล _trackTiming จากผู้เข้าชม 50%
หรือจะตั้งค่าเมธอด
_setSiteSpeedSampleRate
เพื่อกำหนดอัตราการสุ่มตัวอย่างสำหรับช่วงเวลาความเร็วเว็บไซต์ทั้งหมดรวมถึงเมธอด _trackTiming
ก็ได้ ตัวอย่างเช่น
_gaq.push([‘_setSiteSpeedSampleRate’, 50]);
จะรวบรวมข้อมูล _trackTiming
จาก 50% ของผู้เข้าชมด้วย
โดยทั่วไปแล้ว เมื่อคุณทดสอบและยืนยันการติดตั้งใช้งาน Google Analytics คุณจะมีการเข้าชมเว็บไซต์ที่กำลังทดสอบน้อยมาก ดังนั้น การเพิ่มอัตราการสุ่มตัวอย่างเป็น 100% ขณะทดสอบจึงมีประโยชน์
การติดตามเหตุการณ์เวลาอื่นๆ
แม้ว่าตัวอย่างทั้งหมดข้างต้นจะเน้นไปที่การใช้เมธอด _trackTiming
เพื่อติดตามระยะเวลาที่ใช้ในการโหลดทรัพยากร แต่ก็สามารถใช้วิธีนี้เพื่อติดตามระยะเวลาทั่วไปได้ด้วย เช่น ที่คุณติดตามได้มีดังนี้
- เวลาที่ผู้เข้าชมใช้ในการดูวิดีโอ
- เวลาที่ใช้ในการผ่านด่านในเกม
- เวลาที่ผู้เข้าชมใช้ในการอ่านส่วนหนึ่งของเว็บไซต์
ในแต่ละกรณี คุณจะใช้ออบเจ็กต์ JavaScript TimeTracker
เดิมที่แสดงข้างต้นซ้ำได้เพื่อให้รวบรวมและส่งข้อมูลเวลาที่ใช้ไปยัง Google Analytics ได้ง่ายขึ้น