מדידת הביצועים באמצעות web-vitals.js, Google Analytics ו-BigQuery

1. לפני שמתחילים

מה תעשו

ב-Codelab הזה תלמדו:

מקשרים את נכס Google Analytics 4 אל BigQuery.
להוסיף את ספריית web-vitals לדף אינטרנט.
הכנה ושליחה של נתוני web-vitals ל-Google Analytics.
הפעלת שאילתות על נתוני Core Web Vitals ב-BigQuery.
ליצור לוח בקרה ב-Google Data Studio כדי להציג בתצוגה חזותית את נתוני Core Web Vitals.

מה תצטרכו

חשבון Google Analytics עם נכס GA4.
חשבון Google Cloud.
דפדפן אינטרנט שמבוסס על Chromium, כמו Google Chrome או Microsoft Edge. (מידע נוסף על הסיבות לכך שצריך דפדפן אינטרנט שמבוסס על Chromium זמין במאמר בנושא תמיכה בדפדפנים).
עורך טקסט לפי בחירתכם, כמו Sublime Text או Visual Studio Code.
מקום לאירוח דפי הבדיקה כדי לראות איך ספריית web-vitals פועלת. (אפשר להשתמש בשרת מקומי כדי להציג דפי אינטרנט סטטיים, או לארח את דפי הבדיקה ב-GitHub).
אתר ציבורי שבו אפשר להטמיע את קוד הניתוח. העברת הקוד לסביבת ייצור תעזור לכם להבין טוב יותר את הדוגמאות ל-BigQuery ול-Data Studio שמופיעות בסוף ה-Codelab הזה).
ידע ב-HTML‏, CSS‏, JavaScript וכלי הפיתוח ל-Chrome.

לפני שמתחילים

קודם כול, מקשרים את Google Analytics 4 ל-BigQuery, כדי שתוכלו להתחיל לנתח את הביצועים ברגע שהקוד יעלה לאוויר.

כדי לקשר את נכס GA4 ל-BigQuery, צריך לפעול לפי השלבים במרכז העזרה של Google Analytics.

עכשיו, אחרי שהנכס שלכם ב-Google Analytics מוכן לייצא נתוני אירועים ל-BigQuery, צריך לשלב את ספריית web-vitals באתר.

2. הוספת הספרייה web-vitals ו-gtag לדף אינטרנט

קודם כול, מוסיפים את ספריית web-vitals לדף אינטרנט.

פותחים תבנית של דף שרוצים להוסיף אליה את ספריית web-vitals. בדוגמה הזו נשתמש בדף פשוט:

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

מדביקים את קוד המקור בקובץ ריק בכלי לעריכת טקסט.
שומרים את הקובץ באופן מקומי בשם basic.html.
מעתיקים את סקריפט המודול הזה ומדביקים אותו ממש לפני תג הסגירה </body>. הסקריפט הזה טוען את הספרייה web-vitals מרשת להעברת תוכן.

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

שומרים את הקובץ.

הוספת את הספרייה web-vitals לדף האינטרנט.

3. מדידת Core Web Vitals של דף האינטרנט

המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) הם מדד של חוויות משתמש אמיתיות, כפי שנמדדו באמצעות Chrome או ספריית web-vitals בדפדפני Chromium. כשמשיקים את web-vitals לסביבת הייצור, רואים מגוון רחב של תוצאות שמבוססות על מהירויות החיבור של המשתמשים, על עוצמת המכשיר ועל האינטראקציות שלהם עם האתר. כדי להדגים את היכולות של ספריית web-vitals, נדמה חוויית משתמש עם חיבור איטי.

פותחים את הקובץ השמור בדפדפן האינטרנט.
לוחצים לחיצה ימנית על דף האינטרנט.
לוחצים על בדיקה כדי לפתוח את הכלים למפתחים ב-Chrome.

לוחצים על הכרטיסייה מסוף > הגדרות המסוף .

