این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

عملکرد را با web-vitals.js، Google Analytics و BigQuery اندازه‌گیری کنید

1. قبل از شروع

کاری که خواهی کرد

در این کد لبه، شما قصد دارید:

ویژگی 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، جاوا اسکریپت و ابزار توسعه کروم .

قبل از شروع

ابتدا، Google Analytics 4 را به BigQuery پیوند دهید تا اطمینان حاصل کنید که می توانید به محض انتشار کد خود، تجزیه و تحلیل عملکرد را شروع کنید.

مراحل را در مرکز راهنمای Google Analytics دنبال کنید تا دارایی GA4 خود را به BigQuery پیوند دهید.

اکنون که دارایی 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 ، می‌خواهیم تجربه کاربری را با اتصال آهسته شبیه‌سازی کنیم.

فایل ذخیره شده را در مرورگر وب خود باز کنید.
روی صفحه وب کلیک راست کنید.
بر روی Inspect کلیک کنید تا Google Chrome Developer Tools باز شود.

روی تب Console > Console settings کلیک کنید .

کادر بررسی حفظ گزارش را انتخاب کنید تا هنگام بازخوانی صفحه وب، گزارش‌ها باقی بمانند.

برای شبیه سازی اتصال کند شبکه، روی تب Network > Online > Slow 3G کلیک کنید.

روی تب Console کلیک کنید.
در هر نقطه از صفحه وب کلیک کنید تا معیار بزرگ‌ترین رنگ محتوایی (LCP) برای چاپ مجبور شود.
روی بارگذاری مجدد این صفحه کلیک کنید برای وادار کردن معیارهای تغییر چیدمان تجمعی (CLS) و تعامل به رنگ بعدی (INP) برای چاپ.

برای شبیه سازی اتصال سریع شبکه، روی تب Network > Online > Fast 3G کلیک کنید.
روی تب Console کلیک کنید.
روی هر نقطه از صفحه وب کلیک کنید تا معیار LCP دوباره چاپ شود.

روی بارگذاری مجدد این صفحه کلیک کنید برای وادار کردن مجدد معیارهای CLS و INP برای چاپ مجدد.

همین! شما Core Web Vitals صفحه وب را اندازه گیری کردید.

4. داده های web-vitals را با جزئیات بیشتر کاوش کنید

برای هر یک از رویدادهای Core Web Vitals که اندازه‌گیری می‌کنید، مجموعه‌ای از اطلاعات موجود در داده‌های بازگردانده شده وجود دارد که می‌توانید از آنها برای رفع اشکال گلوگاه‌های عملکرد استفاده کنید. هر رویداد web-vitals حاوی یک آرایه entries است که اطلاعات مربوط به رویدادها در مقدار متریک فعلی نقش دارد.

`entries` CLS

گسترش ویژگی entries شی ثبت شده توسط onCLS() لیستی از ورودی های LayoutShift را به شما نشان می دهد. هر LayoutShift حاوی یک ویژگی value است که امتیاز تغییر طرح را منعکس می‌کند و یک آرایه sources که می‌توانیم از آن برای دیدن عناصر جابجا شده استفاده کنیم.

در این مثال، دو تغییر چیدمان رخ داد که هر دو یک عنصر h1 را در صفحه جابجا کردند. ویژگی currentRect به ما می گوید که المان اکنون کجاست و عنصر previousRect به ما می گوید قبلا کجا بوده است.

`entries` LCP

گسترش ویژگی ورودی شیء ثبت‌شده توسط onLCP() به ما نشان می‌دهد که کدام عناصر قبل از گزارش مقدار نهایی، کاندید بزرگ‌ترین رنگ محتوایی بودند.

در این مثال، آرایه entries حاوی لیستی از همه نامزدهای LCP به ترتیب زمانی است. در این حالت ابتدا یک عنصر h1 و سپس یک عنصر img ارائه می شود. img بزرگترین رنگ محتوایی بود. عنصر LCP گزارش شده همیشه آخرین مورد در آرایه است.

`entries` INP

هنگامی که ویژگی entries شی ثبت شده توسط onINP(), آرایه ای حاوی ورودی PerformanceEventTiming برای تعامل با رنگ بعدی در صفحه نشان می دهد.

ویژگی name به شما می گوید که کدام نوع ورودی کاربر تایمر را برای در دسترس بودن رشته اصلی فعال کرده است. value که web-vitals گزارش می کند تاخیری است که به عنوان ویژگی duration ورودی PerformanceEventTiming داده می شود که از میکروثانیه به میلی ثانیه تبدیل شده است. در این حالت INP اندازه گیری شده 48 میلی ثانیه است.

