שליחת נתונים אל Google Analytics

השורה האחרונה בקטע הקוד למדידה של JavaScript מוסיפה פקודת send לתור הפקודות ga() כדי לשלוח צפייה בדף אל Google Analytics:

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

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

במדריך הזה מתוארות הדרכים השונות לשליחת נתונים אל Google Analytics ומסבירים איך לקבוע אילו נתונים נשלחים.

היטים, סוגי היטים ו-Measurement Protocol

כאשר כלי מעקב שולח נתונים אל Google Analytics, הוא נקרא שליחת היט, ולכל היט חייב להיות סוג היט. התג של Google Analytics שולח היט מסוג pageview. סוגי היטים אחרים כוללים את screenview, event, transaction, item, social, exception ו-timing. במדריך הזה מפורטים המושגים והשיטות המשותפים לכל סוגי ההיטים. ניתן למצוא מדריכים נפרדים לכל סוג היט בקטע מדידת אינטראקציות נפוצות של משתמשים בתפריט הניווט הימני.

ההיט הוא בקשת HTTP שמורכבת מצמדי שדות וערך, שמקודדים כמחרוזת שאילתה, ונשלחים אל Measurement Protocol.

אם כלי המפתחים של הדפדפן פתוחים בזמן טעינת דף שמשתמש ב-analytics.js, אפשר לראות את ההתאמות שנשלחות בכרטיסייה 'רשת'. חיפוש בקשות שנשלחו אל google-analytics.com/collect.

אילו נתונים נשלחים

כששולחים היט ל-Measurement Protocol, כלי מעקב שולחים את כל השדות שמאוחסנים כרגע ושמוגדרים בהם פרמטרים חוקיים של Measurement Protocol. לדוגמה, שדות כמו title ו-location נשלחים, אבל cookieDomain ו-hitCallback לא נשלחים.

במקרים מסוימים, תרצו לשלוח שדות ל-Google Analytics עבור ההתאמה הנוכחית, אך לא עבור ההיטים הבאים. דוגמה לכך היא היט אירוע שבו השדות eventAction ו-eventLabel רלוונטיים להיט הנוכחי בלבד.

כדי לשלוח שדות עם ההיט הנוכחי בלבד, אפשר להעביר אותם כארגומנטים לשיטה send. כדי שנתוני שדות יישלחו עם כל ההיטים הבאים, צריך לעדכן את מכשיר המעקב באמצעות השיטה set.

שיטת השליחה

אפשר לקרוא לשיטה send של מכשיר מעקב ישירות על אובייקט המעקב עצמו, או על ידי הוספה של פקודת send לתור הפקודות ga(). מאחר שרוב הזמן אין לך הפניה לאובייקט המעקב, שימוש בתור הפקודות ga() הוא הדרך המומלצת לשלוח נתוני מעקב אל Google Analytics.

שימוש בתור הפקודות של ga()

החתימה להוספת פקודת send לתור הפקודות ga() היא:

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

כפי שצוין למעלה, הערכים שצוינו באמצעות הפרמטרים hitType, ...fields ו-fieldsObject נשלחים רק בהיט הנוכחי. הם לא מאוחסנים באובייקט המעקב, וגם לא נשלחים עם ההיטים הבאים.

אם השדות שמועברים עם הפקודה send כבר מוגדרים באובייקט המעקב, המערכת תשתמש בערכים שמועברים בפקודה ולא בערכים ששמורים במכשיר המעקב.

קריאות לפקודה send חייבות לציין hitType, ובהתאם לסוג שצוין, ייתכן שיידרשו גם פרמטרים נוספים. פרטים נוספים זמינים במדריכים הספציפיים למדידת אינטראקציות נפוצות של משתמשים בתפריט הניווט הימני.

הדרך הפשוטה ביותר להשתמש בפקודה send, שפועלת בכל סוגי ההיטים, היא להעביר את כל השדות באמצעות הפרמטר fieldsObject. למשל:

ga('send', {
  hitType: 'event',
  eventCategory: 'Video',
  eventAction: 'play',
  eventLabel: 'cats.mp4'
});

לנוחיותכם, סוגי היטים מסוימים מאפשרים להעביר שדות נפוצים ישירות כארגומנטים לפקודה send. לדוגמה, ניתן לשכתב את הפקודה send שלמעלה עבור סוג ההיט 'אירוע' כך:

ga('send', 'event', 'Video', 'play', 'cats.mp4');

לרשימה מלאה של השדות שניתן להעביר כארגומנטים עבור סוגי ההיטים השונים, עיינו בקטע 'פרמטרים' במאמר הפנייה לשיטת שליחה.