מסמנים את תיבת הסימון Preserve log כדי שהיומנים יישמרו כשמרעננים את דף האינטרנט.

לוחצים על הכרטיסייה Network (רשת) > Online (אונליין) > Slow 3G (3G איטי) כדי לדמות חיבור איטי לרשת.

לוחצים על הכרטיסייה מסוף.
לוחצים במקום כלשהו בדף האינטרנט כדי להדפיס את המדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP).
לוחצים על טעינה מחדש של הדף הזה כדי לאלץ את הדפסת המדדים של תזוזת פריסה נצברת (CLS) ומהירות התגובה לאינטראקציה באתר (INP).

לוחצים על הכרטיסייה רשת > אונליין > 3G מהיר כדי לדמות חיבור רשת מהיר.
לוחצים על הכרטיסייה מסוף.
לוחצים במקום כלשהו בדף האינטרנט כדי להדפיס שוב את מדד ה-LCP.

לוחצים על 'טעינה מחדש של הדף' כדי לאלץ הדפסה חוזרת של המדדים CLS ו-INP.

זהו! מדדתם את Core Web Vitals של דף האינטרנט.

4. ניתוח מפורט יותר של נתוני מדדי הליבה לבדיקת חוויית המשתמש באתר

לכל אחד מהאירועים של Core Web Vitals שאתם מודדים, יש הרבה מידע שזמין בנתונים שמוחזרים, ואפשר להשתמש בו כדי לנפות באגים בצווארי בקבוק בביצועים. כל אירוע web-vitals מכיל מערך entries עם מידע על האירועים שתורמים לערך הנוכחי של המדד.

CLS‏ `entries`

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

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

LCP `entries`

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

בדוגמה הזו, המערך entries מכיל רשימה של כל המועמדים ל-LCP בסדר כרונולוגי. במקרה הזה, רכיב h1 עבר עיבוד ראשון, ואחריו רכיב img. ה-img היה המהירות שבה נטען רכיב התוכן הכי גדול (LCP). רכיב ה-LCP שדווח הוא תמיד הפריט האחרון במערך.

INP `entries`

כשמרחיבים את המאפיין entries של האובייקט שנרשם ביומן על ידי onINP(),, מוצגת מערך שמכיל את הרשומה PerformanceEventTiming של האינטראקציה עד לציור הבא בדף.

המאפיין name מציין איזה סוג של קלט של משתמשים הפעיל את הטיימר לזמינות של ה-thread הראשי. הערך value שמופיע בדוח web-vitals הוא העיכוב שמופיע כמאפיין duration של הרשומה PerformanceEventTiming, אחרי המרה ממיקרו-שניות לאלפיות השנייה. במקרה הזה, מדד ה-INP שנמדד הוא 48 אלפיות השנייה.

5. הכנה ושליחה של נתונים של מדדי ליבה לאתר אל Google Analytics 4

כדי לשלוח נתונים אל web-vitals Google Analytics 4, צריך להמיר אותם לפורמט ש-GA4 יכול לקבל.

מבנה פרטי ניפוי הבאגים לכל מדד CWV

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

