תזמוני משתמש - מעקב באינטרנט (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 no מחרוזת שניתן להשתמש בה כדי להוסיף גמישות בהצגת תזמוני משתמש בדוחות. אפשר גם להשתמש בתוויות כדי להתמקד בניסויי משנה שונים שמשתייכים לאותה שילוב של קטגוריה ומשתנים. לדוגמה, אם טוענים את jQuery מהרשת להעברת תוכן של Google, נשתמש בערך Google CDN.
opt_sampleRate number no מספר שצריך לבטל באופן ידני את אחוז המבקרים שהיטים שלהם נשלחים אל Google Analytics. ערך ברירת המחדל מוגדר לפי אותו מספר כמו איסוף הנתונים הכללי על מהירות האתר, והוא מבוסס על אחוז המבקרים. לכן, כדי לעקוב אחרי היטים של _trackTiming עבור 100% מהמבקרים, יש להשתמש בערך 100. שים לב שכל היט נחשב כחלק מהמגבלה הכללית של 500 היטים לכל סשן.

חזרה למעלה

מעקב אחר זמן הוצאה

כשמשתמשים בשיטה _trackTiming, מציינים את מספר אלפיות השנייה שמוציאים בפרמטר time. לכן, המפתחים אחראים לכתוב קוד שיתעד את התקופה הזו. הדרך הקלה ביותר לעשות זאת היא ליצור חותמת זמן בתחילת פרק זמן מסוים וחותמת זמן נוספת בסוף התקופה. לאחר מכן אפשר לחשב את ההפרש בין שתי חותמות הזמן כדי לקבל את הזמן שיוקדש.

דוגמה טריוויאלית:

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 של הדפדפן. הפונקציה מקבלת שני פרמטרים: כתובת 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.

אפשר לפתור את שתי הבעיות על ידי אחסון הפרמטרים של התזמון וה-_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 חדש, שבו הקטגוריה, המשתנה והתווית האופציונלית מועברים אל ה-constructor. לאחר מכן האובייקט TrackTiming מועבר כפרמטר לפונקציה loadJs.

בתוך loadJs, מתבצעת קריאה ל-method 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 כדי לעקוב אחר הזמן שנדרש לטעינת משאבים, אבל אפשר להשתמש בשיטה הזו גם כדי לעקוב אחר משכי זמן כלליים. לדוגמה אפשר לעקוב אחר:

  • הזמן שמבקר מקדיש לצפייה בסרטון.
  • הזמן שנדרש כדי להשלים שלב במשחק.
  • משך הזמן שמבקר מקדיש לקריאת קטע באתר.

בכל אחד מהמקרים האלה אפשר להשתמש שוב באובייקט TimeTracker JavaScript שהוצג למעלה, כדי לפשט את האיסוף והשליחה של הנתונים שנדרשים אל Google Analytics.