تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

1. قبل البدء

الأنشطة

في هذا الدرس التطبيقي حول الترميز، ستتمكّن من:

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

المتطلبات

حساب على "إحصاءات 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. إضافة مكتبة "مؤشرات أداء الويب" و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- قياس "مؤشرات أداء الويب الأساسية" لصفحة الويب

مؤشرات أداء الويب الأساسية هي مقياس لتجارب المستخدمين الفعلية، التي يتم تسجيلها من خلال Chrome أو مكتبة web-vitals على متصفّحات Chromium. عند طرح "web-vitals" في قناة الإصدار العلني، ستظهر لك مجموعة كبيرة من النتائج استنادًا إلى ما يقدّمه المستخدمون وسرعات الاتصال وقوة الجهاز وكيفية تفاعلهم مع موقعك. لتوضيح إمكانات مكتبة web-vitals، سنحاكي تجربة مستخدم ذات اتصال بطيء.

افتح الملف المحفوظ في متصفح الويب.
انقر بزر الماوس الأيمن على صفحة الويب.
انقر على فحص لفتح "أدوات مطوّري برامج Google Chrome".

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

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

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

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

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

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

هذا كل شيء! لقد قمت بقياس مؤشرات Core Web Vitals الخاصة بصفحة الويب.

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

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

متغيّرات التصميم التراكمية `entries`

يؤدي توسيع السمة entries للعنصر المسجَّل من خلال onCLS() إلى عرض قائمة تضم إدخالات LayoutShift. يحتوي كل LayoutShift على سمة value تعكس نتيجة متغيّرات التصميم ومصفوفة sources يمكننا استخدامها لمعرفة العناصر التي تغيّرت.

في هذا المثال، حدث متغيّران للتنسيق، وكلاهما ينقل عنصر h1 على الصفحة. تخبرنا السمة currentRect بمكان العنصر الآن، ويخبرنا العنصر previousRect بمكانه السابق.

سرعة عرض أكبر محتوى مرئي `entries`

يوضح لنا توسيع خاصية الإدخالات الخاصة بالعنصر الذي تم تسجيله بواسطة onLCP() العناصر المرشحة لـ "سرعة عرض أكبر محتوى مرئي" قبل تسجيل القيمة النهائية.

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

مدى استجابة الصفحة لتفاعلات المستخدم (INP) `entries`

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

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

5- إعداد بيانات "مؤشرات أداء الويب" وإرسالها إلى "إحصاءات Google 4"

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

تنظيم معلومات تصحيح الأخطاء لكل CWV

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

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

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

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

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

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

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

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

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

7. الاستعلام عن بياناتك في BigQuery

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

افتح Google Cloud Console واختَر مشروعك من القائمة المنسدلة في أعلى الشاشة.
من قائمة التنقّل في أعلى يمين الشاشة، انقر على BigQuery تحت عنوان إحصاءات Google.
في لوحة Explorer، وسِّع مشروعك للاطّلاع على مجموعة بيانات "إحصاءات Google". اسم مجموعة البيانات هو analytics_ متبوعًا برقم تعريف موقعك على "إحصاءات Google 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.

كيفية تنظيم أحداث "إحصاءات 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 العنصر الأكبر من متغيّرات التصميم الأكبر الذي ساهم في قيمة متغيّرات التصميم التراكمية (CLS). وإذا لم يتم تغيير أي عناصر، تكون قيمة 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. تجسيد بيانات "مؤشرات أداء الويب"

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

يمكنك استخدام وضع الحماية في BigQuery مجانًا. من خلال فئة الاستخدام المجاني في BigQuery، تكون أول 1 تيرابايت من بيانات طلبات البحث التي تتم معالجتها شهريًا مجانية. بالنسبة لطرق التحليل التي تمت مناقشتها في هذه المقالة، ما لم تكن تستخدم مجموعة بيانات كبيرة جدًا أو تقوم بالاستعلام بشكل مكثف عن مجموعة البيانات بانتظام، فيجب أن تكون قادرًا على البقاء ضمن هذا الحد المجاني كل شهر. إذا كان لديك موقع إلكتروني يجذب عددًا كبيرًا من الزيارات وأردت تتبُّع مقاييس مختلفة بانتظام باستخدام لوحة بيانات تفاعلية سريعة، نقترح معالجة بيانات مؤشرات أداء الويب مسبقًا وإنشائها مع الاستفادة من ميزات الكفاءة في 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');

مجموعة البيانات التي تحققت هذه لها عدة مزايا:

يتم تبسيط هيكل البيانات ويسهل الاستعلام عنها.
وهي تحتفظ فقط بأحداث "مؤشرات أداء الويب" الواردة من مجموعة البيانات الأصلية في "إحصاءات 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 في "مركز البيانات من Google" لقراءة الجدول الذي يظهر مباشرةً.

استخدام "موصِّل مؤشرات أداء الويب"

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

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

شاشة تفويض "موصل مؤشرات أداء الويب"

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

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

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

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

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

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

11. مراجع أخرى

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

قراءة إضافية

يضم موقع web.dev مجموعة من المقالات ودراسات الحالة التي تتضمّن استراتيجيات لتحسين مؤشرات Core Web Vitals. ابدأ بالمقالات المتعلقة بالتحسين لكل مقياس:

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

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

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

1. قبل البدء

الأنشطة

المتطلبات

قبل البدء

2. إضافة مكتبة "مؤشرات أداء الويب" وgtag إلى إحدى صفحات الويب

basic.html

basic.html

basic.html

3- قياس "مؤشرات أداء الويب الأساسية" لصفحة الويب

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

متغيّرات التصميم التراكمية entries

سرعة عرض أكبر محتوى مرئي entries

مدى استجابة الصفحة لتفاعلات المستخدم (INP) entries

5- إعداد بيانات "مؤشرات أداء الويب" وإرسالها إلى "إحصاءات Google 4"

تنظيم معلومات تصحيح الأخطاء لكل CWV

diagnostics.html

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

diagnostics.html

diagnostics.html

6- التأكّد من تعبئة بيانات "مؤشرات أداء الويب" في "إحصاءات Google"

7. الاستعلام عن بياناتك في BigQuery

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

كيفية تنظيم أحداث "إحصاءات Google 4"

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

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

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

9. تجسيد بيانات "مؤشرات أداء الويب"

تنفيذ مهام تحقّق بانتظام

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

استخدام "موصِّل مؤشرات أداء الويب"

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

11. مراجع أخرى

قراءة إضافية

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

متغيّرات التصميم التراكمية `entries`

سرعة عرض أكبر محتوى مرئي `entries`

مدى استجابة الصفحة لتفاعلات المستخدم (INP) `entries`