diagnostics.html

  function getDebugInfo(name, attribution) {
    // In some cases there won't be any entries (e.g. if CLS is 0,
    // or for LCP after a bfcache restore), so we have to check first.
    if (attribution) {
      if (name === 'LCP') {
        return {
          debug_url: attribution.url,
          debug_time_to_first_byte: attribution.timeToFirstByte,
          debug_resource_load_delay: attribution.resourceLoadDelay,
          debug_resource_load_time: attribution.resourceLoadTime,
          debug_element_render_delay: attribution.elementRenderDelay,
          debug_target: attribution.element || '(not set)',
        };
      } else if (name === 'INP') {
        return {
          debug_event: attribution.interactionType,
          debug_time: Math.round(attribution.interactionTime),
          debug_load_state: attribution.loadState,
          debug_target: attribution.interactionTarget || '(not set)',
          debug_interaction_delay: Math.round(attribution.inputDelay),
          debug_processing_duration: Math.round(attribution.processingDuration),
          debug_presentation_delay:  Math.round(attribution.presentationDelay),
        };
      } else if (name === 'CLS') {
        return {
          debug_time: attribution.largestShiftTime,
          debug_load_state: attribution.loadState,
          debug_target: attribution.largestShiftTarget || '(not set)',
        }
      }
    }
    // Return default/empty params in case there is no attribution.
    return {
      debug_target: '(not set)',
    };
  }
  
  function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
    gtag('event', name, {
      // Built-in params:
      value: delta, // Use `delta` so the value can be summed.
      // Custom params:
      metric_id: id, // Needed to aggregate events.
      metric_value: value, // Value for querying in BQ
      metric_delta: delta, // Delta for querying in BQ
      // Send the returned values from getDebugInfo() as custom parameters
        ...getDebugInfo(name, attribution)
    });
  }

שליחת הנתונים ל-Google Analytics

לבסוף, יוצרים פונקציה שמקבלת פרמטרים מהאירוע web-vitals ומעבירה אותם אל Google Analytics.

diagnostics.html

function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
  gtag('event', name, {
    // Built-in params:
    value: delta, // Use `delta` so the value can be summed.
    // Custom params:
    metric_id: id, // Needed to aggregate events.
    metric_value: value, // Value for querying in BQ
    metric_delta: delta, // Delta for querying in BQ
    // Send the returned values from getDebugInfo() as custom parameters
      ...getDebugInfo(name, attribution)
  });
}

רושמים את הפונקציה בכל אחת מהפונקציות web-vitals, שמופעלות כשהדפדפן מוכן למדוד כל אירוע:

diagnostics.html

onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);

כל הכבוד! מעכשיו אתם שולחים web-vitals אירועים ל-Google Analytics.

6. בדיקה שהנתונים של מדדי הליבה של מהירות האתר מאוכלסים ב-Google Analytics

כדי לוודא שהאירועים שלכם מתועדים בנכס Google Analytics 4:

פותחים את נכס Google Analytics 4 ועוברים אל דוחות.

בוחרים באפשרות פעילות בזמן אמת.

רעננו את דף הבדיקה כמה פעמים והקפידו ללחוץ על הדף בין הרענונים כדי להפעיל אירועי INP.
מחפשים את הקטע מספר האירועים לפי שם האירוע בממשק המשתמש של סקירה כללית בזמן אמת. יוצגו לכם אירועים של LCP,‏ INP ו-CLS.

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

לוחצים על מקשי הפרמטרים האלה כדי לראות סיכום של הערכים ש-Google Analytics קיבל.

אפשר להוסיף לפרטי הניפוי באגים נתונים נוספים, כמו שמות של תבניות דפים או אירועים אחרים בדף שרלוונטיים ל-INP, שדיברנו עליהם קודם ב-Codelab הזה. פשוט משנים את הצהרות return בפונקציה getDebugInfo().

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

7. הרצת שאילתות על הנתונים ב-BigQuery

אחרי שהקוד של Google Analytics פעיל במשך כמה ימים, אפשר להתחיל להריץ שאילתות על הנתונים ב-BigQuery. קודם כל, צריך לוודא שהנתונים מועברים ל-BigQuery.

פותחים את מסוף Google Cloud ובוחרים את הפרויקט מהתפריט הנפתח בראש המסך.
בתפריט הניווט בפינה הימנית העליונה של המסך, לוחצים על BigQuery בקטע Analytics.
בחלונית Explorer מרחיבים את הפרויקט כדי לראות את מערך הנתונים של Google Analytics. השם של מערך הנתונים הוא analytics_ ואחריו מופיע מזהה הנכס שלכם ב-Google Analytics 4 (לדוגמה, analytics_229787100)).
מרחיבים את מערך הנתונים ורואים טבלה events_. המספר בסוגריים מייצג את מספר הימים שזמינים לשאילתה.

