שליחת נתונים אל Google Analytics באמצעות gtag.js

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

שליחת נתונים באמצעות הפקודה event

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

gtag('event', 'login', {'method': 'Google'});

מידע נוסף על הפקודה event זמין במאמר הפניית API.

ניתוב נתונים לקבוצות ולנכסים

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

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

// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });

// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });

מידע נוסף על קיבוץ וניתוב של נתונים

איך אפשר לדעת מתי אירוע נשלח?

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

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

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

הטמעת פונקציות קריאה חוזרת (callback) של אירועים

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

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

// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');

// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {

  // Prevent the browser from submitting the form
  // and thus unloading the current page.
  event.preventDefault();

  // Send the event to Google Analytics and
  // resubmit the form once the hit is done.
  gtag('event', 'signup_form_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

מה לעשות כשמסתיים הזמן הקצוב לתפוגה

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

בכל פעם שמוסיפים פונקציונליות של אתר קריטית בפונקציית הקריאה החוזרת של האירוע, צריך תמיד להשתמש בפונקציית 'זמן קצוב לתפוגה' כדי לטפל במקרים שבהם ספריית gtag.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();

  // Creates a timeout to call submitForm after one second.
  setTimeout(submitForm, 1000);

  // Monitors whether or not the form has been submitted.
  // This prevents the form from being submitted twice in cases
  // where the event callback function 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.
  gtag('event', 'signup_form_complete', {
    'event_callback': submitForm
  });
});

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

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

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

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

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

כברירת מחדל, gtag.js בוחר את שיטת HTTPS ואת מנגנון ההעברה שאיתם יישלחו היטים באופן אופטימלי. שלוש האפשרויות הן:

  • 'image' (באמצעות אובייקט Image)
  • 'xhr' (באמצעות אובייקט XMLHttpRequest)
  • 'איתות' (עם השיטה navigator.sendBeacon)

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

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

gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});