قياس الأداء باستخدام web-vitals.js و"إحصاءات Google" وBigQuery

1. قبل البدء

المهام التي ستنفذها

في هذا الدرس العملي، ستنفّذ ما يلي:

ربط موقعك على "إحصاءات Google‏ 4" بأداة BigQuery
أضِف مكتبة web-vitals إلى صفحة ويب.
إعداد بيانات web-vitals وإرسالها إلى "إحصاءات Google"
طلب البحث عن بيانات "مؤشرات Core Web Vitals" في BigQuery
أنشئ لوحة بيانات في "مركز البيانات من Google" لعرض بيانات "مؤشرات أداء الويب الأساسية".

المتطلبات

حساب على "إحصاءات Google" يتضمّن موقعًا على "إحصاءات Google‏ 4"
حساب على Google Cloud
متصفّح ويب مستند إلى Chromium، مثل Google Chrome أو Microsoft Edge (لمزيد من المعلومات حول سبب حاجتك إلى متصفّح ويب يستند إلى Chromium، يُرجى الاطّلاع على توافق المتصفّح).
محرّر نصوص من اختيارك، مثل Sublime Text أو Visual Studio Code
مكان لاستضافة صفحات الاختبار لمعرفة طريقة عمل مكتبة web-vitals (يمكنك استخدام خادم محلي لعرض صفحات الويب الثابتة، أو استضافة صفحات الاختبار على GitHub).
موقع إلكتروني متاح للجميع يمكنك نشر رمز الإحصاءات عليه (سيساعدك إدخال الرمز البرمجي في مرحلة الإنتاج على فهم أمثلة BigQuery و"مركز البيانات" في نهاية هذا الدرس التطبيقي حول الترميز بشكل أفضل).
معرفة بلغات HTML وCSS وJavaScript وأدوات مطوّري البرامج في Chrome

قبل البدء

عليك أولاً ربط "إحصاءات Google‏ 4" بأداة BigQuery لضمان إمكانية بدء تحليل الأداء فور نشر الرمز.

اتّبِع الخطوات الواردة في "مركز مساعدة إحصاءات Google" لربط موقعك على "إحصاءات Google‏ 4" بأداة BigQuery.

بعد أن يصبح موقعك على "إحصاءات Google" جاهزًا لتصدير بيانات الأحداث إلى 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

<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>

يجب أن تبدو التعليمات البرمجية الناتجة على النحو التالي.

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".

انقر على علامة التبويب وحدة التحكّم > إعدادات وحدة التحكّم .

ضَع علامة في مربّع الاختيار الحفاظ على السجلّ لجعل السجلاتّ تبقى عند إعادة تحميل صفحة الويب.

انقر على علامة التبويب الشبكة > على الإنترنت > شبكة الجيل الثالث البطيئة لمحاكاة اتصال شبكة بطيء.

انقر على علامة التبويب وحدة التحكم.
انقر في أي مكان على صفحة الويب لفرض طباعة مقياس "سرعة عرض أكبر محتوى مرئي" (LCP).
انقر على إعادة تحميل هذه الصفحة لفرض طباعة مقياسَي "متغيّرات التصميم التراكمية" (CLS) و"مدى استجابة الصفحة لتفاعلات المستخدم" (INP).