שאילתת משנה לבחירת אירועים של CWV בלבד

כדי להריץ שאילתה על מערך נתונים שכולל רק את אירועי ה-CWV שלנו, מתחילים בשאילתת משנה שבוחרת את 28 הימים האחרונים של אירועי LCP, ‏ CLS ו-INP. הפונקציה הזו מחפשת באופן ספציפי את הערך האחרון שדווח לכל web-vitals מזהה אירוע באמצעות המפתח metric_id, כדי לוודא שלא נספרו אותם אירועי CWV יותר מפעם אחת.

# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
 SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
 (
   SELECT *
   , IF (ROW_NUMBER() OVER (
     PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
     ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
   ) = 1, true, false) AS is_last_received_value
   # Make sure to update your project ID and GA4 property ID here!
   FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
   WHERE event_name in ('CLS', 'INP', 'LCP') AND
     _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
  )
  WHERE is_last_received_value
)

התצוגה הזו היא הבסיס לכל השאילתות שמופעלות על מערך הנתונים הזה. השאילתה הראשית תופעל על הטבלה הזמנית web_vitals_events.

המבנה של אירועים ב-GA4

כל נתוני אירוע ב-Google Analytics 4 מופיעים בעמודה STRUCT event_params. כל אחד מפרמטרים האירועים שאתם מעבירים ל-GA4 באתר שלכם מיוצג על ידי המפתח שלו, והערך הוא STRUCT עם מפתח לכל סוג נתונים אפשרי. בדוגמה שלמעלה, למפתח metric_value יכול להיות הערך int_value או double_value, ולכן נעשה שימוש בפונקציה COALESCE(). כדי לקבל את debug_target שהעברתם קודם, בוחרים את המפתח string_value ב-debug_target.

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

איתור הדפים והרכיבים עם הביצועים הכי גרועים

‫debug_target הוא מחרוזת של סלקטור ב-CSS שתואמת לרכיב בדף שהכי רלוונטי לערך המדד.

ב-CLS, ‏ debug_target מייצג את האלמנט הכי גדול משינוי הפריסה הכי גדול שתרם לערך ה-CLS. אם לא בוצעה הזזה של אף רכיב, הערך של debug_target הוא null.

הרשימה הבאה של שאילתות מציגה את הדפים מהגרוע ביותר לטוב ביותר לפי מדד ה-CLS שלהם באחוזון ה-75, מקובצים לפי debug_target:

# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
  COUNT(1) as page_views
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
    *
  FROM web_vitals_events
  WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a 
# minimum number of pageviews to reduce noise in your reports. 
# HAVING page_views > 50
ORDER BY metric_p75 DESC

אם אתם יודעים אילו רכיבים בדף זזים, יהיה לכם קל יותר לזהות את שורש הבעיה ולתקן אותה.

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

ניפוי באגים במדדים אחרים

השאילתה שלמעלה מציגה את התוצאות של מדד ה-CLS, אבל אפשר להשתמש באותה טכניקה בדיוק כדי לדווח על יעדי הניפוי באגים של LCP ו-INP. פשוט מחליפים את פסוקית WHERE במדד הרלוונטי כדי לנפות באגים:

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. המחשה חזותית של תוצאות שאילתות ב-Data Studio

‫BigQuery מספק דרך מהירה להמחשה ויזואלית של תוצאות שאילתות באמצעות Data Studio. ‫Data Studio הוא כלי חינמי להצגה חזותית של נתונים וליצירת לוחות בקרה. כדי להמחיש את תוצאות השאילתה אחרי שמריצים אותה בממשק המשתמש של BigQuery, לוחצים על Explore Data (ניתוח נתונים) ובוחרים באפשרות Explore with Data Studio (ניתוח באמצעות Data Studio).

שימוש באפשרות 'ניתוח ב-Data Studio' ב-BigQuery