5. داده های web-vitals را برای 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 خود را باز کنید و به گزارش ها بروید.

Realtime را انتخاب کنید.

صفحه آزمایشی خود را چند بار بازخوانی کنید و مطمئن شوید که در بین بازخوانی ها روی صفحه کلیک کنید تا رویدادهای INP فعال شوند.
به دنبال بخش شمارش رویداد بر اساس نام رویداد در رابط کاربری نمای کلی بیدرنگ بگردید. باید رویدادهای LCP، INP و CLS را ببینید.

روی هر یک از نام رویدادها کلیک کنید تا پارامترهای ارسال شده با آن رویدادها را ببینید.

روی آن کلیدهای پارامتر کلیک کنید تا خلاصه ای از مقادیر دریافتی Google Analytics را ببینید.

ممکن است بخواهید داده‌های دیگری را به اطلاعات اشکال‌زدایی خود اضافه کنید، مانند نام‌های قالب صفحه یا سایر رویدادهای صفحه مرتبط با INP که قبلاً در این Codelab مورد بحث قرار گرفت. به سادگی عبارات return را در تابع getDebugInfo() تغییر دهید.

هنگامی که از داده های بدست آمده از صفحات آزمایشی خود راضی بودید، کد GA جدید خود را برای تولید در سایت خود مستقر کنید و به مرحله بعدی بروید.

7. داده های خود را در BigQuery پرس و جو کنید

هنگامی که کد Google Analytics شما برای چند روز فعال شد، می توانید جستجوی داده ها را در BigQuery شروع کنید. ابتدا بررسی کنید که داده ها به BigQuery منتقل شده باشند.

Google Cloud Console را باز کنید و پروژه خود را از منوی کشویی در بالای صفحه انتخاب کنید.
از منوی ناوبری در سمت چپ بالای صفحه، روی 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. نتایج پرس و جو را در استودیو داده تجسم کنید

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، می توانید نمودارهای سریعی را از هر یک از پرس و جوهای خود ایجاد کنید و تجزیه و تحلیل بصری انجام دهید. با این حال، اگر می‌خواهید تجزیه و تحلیل بیشتری انجام دهید، ممکن است بخواهید به چندین نمودار در یک داشبورد تعاملی نگاه کنید تا دید جامع‌تری داشته باشید یا بتوانید داده‌ها را بررسی کنید. داشتن یک داشبورد مفید به این معنی است که لازم نیست هر بار که می خواهید معیارهای خود را تجزیه و تحلیل کنید، پرس و جو بنویسید و نمودارها را به صورت دستی ایجاد کنید.

می‌توانید با استفاده از رابط اصلی BigQuery یک داشبورد در Data Studio ایجاد کنید. برای انجام این کار، به datastudio.google.com بروید، یک منبع داده جدید ایجاد کنید، رابط BigQuery را انتخاب کنید و مجموعه داده‌ای را که می‌خواهید با آن کار کنید انتخاب کنید:

استفاده از رابط اصلی BigQuery در Data Studio

9. داده های Web Vitals را مادی کنید

هنگام ایجاد داشبورد داده‌های رویداد Web Vitals همانطور که در بالا توضیح داده شد، استفاده مستقیم از مجموعه داده صادراتی Google Analytics 4 کارآمد نیست. به دلیل ساختار داده های GA4 و پیش پردازش مورد نیاز برای معیارهای Web Vitals، بخش هایی از پرس و جو شما چندین بار اجرا می شود. این دو مشکل ایجاد می کند: عملکرد داشبورد و هزینه 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');

این مجموعه داده واقعی چندین مزیت دارد:

ساختار داده مسطح است و پرس و جو آسان تر است.
فقط رویدادهای Web Vitals را از مجموعه داده اصلی GA4 حفظ می کند.
شناسه جلسه، نوع کاربر (جدید در مقابل بازگشت)، و اطلاعات تعامل جلسه مستقیماً در ستون ها موجود است.
جدول بر اساس تاریخ تقسیم شده و با نام متریک خوشه بندی شده است . این معمولاً میزان داده های پردازش شده برای هر پرس و جو را کاهش می دهد.
از آنجایی که برای پرس و جو در این جدول نیازی به استفاده از حروف عام ندارید، نتایج پرس و جو می توانند حداکثر تا 24 ساعت در حافظه پنهان شوند. این باعث کاهش هزینه های تکرار یک پرس و جو می شود.
اگر از BigQuery BI Engine استفاده می کنید، می توانید توابع و عملگرهای SQL بهینه شده را روی این جدول اجرا کنید.