انقر على علامة التبويب الشبكة > على الإنترنت > شبكة الجيل الثالث السريعة لمحاكاة اتصال سريع بالشبكة.
انقر على علامة التبويب وحدة التحكم.
انقر في أي مكان على صفحة الويب لإعادة طباعة مقياس 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`

يُظهر لنا توسيع السمة entries الخاصة بالكائن الذي سجّله onLCP() العناصر التي كانت مرشّحة لمقياس "سرعة عرض أكبر محتوى مرئي" قبل تسجيل القيمة النهائية.

في هذا المثال، تحتوي مصفوفة entries على قائمة بجميع العناصر المرشّحة لمقياس "سرعة عرض أكبر محتوى مرئي (LCP)" بالترتيب الزمني. في هذه الحالة، تم عرض العنصر h1 أولاً، يليه العنصر img. كانت img هي سرعة عرض أكبر محتوى مرئي. يكون عنصر LCP الذي تمّ الإبلاغ عنه دائمًا هو العنصر الأخير في المصفوفة.

‫INP `entries`

عند توسيع السمة entries للعنصر الذي سجّلته onINP(),، سيظهر مصفوفة تحتوي على الإدخال PerformanceEventTiming للتفاعل مع عملية الطلاء التالية على الصفحة.

تخبرك السمة name بنوع بيانات أدخلها المستخدم الذي أدّى إلى تشغيل الموقّت الخاص بمدى توفّر سلسلة التعليمات الرئيسية. إنّ value التي يعرضها web-vitals هي التأخير الذي يتم تقديمه كقيمة للسمة duration في الإدخال PerformanceEventTiming، ويتم تحويلها من ميكرو ثانية إلى مللي ثانية. في هذه الحالة، يبلغ مقياس INP الذي تم قياسه 48 ملي ثانية.

5- إعداد بيانات Web Vitals وإرسالها إلى "إحصاءات Google‏ 4"

قبل أن تتمكّن من إرسال بيانات web-vitals إلى "إحصاءات Google‏ 4"، يجب تحويلها إلى تنسيق يمكن أن تتلقّاه "إحصاءات Google‏ 4".

تنظيم معلومات تصحيح الأخطاء لكل مقياس من مقاييس Core Web Vitals

الخطوة الأخيرة قبل إرسال هذا الرمز إلى "إحصاءات Google" هي تنظيم المعلومات من الإدخالات، بما في ذلك المعلومات التي تعرضها الدوال أعلاه.

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"

أخيرًا، أنشئ دالة تأخذ مَعلمات من الحدث web-vitals وتمرّرها إلى "إحصاءات Google".

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".

6. التأكّد من أنّ بيانات Web Vitals تظهر في "إحصاءات Google"

لضمان تسجيل الأحداث من خلال موقعك على "إحصاءات Google‏ 4"، اتّبِع الخطوات التالية:

افتح موقعك على "إحصاءات Google‏ 4" وانتقِل إلى التقارير.

اختَر الوقت الفعلي.

أعِد تحميل صفحة الاختبار عدّة مرات وتأكَّد من النقر على الصفحة بين عمليات إعادة التحميل لتفعيل أحداث مدى استجابة الصفحة لتفاعلات المستخدم (INP).
ابحث عن قسم عدد الأحداث حسب اسم الحدث في واجهة مستخدم النظرة العامة في الوقت الفعلي. من المفترض أن تظهر لك أحداث LCP وINP وCLS.

انقر على أيّ من أسماء الأحداث للاطّلاع على المَعلمات التي تمّ تمريرها مع هذه الأحداث.

انقر على مفاتيح المَعلمات هذه للاطّلاع على ملخّص للقيم التي تلقّتها "إحصاءات Google".

يمكنك إضافة بيانات أخرى إلى معلومات تصحيح الأخطاء، مثل أسماء نماذج الصفحات أو أحداث الصفحة الأخرى ذات الصلة بمدى استجابة الصفحة لتفاعلات المستخدم (INP) التي تمّت مناقشتها سابقًا في هذا الدرس التطبيقي حول الترميز. ما عليك سوى تعديل عبارات return في الدالة getDebugInfo().

بعد التأكّد من أنّ البيانات الواردة من صفحات الاختبار مناسبة، يمكنك نشر رمز "إحصاءات Google" الجديد في مرحلة الإنتاج على موقعك الإلكتروني والانتقال إلى الخطوة التالية.

7. طلب البحث عن بياناتك في BigQuery

بعد أن يصبح رمز "إحصاءات Google" نشطًا لبضعة أيام، يمكنك البدء في طلب البحث عن البيانات في BigQuery. في البداية، تأكَّد من نقل البيانات إلى BigQuery.

افتح Google Cloud Console واختَر مشروعك من القائمة المنسدلة في أعلى الشاشة.
من قائمة التنقّل في أعلى يمين الشاشة، انقر على BigQuery ضمن العنوان الإحصاءات.
في جزء المستكشف، وسِّع مشروعك للاطّلاع على مجموعة بيانات "إحصاءات Google". اسم مجموعة البيانات هو analytics_ متبوعًا برقم تعريف موقعك على "إحصاءات Google‏ 4" (مثلاً، analytics_229787100)).
وسِّع مجموعة البيانات وسيظهر لك جدول events_. يشير الرقم بين قوسين إلى عدد الأيام المتاحة للاستعلام.

طلب فرعي لاختيار أحداث CWV فقط

للاستعلام عن مجموعة بيانات تتضمّن أحداث CWV فقط، ابدأ باستعلام فرعي يختار آخر 28 يومًا من أحداث LCP وCLS وINP. يبحث هذا الفلتر تحديدًا عن آخر قيمة تم تسجيلها لكلّ معرّف حدث web-vitals باستخدام المفتاح metric_id للتأكّد من أنّك لا تحتسب أحداث "مؤشرات Core Web Vitals" نفسها أكثر من مرّة.

# 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.

طريقة تنظيم الأحداث في "إحصاءات Google‏ 4"

يتم الاحتفاظ ببيانات كلّ حدث من أحداث "إحصاءات Google‏ 4" في عمود STRUCT event_params. يتم تمثيل كلّ مَعلمة حدث تُرسلها إلى "إحصاءات Google‏ 4" على موقعك الإلكتروني بمفتاحها، والقيمة هي 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 أكبر عنصر من أكبر متغيّر تصميم ساهم في قيمة متغيّرات التصميم التراكمية. إذا لم يتم نقل أي عناصر، تكون قيمة debug_target هي null.

في ما يلي صفحات قائمة طلبات البحث مرتّبة من الأسوأ إلى الأفضل حسب قيمة CLS في الشريحة المئوية الخامسة والسبعين، ومجمّعة حسب 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. عرض نتائج طلب البحث بشكل مرئي في "مركز البيانات"

توفّر BigQuery طريقة سريعة لعرض أي نتائج طلب بحث بشكل مرئي من خلال "مركز البيانات". مركز البيانات هو أداة مجانية للتمثيل البصري للبيانات وعرض لوحات البيانات. لعرض نتائج طلب البحث بشكل مرئي بعد تنفيذه في واجهة مستخدم BigQuery، انقر على استكشاف البيانات ثم على استكشاف البيانات باستخدام "مركز البيانات".

استكشاف البيانات باستخدام خيار "مركز البيانات" في BigQuery

يؤدي ذلك إلى إنشاء رابط مباشر من BigQuery إلى "مركز البيانات" في طريقة العرض "استكشاف". في هذا العرض، يمكنك اختيار الحقول التي تريد عرضها بشكل مرئي، واختيار أنواع المخططات، وإعداد الفلاتر، وإنشاء مخططات مخصّصة لإجراء تحليل مرئي سريع. من نتائج طلب البحث أعلاه، يمكنك إنشاء هذا الرسم البياني الخطي للاطّلاع على مؤشر LCP بمرور الوقت:

رسم بياني خطي لقيم سرعة عرض أكبر محتوى مرئي (LCP) اليومية في مركز البيانات

باستخدام هذا الرابط المباشر بين BigQuery ومركز البيانات، يمكنك إنشاء رسومات بيانية سريعة من أيّ من طلبات البحث وإجراء تحليل مرئي. ومع ذلك، إذا كنت تريد إجراء تحليل إضافي، قد تحتاج إلى الاطّلاع على عدّة رسوم بيانية في لوحة بيانات تفاعلية للحصول على نظرة أكثر شمولية أو لتتمكّن من التوغّل في البيانات. يعني توفّر لوحة بيانات سهلة الاستخدام أنّه لن يكون عليك كتابة طلبات البحث وإنشاء الرسوم البيانية يدويًا في كل مرة تريد فيها تحليل مقاييسك.

يمكنك إنشاء لوحة بيانات في "مركز البيانات" باستخدام موصّل BigQuery الأصلي. لإجراء ذلك، انتقِل إلى datastudio.google.com، وأنشئ مصدر بيانات جديدًا، واختَر موصّل BigQuery، ثمّ اختَر مجموعة البيانات التي تريد العمل عليها:

استخدام موصّل BigQuery الأصلي في "مركز البيانات"

9- تجسيد بيانات Web Vitals

عند إنشاء لوحات بيانات لبيانات أحداث Web Vitals كما هو موضّح أعلاه، لن يكون من الفعّال استخدام مجموعة بيانات التصدير في "إحصاءات Google‏ 4" مباشرةً. بسبب بنية بيانات "إحصاءات Google‏ 4" والمعالجة المُسبَقة المطلوبة لمقاييس Web Vitals، يتم تنفيذ أجزاء من طلب البحث عدة مرات. يؤدي ذلك إلى حدوث مشكلتَين: أداء لوحة البيانات وتكاليف BigQuery.

يمكنك استخدام وضع الحماية في BigQuery مجانًا. من خلال طبقة الاستخدام المجاني في BigQuery، يمكنك الاستفادة من أول تيرابايت من بيانات طلب البحث التي تتم معالجتها شهريًا بدون أي تكلفة. بالنسبة إلى طرق التحليل التي تمت مناقشتها في هذه المشاركة، ما لم تكن تستخدم مجموعة بيانات كبيرة بشكلٍ ملحوظ أو تستعلم عن مجموعة البيانات بشكلٍ متكرّر، من المفترض أن تتمكّن من البقاء ضمن هذا الحدّ المجاني كل شهر. ولكن إذا كان لديك موقع إلكتروني يشهد عددًا كبيرًا من الزيارات وأردت مراقبة مقاييس مختلفة بانتظام باستخدام لوحة بيانات تفاعلية سريعة، نقترح عليك إجراء المعالجة المسبقة لبيانات مؤشرات Core Web Vitals وتخزينها مؤقتًا مع الاستفادة من ميزات فعالية BigQuery، مثل التقسيم والتجميع والتخزين المؤقت.

تعمل النص البرمجي التالي على المعالجة المسبقة لبيانات 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 من مجموعة بيانات "إحصاءات Google‏ 4" الأصلية.
يتوفّر معرّف الجلسة ونوع المستخدم (جديد في مقابل مكرّر الزيارة) ومعلومات التفاعل مع الجلسة مباشرةً في الأعمدة.
يتم تقسيم الجدول حسب التاريخ وتجميعه حسب اسم المقياس. يؤدي ذلك عادةً إلى تقليل كمية البيانات التي تتم معالجتها لكل طلب بحث.
بما أنّك لست بحاجة إلى استخدام أحرف بدل لطلب البحث في هذا الجدول، يمكن تخزين نتائج طلب البحث مؤقتًا لمدة تصل إلى 24 ساعة. ويساعد ذلك في تقليل التكاليف الناتجة من تكرار طلب البحث نفسه.
إذا كنت تستخدم BigQuery BI Engine، يمكنك تنفيذ دوال وعوامل تشغيل SQL محسّنة على هذا الجدول.

يمكنك إجراء طلب بحث مباشرةً عن هذا الجدول المادي من داخل واجهة مستخدم BigQuery، أو استخدامه في مركز البيانات باستخدام موصّل BigQuery.

تشغيل مهام إنشاء العروض المادية بانتظام

إذا نفّذت طلب البحث أعلاه بدون نطاق زمني، سيتم تنفيذه على مجموعة بيانات "إحصاءات Google" بأكملها. ننصحك بتجنُّب إجراء ذلك كل يوم، لأنّك ستعيد معالجة كميات كبيرة من البيانات السابقة. يمكنك تعديل طلب البحث لإضافة بيانات اليوم الأخير فقط عن طريق إزالة عبارة 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"

يتيح مركز البيانات من Google بشكلٍ أصلي قراءة البيانات من Google BigQuery. بعد أن أصبحت بيانات web-vitals من "إحصاءات Google‏ 4" متوفّرة في BigQuery، يمكنك استخدام موصّل BigQuery في مركز البيانات لقراءة الجدول الذي تم إنشاؤه مباشرةً.

استخدام Web Vitals Connector

بما أنّ إنشاء لوحة بيانات من البداية يستغرق وقتًا طويلاً، طوّرنا حلاً مجمّعًا ينشئ لك نموذج لوحة بيانات. أولاً، تأكَّد من أنّك قد أنشأت جدول Web Vitals باستخدام طلب البحث أعلاه. بعد ذلك، يمكنك الوصول إلى موصّل Web Vitals لأداة "مركز البيانات" باستخدام هذا الرابط: goo.gle/web-vitals-connector

بعد تقديم تفويض لمرة واحدة، من المفترض أن تظهر لك شاشة الإعدادات التالية:

شاشة تفويض Web Vitals Connector

قدِّم رقم تعريف جدول BigQuery المادي (أي الجدول المستهدف) ورقم تعريف مشروع الفوترة في BigQuery. بعد النقر على ربط، ينشئ "مركز البيانات" لوحة بيانات جديدة مستندة إلى نموذج ويربط بياناتك بها. يمكنك تعديل لوحة البيانات وتغييرها ومشاركتها كما تريد. إذا أنشأت لوحة بيانات مرة واحدة، لن تحتاج إلى الانتقال إلى رابط أداة الربط مرة أخرى إلا إذا أردت إنشاء لوحات بيانات متعددة من مجموعات بيانات مختلفة.

التنقّل في لوحة البيانات

أثناء التنقّل في لوحة البيانات، يمكنك الاطّلاع على المؤشرات اليومية لمقاييس Web Vitals وبعض معلومات الاستخدام الخاصة بموقعك الإلكتروني، مثل عدد المستخدمين والجلسات، في علامة التبويب "الملخّص".

في علامة التبويب "تحليل المستخدم"، يمكنك اختيار مقياس والحصول على تفصيل للنسبة المئوية للمقاييس، بالإضافة إلى عدد المستخدمين، حسب مقاييس الاستخدام والنشاط التجاري المختلفة.

تساعدك علامة التبويب "تحليل مسار الصفحة" في تحديد مواضع الخلل في موقعك الإلكتروني. يمكنك هنا اختيار مقياس للاطّلاع على النظرة العامة، ولكن يمكنك أيضًا الاطّلاع على خريطة التشتّت لجميع مسارات الصفحات مع القيمة المئوية على المحور ص وعدد السجلات على المحور س. يمكن أن تساعد خريطة التشتّت في تحديد الصفحات التي تتضمّن قيم مقاييس أقل من المتوقّع. بعد اختيار الصفحات، يمكنك التوغّل أكثر في منطقة المشكلة باستخدام "رسم بياني بالنقاط المبعثرة" لجدول "مسار الصفحة"، أو من خلال عرض جدول "هدف تصحيح الأخطاء".

علامة التبويب "تحليل الأرباح" هي مثال على كيفية تتبُّع مقاييس نشاطك التجاري وأدائك في المكان نفسه. يعرض هذا القسم جميع الجلسات التي أجرى فيها المستخدم عملية شراء. يمكنك مقارنة الإيرادات التي تم تحقيقها بتجربة المستخدم خلال جلسة معيّنة.

11. مراجع أخرى

أحسنت إكمال هذا الدرس التطبيقي حول الترميز. من المفترض أن تتمكّن الآن من تتبُّع أداء Core Web Vitals على مستوى موقعك الإلكتروني بدقة عالية. يجب أن تتمكّن أيضًا من تحديد أنواع صفحات وعناصر معيّنة على موقعك الإلكتروني تتسبّب في ارتفاع قيم CWV، ما يتيح لك التركيز على التحسينات.

المستندات المرجعية

يستند هذا الدرس التطبيقي حول الترميز بشكل كبير إلى مقالتَين من web.dev:
المقالة حول قياس Web Vitals في بيئة التشغيل
المقالة حول استخدام بيانات Web Vitals في "إحصاءات Google‏ 4" في BigQuery، والتي تتضمّن العديد من الأمثلة الأخرى على طلبات البحث التي يمكنك استخدامها
إذا كنت بحاجة إلى مزيد من المعلومات حول عملية الدمج بين "إحصاءات Google‏ 4" وBigQuery Export، يُرجى الاطّلاع على مركز مساعدة "إحصاءات Google".

قياس الأداء باستخدام web-vitals.js و"إحصاءات Google" وBigQuery

1. قبل البدء

المهام التي ستنفذها

المتطلبات

قبل البدء

2. إضافة مكتبة web-vitals وgtag إلى صفحة ويب

basic.html

basic.html

basic.html

3- قياس مؤشرات Core Web Vitals الخاصة بصفحة الويب

4. استكشاف بيانات "مؤشرات أداء الويب" بمزيد من التفصيل

CLS entries

LCP entries

‫INP entries

5- إعداد بيانات Web Vitals وإرسالها إلى "إحصاءات Google‏ 4"

تنظيم معلومات تصحيح الأخطاء لكل مقياس من مقاييس Core Web Vitals

diagnostics.html

إرسال البيانات إلى "إحصاءات Google"

diagnostics.html

diagnostics.html

6. التأكّد من أنّ بيانات Web Vitals تظهر في "إحصاءات Google"

7. طلب البحث عن بياناتك في BigQuery

طلب فرعي لاختيار أحداث CWV فقط

طريقة تنظيم الأحداث في "إحصاءات Google‏ 4"

العثور على الصفحات والعناصر الأسوأ أداءً

تصحيح أخطاء المقاييس الأخرى

8. عرض نتائج طلب البحث بشكل مرئي في "مركز البيانات"

9- تجسيد بيانات Web Vitals

تشغيل مهام إنشاء العروض المادية بانتظام

10. عرض البيانات بشكل مرئي في "مركز البيانات من Google"

استخدام Web Vitals Connector

التنقّل في لوحة البيانات

11. مراجع أخرى

Further reading

المستندات المرجعية

CLS `entries`

LCP `entries`

‫INP `entries`