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

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

۱. قبل از شروع

کاری که انجام خواهید داد

در این آزمایشگاه کد، شما قرار است:

Google Analytics 4 Property خود را به BigQuery لینک کنید.
کتابخانه‌ی web-vitals را به یک صفحه‌ی وب اضافه کنید.
داده‌های web-vitals را آماده و به گوگل آنالیتیکس ارسال کنید.
داده‌های Core Web Vitals خود را در BigQuery جستجو کنید.
برای تجسم داده‌های Core Web Vitals خود، یک داشبورد در Google Data Studio بسازید.

آنچه نیاز دارید

یک حساب گوگل آنالیتیکس با ویژگی GA4 .
یک حساب کاربری گوگل کلود.
یک مرورگر وب مبتنی بر کرومیوم، مانند گوگل کروم یا مایکروسافت اج. (برای اطلاعات بیشتر در مورد اینکه چرا به یک مرورگر وب مبتنی بر کرومیوم نیاز دارید، به پشتیبانی مرورگر مراجعه کنید.)
یک ویرایشگر متن به دلخواه شما، مانند Sublime Text یا Visual Studio Code.
جایی برای میزبانی صفحات آزمایشی خود تا ببینید کتابخانه web-vitals چگونه کار می‌کند. (می‌توانید از یک سرور محلی برای ارائه صفحات وب استاتیک استفاده کنید، یا صفحات آزمایشی خود را در GitHub میزبانی کنید .)
یک سایت عمومی که می‌توانید کد تحلیلی خود را در آن مستقر کنید. (بهره‌گیری از کد شما در مرحله تولید، مثال‌های BigQuery و Data Studio در انتهای این Codelab را قابل فهم‌تر می‌کند.)
آشنایی با HTML، CSS، جاوا اسکریپت و ابزارهای توسعه کروم

قبل از شروع

ابتدا، گوگل آنالیتیکس ۴ را به بیگ‌کوئری متصل کنید تا مطمئن شوید که می‌توانید به محض انتشار کد، تجزیه و تحلیل عملکرد را شروع کنید.

برای پیوند دادن ویژگی GA4 خود به BigQuery، مراحل موجود در مرکز راهنمای گوگل آنالیتیکس را دنبال کنید.

اکنون که ویژگی گوگل آنالیتیکس شما آماده ارسال داده‌های رویداد به BigQuery است، کتابخانه web-vitals را در سایت خود ادغام کنید.

۲. کتابخانه‌ی web-vitals و gtag را به یک صفحه‌ی وب اضافه کنید.

ابتدا، کتابخانه‌ی web-vitals را به یک صفحه وب اضافه کنید.

یک الگوی صفحه که می‌خواهید کتابخانه‌ی web-vitals را به آن اضافه کنید، باز کنید. برای این مثال، ما از یک صفحه‌ی ساده استفاده خواهیم کرد:

پایه.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 را از یک شبکه تحویل محتوا بارگذاری می‌کند.

پایه.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 را به صفحه‌ی وب اضافه کردید.

۳. معیارهای حیاتی هسته وب صفحه وب را اندازه‌گیری کنید

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

فایل ذخیره شده را در مرورگر وب خود باز کنید.
روی صفحه وب کلیک راست کنید.
برای باز کردن ابزارهای توسعه‌دهندگان گوگل کروم، روی «بازرسی» کلیک کنید.

۱d۶۰۱۵۶۱۳۳۰۴۴۲۱۵.png

روی تب کنسول > تنظیمات کنسول کلیک کنید .

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

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

روی تب کنسول کلیک کنید.
برای چاپ معیار «بزرگترین رنگ محتوا» (LCP)، روی هر قسمتی از صفحه وب کلیک کنید.
روی بارگیری مجدد این صفحه کلیک کنید برای مجبور کردن معیارهای تغییر چیدمان تجمعی (CLS) و تعامل با رنگ بعدی (INP) برای چاپ.

برای شبیه‌سازی اتصال سریع شبکه، روی زبانه شبکه > آنلاین > سریع ۳G کلیک کنید.
روی تب کنسول کلیک کنید.
برای چاپ مجدد متریک مربوط به LCP، روی هر قسمتی از صفحه وب کلیک کنید.

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

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

۴. داده‌های مربوط به وب ویتال‌ها را با جزئیات بیشتری بررسی کنید

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

`entries` CLS

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

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

`entries` LCP

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

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

`entries` INP

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

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

