דף זה תורגם על ידי Cloud Translation API.

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

מה צריך להכין

חשבון 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. הוספה של ספריית WebView ו-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. מדידת מדדי הליבה לבדיקת חוויית המשתמש באתר של דף האינטרנט

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

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

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

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

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

לוחצים על הכרטיסייה מסוף.
לוחצים במקום כלשהו בדף האינטרנט כדי לאלץ את ההדפסה של המדד מסוג 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP).
לוחצים על טעינה מחדש של הדף כדי לאלץ את המדדים של Cumulative Layout Shift (CLS) ו-Interaction to Next Paint (INP).

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

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

זהו! מדדתם את מדדי הליבה לבדיקת חוויית המשתמש באתר בדף האינטרנט.

4. עיון מפורט יותר בנתונים של vitals

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

CLS `entries`

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

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

LCP `entries`

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

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

INP `entries`

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

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

5. הכנה ושליחה של נתוני WebView ושליחה אל 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. בדיקה אם נתוני ה-Web-vitals מאוכלסים ב-Google Analytics

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

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

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

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

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

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

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

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

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

הסקריפט הבא מעבד מראש את נתוני 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, אפשר להשתמש במחבר Data Studio BigQuery כדי לקרוא ישירות את הטבלה מהותית.

שימוש במחבר של Web Vitals

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

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

מסך ההרשאה של מחבר Web Vitals

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

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

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

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

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

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

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

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

קריאה נוספת

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

מסמכי עזר

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

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

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

מה תעשו

מה צריך להכין

מה צריך לדעת לפני שמתחילים

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

basic.html

basic.html

basic.html

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

4. עיון מפורט יותר בנתונים של vitals

CLS entries

LCP entries

INP entries

5. הכנה ושליחה של נתוני WebView ושליחה אל Google Analytics 4

מבנה המידע על תוצאות ניפוי הבאגים לכל CWV

diagnostics.html

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

diagnostics.html

diagnostics.html

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

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

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

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

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

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

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

9. יצירת גרסה מהותית של נתונים בדוח ה-Web Vitals

הפעלת משימות מהותיות קבועות

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

שימוש במחבר של Web Vitals

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

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

קריאה נוספת

מסמכי עזר

CLS `entries`

LCP `entries`

INP `entries`