שימוש במכשיר מעקב עם שם

אם אתם משתמשים במכשיר מעקב עם שם במקום במכשיר המעקב שמוגדר כברירת מחדל, אתם יכולים להעביר את השם שלו במחרוזת הפקודה.

הפקודה הבאה send תופעל במכשיר המעקב בשם "mytracker":

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

על אובייקט המעקב עצמו

אם יש לכם הפניה לאובייקט המעקב, אתם יכולים לקרוא ישירות לשיטה send של מכשיר המעקב:

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

לדעת מתי ההתאמה נשלחה

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

דוגמה למצב כזה היא שליחת אירוע אל Google Analytics כדי לתעד שמשתמש לחץ על לחצן השליחה של טופס. ברוב המקרים, לחיצה על לחצן השליחה תתחיל לטעון את הדף הבא באופן מיידי, וכל פקודות ga('send', ...) לא יפעלו.

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

hitCallback

כדי לקבל התראה כשההיט מסתיים, צריך להגדיר את השדה hitCallback. hitCallback היא פונקציה שמופעלת ברגע שההיט נשלח בהצלחה.

הדוגמה הבאה מראה כיצד לבטל את פעולת השליחה המוגדרת כברירת מחדל בטופס, לשלוח היט ל-Google Analytics ולאחר מכן לשלוח את הטופס מחדש באמצעות הפונקציה hitCallback:

// 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: function() {
      form.submit();
    }
  });
});

טיפול בזמן קצוב לתפוגה

הדוגמה שלמעלה עובדת יפה, אבל יש בה בעיה חמורה אחת. אם (מכל סיבה שהיא) לא תהיה אפשרות להיטען של ספריית analytics.js, הפונקציה hitCallback לא תפעל אף פעם. אם הפונקציה hitCallback לא תפעל אף פעם, המשתמשים לא יוכלו לשלוח את הטופס.

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

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

// 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);

  // Keeps track of whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where `hitCallback` 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: submitForm
  });
});

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

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

function createFunctionWithTimeout(callback, opt_timeout) {
  var called = false;
  function fn() {
    if (!called) {
      called = true;
      callback();
    }
  }
  setTimeout(fn, opt_timeout || 1000);
  return fn;
}

עכשיו אפשר להגדיר בקלות גלישת טקסט לכל הפונקציות של hitCallback עם זמן קצוב לתפוגה, כדי להבטיח שהאתר יפעל כצפוי גם במקרים שבהם ההיטים לא נשלחים או שספריית analytics.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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

ציון מנגנוני העברה שונים

כברירת מחדל, analytics.js בוחר את שיטת ה-HTTP ואת מנגנון ההעברה שבאמצעותם יישלחו היטים באופן אופטימלי. שלוש האפשרויות הן 'image' (באמצעות אובייקט Image), 'xhr' (באמצעות אובייקט XMLHttpRequest) או 'beacon' עם השיטה החדשה navigator.sendBeacon.

שתי השיטות הקודמות חולקות את הבעיה המתוארת בקטע הקודם (כאשר היטים לא נשלחים בדרך כלל אם מתבצעת הסרת הנתונים שנטענו לדף). השיטה navigator.sendBeacon, לעומת זאת, היא תכונת HTML חדשה שנוצרה כדי לפתור את הבעיה הזו.

אם הדפדפן של המשתמש תומך ב-navigator.sendBeacon, תוכלו לציין את 'beacon' כמנגנון ה-transport בלי לדאוג להגדרת קריאה חוזרת (callback).

הקוד הבא מגדיר את מנגנון ההעברה ל-'beacon' בדפדפנים שתומכים בו.

ga('create', 'UA-XXXXX-Y', 'auto');

// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');

בשלב זה, analytics.js משתמש ב-navigator.sendBeacon רק אם מנגנון ההעברה מוגדר ל-'beacon'. עם זאת, בעתיד כנראה ש-analytics.js יעבור להשתמש ב-'beacon' כמנגנון ברירת המחדל בדפדפנים שתומכים בו.

השלבים הבאים

מדידה של סוגים מסוימים של אינטראקציות של משתמשים יכולה לפעמים לדרוש הטמעות מורכבות. עם זאת, במקרים רבים הטמעות אלה כבר פותחו והופקו להיות זמינות כיישומי פלאגין של analytics.js. במדריך הבא נסביר איך להשתמש ביישומי הפלאגין analytics.js עם תור הפקודות ga().