۵. داده‌های مربوط به وب ویتال‌ها را آماده و به گوگل آنالیتیکس ارسال کنید.

قبل از اینکه بتوانید داده‌های web-vitals را به گوگل آنالیتیکس ۴ ارسال کنید، باید به فرمتی تبدیل شوند که GA4 بتواند آن را دریافت کند.

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

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

تشخیص.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)
    });
  }

ارسال داده‌ها به گوگل آنالیتیکس

در نهایت، تابعی ایجاد کنید که پارامترها را از رویداد web-vitals دریافت کرده و به گوگل آنالیتیکس ارسال کند.

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

تشخیص.html

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

آفرین! شما اکنون رویدادهای web-vitals را به گوگل آنالیتیکس ارسال می‌کنید.

۶. بررسی کنید که داده‌های مربوط به وب ویتال‌ها در گوگل آنالیتیکس وجود داشته باشد

برای اطمینان از اینکه رویدادهای شما توسط ویژگی Google Analytics 4 شما ثبت می‌شوند:

ویژگی Google Analytics 4 خود را باز کنید و به Reports بروید.

گزینه «زمان واقعی» را انتخاب کنید.

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

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

برای دیدن خلاصه‌ای از مقادیر دریافتی گوگل آنالیتیکس، روی آن کلیدهای پارامتر کلیک کنید.

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

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

۷. داده‌های خود را در BigQuery جستجو کنید

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

کنسول گوگل کلود را باز کنید و پروژه خود را از منوی کشویی بالای صفحه انتخاب کنید.
از منوی ناوبری در سمت چپ بالای صفحه، روی BigQuery در زیر عنوان Analytics کلیک کنید.
در پنجره اکسپلورر ، پروژه خود را گسترش دهید تا مجموعه داده‌های گوگل آنالیتیکس خود را ببینید. نام مجموعه داده‌ها analytics_ است و به دنبال آن شناسه ویژگی گوگل آنالیتیکس ۴ شما (مثلاً analytics_229787100) قرار دارد.
مجموعه داده‌ها را باز کنید و باید جدول events_ را ببینید. عدد داخل پرانتز تعداد روزهای موجود برای پرس‌وجو است.

زیرپرس و جو برای انتخاب فقط رویدادهای CWV

برای پرس‌وجو از مجموعه داده‌هایی که فقط شامل رویدادهای CWV ما هستند، با یک زیرپرس‌وجو شروع کنید که ۲۸ روز آخر رویدادهای LCP، CLS و INP را انتخاب می‌کند. این زیرپرس‌وجو به‌طور خاص با استفاده از کلید metric_id به دنبال آخرین مقدار گزارش‌شده برای هر شناسه رویداد web-vitals می‌گردد تا مطمئن شود که رویدادهای 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

هر داده رویداد گوگل آنالیتیکس ۴ در یک ستون 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 آنها در صدک ۷۵، که بر اساس 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'

۸. نتایج کوئری را در دیتا استودیو مصورسازی کنید

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

۹. داده‌های Web Vitals را مادی‌سازی کنید

هنگام ایجاد داشبورد از داده‌های رویداد Web Vitals همانطور که در بالا توضیح داده شد، استفاده مستقیم از مجموعه داده‌های خروجی Google Analytics 4 کارآمد نیست. با توجه به ساختار داده‌های GA4 و پیش‌پردازش مورد نیاز برای معیارهای Web Vitals، بخش‌هایی از کوئری شما چندین بار اجرا می‌شوند. این دو مشکل ایجاد می‌کند: عملکرد داشبورد و هزینه‌های BigQuery.