פעולה זו יוצרת קישור ישיר מ-BigQuery אל Data Studio בתצוגת הניתוח. בתצוגה הזו אפשר לבחור את השדות שרוצים להציג, לבחור סוגי תרשימים, להגדיר מסננים וליצור תרשימים אד-הוק לניתוח ויזואלי מהיר. מתוצאות השאילתה שלמעלה, אפשר ליצור את תרשים הקו הזה כדי לראות את המגמה של ערכי LCP לאורך זמן:

תרשים קו של ערכי LCP יומיים ב-Data Studio

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

אפשר ליצור לוח בקרה ב-Data Studio באמצעות המחבר המקורי של BigQuery. כדי לעשות זאת, עוברים אל datastudio.google.com, יוצרים מקור נתונים חדש, בוחרים את המחבר של BigQuery ובוחרים את מערך הנתונים שרוצים לעבוד איתו:

שימוש במחבר המקורי של BigQuery ב-Data Studio

9. יצירת תצוגה חומרית של נתוני Web Vitals

כשיוצרים לוחות בקרה של נתוני האירועים של Web Vitals, כפי שמתואר למעלה, לא יעיל להשתמש ישירות במערך הנתונים של הייצוא מ-Google Analytics 4. בגלל המבנה של נתוני GA4 והעיבוד המקדים שנדרש למדדים של Web Vitals, חלקים מהשאילתה מופעלים כמה פעמים. זה יוצר שתי בעיות: ביצועי לוח הבקרה והעלויות ב-BigQuery.

אתם יכולים להשתמש במצב ארגז החול של BigQuery בחינם. ב-BigQuery יש תוכנית ללא תשלום, שמאפשרת לעבד עד 1TB של נתוני שאילתות בחודש בחינם. בשיטות הניתוח שמוסברות בפוסט הזה, אלא אם אתם משתמשים בקבוצת נתונים גדולה במיוחד או שאתם שולחים הרבה שאילתות למערך הנתונים באופן קבוע, אתם אמורים להישאר במסגרת המגבלה החינמית הזו בכל חודש. אבל אם יש לכם אתר עם נפח תעבורת נתונים גבוה ואתם רוצים לעקוב באופן קבוע אחרי מדדים שונים באמצעות לוח בקרה אינטראקטיבי מהיר, מומלץ לבצע עיבוד מוקדם של נתוני Web Vitals ולשמור אותם, תוך שימוש בתכונות היעילות של BigQuery כמו חלוקה למחיצות (partitioning), סידור באשכולות ושמירה במטמון.

הסקריפט הבא מבצע עיבוד מקדים של הנתונים ב-BigQuery (טבלת המקור) ויוצר טבלה מגובה (טבלת היעד).

# Materialize Web Vitals metrics from GA4 event export data

# Replace target table name
CREATE OR REPLACE TABLE YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.web_vitals_summary
  PARTITION BY DATE(event_timestamp)
