ระยะเวลาของผู้ใช้ - การติดตามเว็บ (ga.js)

เอกสารนี้มีคำแนะนำที่ครอบคลุมเกี่ยวกับวิธีใช้เมธอด _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 ได้ง่ายขึ้น