شما می‌توانید از حالت سندباکس BigQuery به صورت رایگان استفاده کنید. با سطح استفاده رایگان BigQuery، ۱ ترابایت اول داده‌های پرس‌وجو پردازش‌شده در هر ماه رایگان است. برای روش‌های تحلیلی که در این پست مورد بحث قرار گرفته است، مگر اینکه از یک مجموعه داده بسیار بزرگ استفاده کنید یا مرتباً از مجموعه داده پرس‌وجوهای سنگین انجام دهید، باید بتوانید هر ماه در این محدودیت رایگان بمانید. اما اگر وب‌سایت پرترافیکی دارید و می‌خواهید به‌طور منظم معیارهای مختلف را با استفاده از یک داشبورد تعاملی سریع رصد کنید، پیشنهاد می‌کنیم داده‌های حیاتی وب خود را پیش‌پردازش و مادی‌سازی کنید و در عین حال از ویژگی‌های بهره‌وری 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 حفظ می‌کند.
شناسه جلسه، نوع کاربر (جدید در مقابل کاربر قبلی) و اطلاعات مربوط به تعامل جلسه مستقیماً در ستون‌ها موجود است.
جدول بر اساس تاریخ تقسیم‌بندی و بر اساس نام معیار دسته‌بندی می‌شود . این کار معمولاً میزان داده‌های پردازش‌شده برای هر پرس‌وجو را کاهش می‌دهد.
از آنجایی که برای پرس‌وجو در این جدول نیازی به استفاده از wildcards ندارید، نتایج پرس‌وجو می‌توانند تا ۲۴ ساعت در حافظه پنهان (cache) ذخیره شوند. این امر هزینه‌های ناشی از تکرار همان پرس‌وجو را کاهش می‌دهد.
اگر از موتور هوش تجاری BigQuery استفاده می‌کنید، می‌توانید توابع و عملگرهای SQL بهینه‌شده را روی این جدول اجرا کنید.

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

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

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

۱۰. داده‌ها را در Google Data Studio مصورسازی کنید

Google Data Studio به صورت پیش‌فرض از خواندن داده‌ها از Google BigQuery پشتیبانی می‌کند. اکنون که داده‌های web-vitals از Google Analytics 4 در BigQuery قرار گرفته‌اند، می‌توانید از رابط Data Studio BigQuery برای خواندن مستقیم جدول materialized خود استفاده کنید.

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

از آنجایی که ساخت داشبورد از ابتدا زمان‌بر است، ما یک راه‌حل بسته‌بندی‌شده ایجاد کرده‌ایم که یک داشبورد الگو برای شما ایجاد می‌کند. ابتدا مطمئن شوید که جدول Web Vitals خود را با استفاده از کوئری بالا پیاده‌سازی کرده‌اید. سپس با استفاده از این لینک به رابط Web Vitals برای Data Studio دسترسی پیدا کنید: goo.gle/web-vitals-connector

پس از ارائه مجوز یکبار مصرف، باید صفحه پیکربندی زیر را مشاهده کنید:

صفحه مجوز اتصال دهنده ویتامین های وب

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

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

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

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

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

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

۱۱. منابع دیگر

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

مطالعه بیشتر

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

اسناد مرجع

این آزمایشگاه کد، به شدت از دو مقاله web.dev الهام گرفته شده است:
مقاله در مورد اندازه‌گیری شاخص‌های حیاتی وب (Web Vitals) در این زمینه .
مقاله در مورد استفاده از داده‌های Web Vitals GA4 در BigQuery ، که نمونه‌های پرس‌وجوی بسیار بیشتری دارد که می‌توانید از آنها استفاده کنید.
اگر به اطلاعات بیشتری در مورد ادغام GA4 > BigQuery Export نیاز دارید، لطفاً به مرکز راهنمای گوگل آنالیتیکس مراجعه کنید.

عملکرد را با web-vitals.js، Google Analytics و BigQuery اندازه‌گیری کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

۱. قبل از شروع

کاری که انجام خواهید داد

آنچه نیاز دارید

قبل از شروع

۲. کتابخانه‌ی web-vitals و gtag را به یک صفحه‌ی وب اضافه کنید.

پایه.html

پایه.html

پایه.html

۳. معیارهای حیاتی هسته وب صفحه وب را اندازه‌گیری کنید

۴. داده‌های مربوط به وب ویتال‌ها را با جزئیات بیشتری بررسی کنید

entries CLS

entries LCP

entries INP

۵. داده‌های مربوط به وب ویتال‌ها را آماده و به گوگل آنالیتیکس ارسال کنید.

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

تشخیص.html

ارسال داده‌ها به گوگل آنالیتیکس

تشخیص.html

تشخیص.html

۶. بررسی کنید که داده‌های مربوط به وب ویتال‌ها در گوگل آنالیتیکس وجود داشته باشد

۷. داده‌های خود را در BigQuery جستجو کنید

زیرپرس و جو برای انتخاب فقط رویدادهای CWV

نحوه ساختار رویدادهای GA4

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

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

۸. نتایج کوئری را در دیتا استودیو مصورسازی کنید

۹. داده‌های Web Vitals را مادی‌سازی کنید

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

۱۰. داده‌ها را در Google Data Studio مصورسازی کنید

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

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

۱۱. منابع دیگر

مطالعه بیشتر

اسناد مرجع

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

`entries` CLS

`entries` LCP

`entries` INP