AS
SELECT
  ga_session_id,
  IF(
    EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
    'New user',
    'Returning user') AS user_type,
  IF(
    (SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
    AS session_engagement,
  evt.* EXCEPT (session_engaged, event_name),
  event_name AS metric_name,
  FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
FROM
  (
    SELECT
      ga_session_id,
      ARRAY_AGG(custom_event) AS events
    FROM
      (
        SELECT
          ga_session_id,
          STRUCT(
            country,
            device_category,
            device_os,
            traffic_medium,
            traffic_name,
            traffic_source,
            page_path,
            debug_target,
            event_timestamp,
            event_name,
            metric_id,
            IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
            user_pseudo_id,
            session_engaged,
            session_revenue) AS custom_event
        FROM
          (
            SELECT
              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
                AS ga_session_id,
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
                AS metric_id,
              ANY_VALUE(device.category) AS device_category,
              ANY_VALUE(device.operating_system) AS device_os,
              ANY_VALUE(traffic_source.medium) AS traffic_medium,
              ANY_VALUE(traffic_source.name) AS traffic_name,
              ANY_VALUE(traffic_source.source) AS traffic_source,
              ANY_VALUE(
                REGEXP_SUBSTR(
                  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
                  r'^[^?]+')) AS page_path,
              ANY_VALUE(
                (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
                AS debug_target,
              ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
              ANY_VALUE(geo.country) AS country,
              ANY_VALUE(event_name) AS event_name,
              SUM(ecommerce.purchase_revenue) AS session_revenue,
              MAX(
                (
                  SELECT
                    COALESCE(
                      value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
                  FROM UNNEST(event_params)
                  WHERE key = 'session_engaged'
                )) AS session_engaged,
              TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
              MAX(
                (
                  SELECT COALESCE(value.double_value, value.int_value)
                  FROM UNNEST(event_params)
                  WHERE key = 'metric_value'
                )) AS metric_value,
            FROM
              # Replace source table name
              `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
            WHERE
              event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
            GROUP BY
              1, 2
          )
      )
    WHERE
      ga_session_id IS NOT NULL
    GROUP BY ga_session_id
  )
CROSS JOIN UNNEST(events) AS evt
WHERE evt.event_name NOT IN ('first_visit', 'purchase');

למערך הנתונים המגולם הזה יש כמה יתרונות:

מבנה הנתונים שטוח וקל יותר לביצוע שאילתות.
הוא שומר רק את אירועי Web Vitals ממערך הנתונים המקורי של GA4.
מזהה הסשן, סוג המשתמש (חדש לעומת חוזר) ופרטי ההתעניינות בסשן זמינים ישירות בעמודות.
הטבלה מחולקת למחיצות לפי תאריך ומקובצת לאשכולות לפי שם המדד. בדרך כלל, הפעולה הזו מקטינה את כמות הנתונים שעוברים עיבוד בכל שאילתה.
מכיוון שלא צריך להשתמש בתווים כלליים לחיפוש כדי להריץ שאילתות על הטבלה הזו, אפשר לשמור תוצאות של שאילתות במטמון למשך עד 24 שעות. כך אפשר להפחית את העלויות שנובעות מהרצת אותה שאילתה שוב ושוב.
אם אתם משתמשים ב-BigQuery BI Engine, אתם יכולים להריץ פונקציות ואופרטורים של SQL שעברו אופטימיזציה בטבלה הזו.

אפשר להריץ שאילתות על הטבלה המגובה הזו ישירות בממשק המשתמש של BigQuery, או להשתמש בה ב-Data Studio באמצעות המחבר של BigQuery.

הפעלת משימות רגילות של יצירת תצוגות חומריות

אם מריצים את השאילתה שלמעלה בלי טווח תאריכים, היא מופעלת על כל מערך הנתונים של Google Analytics. לא מומלץ לעשות את זה כל יום, כי אתם מעבדים מחדש כמויות גדולות של נתונים היסטוריים. כדי לעדכן את השאילתה כך שיתווספו אליה רק הנתונים של היום האחרון, צריך להסיר את ההצהרה CREATE or REPLACE TABLE בתחילת השאילתה ולהוסיף קריטריון נוסף לסעיף WHERE בשאילתת המשנה ביחס לטבלה events_intraday_:

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
  # The _TABLE_SUFFIX replaces the asterisk (*) in the table name
  # 
  AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)

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

10. המחשה ויזואלית של הנתונים ב-Google Data Studio

יש תמיכה מובנית ב-Google Data Studio לקריאת נתונים מ-Google BigQuery. עכשיו, אחרי שנתוני web-vitals מ-Google Analytics 4 מאכלסים את BigQuery, אפשר להשתמש במחבר BigQuery של Data Studio כדי לקרוא ישירות את הטבלה המגובה.

שימוש ב-Web Vitals Connector

יצירת לוח בקרה מאפס היא תהליך שלוקח זמן, ולכן פיתחנו פתרון חבילה שיוצר בשבילכם תבנית של לוח בקרה. קודם כל, מוודאים שיצרתם את הטבלה של Web Vitals באמצעות השאילתה שלמעלה. אחר כך ניגשים למחבר Web Vitals ל-Data Studio באמצעות הקישור הזה: goo.gle/web-vitals-connector

אחרי שמאשרים את ההרשאה החד-פעמית, אמור להופיע מסך ההגדרה הבא:

מסך ההרשאה של Web Vitals Connector

מזינים את מזהה הטבלה המגובשת ב-BigQuery (כלומר, טבלת היעד) ואת מזהה פרויקט החיוב ב-BigQuery. אחרי שלוחצים על CONNECT (קישור), Data Studio יוצר לוח בקרה חדש שמבוסס על תבנית ומקשר אליו את הנתונים. אתם יכולים לערוך, לשנות ולשתף את לוח הבקרה איך שאתם רוצים. אם יוצרים לוח בקרה פעם אחת, לא צריך להיכנס שוב לקישור של המחבר, אלא אם רוצים ליצור כמה לוחות בקרה ממערכי נתונים שונים.

ניווט במרכז הבקרה

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

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

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

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

11. משאבים אחרים

כל הכבוד, סיימתם את ה-Codelab הזה! עכשיו תוכלו לעקוב אחרי הביצועים של מדדי חוויית המשתמש הבסיסיים (Core Web Vitals) באתר שלכם ברמת פירוט גבוהה. כדאי גם לזהות סוגים ספציפיים של דפים ורכיבים באתר שגורמים לערכים גבוהים של CWV, כדי שתוכלו למקד את האופטימיזציות.

קריאה נוספת

באתר web.dev יש מגוון מאמרים ומקרים לדוגמה עם אסטרטגיות לשיפור Core Web Vitals. מתחילים באופטימיזציה של המאמרים לכל מדד:

מאמרי עזרה

ה-Codelab הזה מבוסס על שני מאמרים באתר web.dev:
המאמר בנושא מדידת Web Vitals בשטח
המאמר בנושא שימוש בנתוני Web Vitals מ-GA4 ב-BigQuery, שכולל דוגמאות רבות נוספות לשאילתות שאפשר להשתמש בהן.
אם אתם צריכים מידע נוסף על השילוב של GA4 עם BigQuery Export, תוכלו לעיין במרכז העזרה של Google Analytics.

מדידת הביצועים באמצעות web-vitals.js, Google Analytics ו-BigQuery

1. לפני שמתחילים

מה תעשו

מה תצטרכו

לפני שמתחילים

2. הוספת הספרייה web-vitals ו-gtag לדף אינטרנט

basic.html

basic.html

basic.html

3. מדידת Core Web Vitals של דף האינטרנט

4. ניתוח מפורט יותר של נתוני מדדי הליבה לבדיקת חוויית המשתמש באתר

CLS‏ entries

LCP entries

INP entries

5. הכנה ושליחה של נתונים של מדדי ליבה לאתר אל Google Analytics 4

מבנה פרטי ניפוי הבאגים לכל מדד CWV

diagnostics.html

שליחת הנתונים ל-Google Analytics

diagnostics.html

diagnostics.html

6. בדיקה שהנתונים של מדדי הליבה של מהירות האתר מאוכלסים ב-Google Analytics

7. הרצת שאילתות על הנתונים ב-BigQuery

שאילתת משנה לבחירת אירועים של CWV בלבד

המבנה של אירועים ב-GA4

איתור הדפים והרכיבים עם הביצועים הכי גרועים

ניפוי באגים במדדים אחרים

8. המחשה חזותית של תוצאות שאילתות ב-Data Studio

9. יצירת תצוגה חומרית של נתוני Web Vitals

הפעלת משימות רגילות של יצירת תצוגות חומריות

10. המחשה ויזואלית של הנתונים ב-Google Data Studio

שימוש ב-Web Vitals Connector

ניווט במרכז הבקרה

11. משאבים אחרים

קריאה נוספת

מאמרי עזרה

CLS‏ `entries`

LCP `entries`

INP `entries`