שליחת נתונים אל 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.

שיטת השליחה

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

שימוש בתור הפקודות של 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().