می‌توانید مستقیماً از داخل BigQuery UI از این جدول واقعی پرس و جو کنید یا با استفاده از رابط BigQuery از آن در Data Studio استفاده کنید.

به طور منظم کارهای مادی را اجرا کنید

اگر پرس و جوی بالا را بدون محدوده تاریخ اجرا کنید، در کل مجموعه داده 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 Console برای برنامه ریزی درخواست خود برای اجرای روزانه استفاده کنید.

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 Connector

شناسه جدول BigQuery تحقق یافته (یعنی جدول هدف) و شناسه پروژه صورتحساب BigQuery خود را ارائه دهید. پس از کلیک روی CONNECT ، Data Studio یک داشبورد قالب جدید ایجاد می کند و داده های شما را با آن مرتبط می کند. می توانید داشبورد را هر طور که دوست دارید ویرایش، تغییر دهید و به اشتراک بگذارید. اگر یک داشبورد را یک بار ایجاد کنید، لازم نیست دوباره به پیوند رابط مراجعه کنید، مگر اینکه بخواهید چندین داشبورد از مجموعه داده های مختلف ایجاد کنید.

داشبورد را پیمایش کنید

همانطور که در داشبورد پیمایش می کنید، می توانید روندهای روزانه معیارهای Web Vitals و برخی اطلاعات استفاده از وب سایت خود مانند کاربران و جلسات را در برگه خلاصه مشاهده کنید.

در برگه تجزیه و تحلیل کاربر، می توانید یک معیار را انتخاب کنید و صدک معیارها و همچنین تعداد کاربران را بر اساس معیارهای مختلف استفاده و کسب و کار تجزیه و تحلیل کنید.

تب Page Path Analysis به شما کمک می کند تا مناطق مشکل دار وب سایت خود را شناسایی کنید. در اینجا، می توانید یک متریک برای مشاهده نمای کلی انتخاب کنید، اما همچنین نقشه پراکندگی تمام مسیرهای صفحه را با مقدار صدک در محور y و تعداد رکورد در محور x مشاهده می کنید. نقشه پراکندگی می تواند به شناسایی صفحاتی که مقادیر متریک کمتر از حد انتظار دارند کمک کند. هنگامی که صفحات را انتخاب کردید، می توانید با نمودار پراکندگی جدول مسیر صفحه یا با مشاهده جدول Debug Target، ناحیه مشکل را بیشتر بررسی کنید.

برگه تجزیه و تحلیل درآمد نمونه ای از نحوه نظارت بر معیارهای کسب و کار و عملکرد خود در یک مکان است. این بخش تمام جلساتی را که کاربر خرید کرده است ترسیم می کند. می توانید درآمد کسب شده را با تجربه کاربر در طول یک جلسه خاص مقایسه کنید.

11. سایر منابع

آفرین برای تکمیل این Codelab! اکنون باید بتوانید عملکرد Core Web Vitals خود را در سراسر سایت خود با سطح بالایی از جزئیات پیگیری کنید. همچنین باید بتوانید انواع صفحه و عناصر خاصی را در سایت خود که باعث CWV های بالا می شوند شناسایی کنید تا بتوانید بهینه سازی های خود را متمرکز کنید.

در ادامه مطلب

web.dev مجموعه ای از مقالات و مطالعات موردی با استراتژی هایی برای بهبود Core Web Vitals دارد. با مقالات بهینه سازی برای هر معیار شروع کنید:

اسناد مرجع

این کد لبه به شدت از دو مقاله 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. داده های web-vitals را با جزئیات بیشتر کاوش کنید

entries CLS

entries LCP

entries INP

5. داده های web-vitals را برای Google Analytics 4 آماده و ارسال کنید

اطلاعات اشکال زدایی را برای هر CWV ساختار دهید

diagnostics.html

داده ها را به Google Analytics ارسال کنید

diagnostics.html

diagnostics.html

6. بررسی کنید که داده های web-vitals در Google Analytics پر شده باشد

7. داده های خود را در BigQuery پرس و جو کنید

درخواست فرعی برای انتخاب فقط رویدادهای CWV

چگونگی ساختار رویدادهای GA4

صفحات و عناصر با بدترین عملکرد خود را پیدا کنید

سایر معیارها را اشکال زدایی کنید

8. نتایج پرس و جو را در استودیو داده تجسم کنید

9. داده های Web Vitals را مادی کنید

به طور منظم کارهای مادی را اجرا کنید

10. داده ها را در Google Data Studio تجسم کنید

از رابط Web Vitals استفاده کنید

داشبورد را پیمایش کنید

11. سایر منابع

در ادامه مطلب

اسناد مرجع

`entries` CLS

`entries` LCP

`entries` INP