หน้านี้ได้รับการแปลโดย Cloud Translation API

วัดประสิทธิภาพด้วย web-vitals.js, Google Analytics และ BigQuery

1. ก่อนเริ่มต้น

สิ่งที่คุณจะต้องทำ

ใน Codelab นี้ คุณจะทำสิ่งต่อไปนี้

ลิงก์พร็อพเพอร์ตี้ Google Analytics 4 กับ BigQuery
เพิ่มไลบรารี web-vitals ลงในหน้าเว็บ
จัดเตรียมและส่งข้อมูล web-vitals ไปยัง Google Analytics
ค้นหาข้อมูล Core Web Vitals ใน BigQuery
สร้างแดชบอร์ดใน Google Data Studio เพื่อแสดงภาพข้อมูล 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, JavaScript และเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ก่อนจะเริ่มต้น

ก่อนอื่น ให้ลิงก์ Google Analytics 4 กับ BigQuery เพื่อให้มั่นใจว่าคุณเริ่มวิเคราะห์ประสิทธิภาพได้ทันทีที่เผยแพร่โค้ด

ทําตามขั้นตอนในศูนย์ช่วยเหลือของ Google Analytics เพื่อลิงก์พร็อพเพอร์ตี้ GA4 กับ BigQuery

เมื่อพร็อพเพอร์ตี้ Google Analytics พร้อมส่งออกข้อมูลเหตุการณ์ไปยัง 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

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

เปิดไฟล์ที่บันทึกไว้ในเว็บเบราว์เซอร์
คลิกขวาที่หน้าเว็บ
คลิกตรวจสอบเพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Google Chrome

คลิกแท็บคอนโซล > การตั้งค่าคอนโซล

เลือกช่องทำเครื่องหมายเก็บบันทึกเพื่อให้บันทึกคงอยู่เมื่อคุณรีเฟรชหน้าเว็บ

คลิกแท็บเครือข่าย > ออนไลน์ > 3G ช้าเพื่อจำลองการเชื่อมต่อเครือข่ายที่ช้า

คลิกแท็บคอนโซล
คลิกที่ใดก็ได้บนหน้าเว็บเพื่อบังคับให้เมตริก Largest Contentful Paint (LCP) พิมพ์ออกมา
คลิกโหลดหน้านี้ซ้ำ เพื่อบังคับให้เมตริกสำหรับ Cumulative Layout Shift (CLS) และ Interaction to Next Paint (INP) พิมพ์

คลิกแท็บเครือข่าย > ออนไลน์ > Fast 3G เพื่อจำลองการเชื่อมต่อเครือข่ายที่รวดเร็ว
คลิกแท็บคอนโซล
คลิกที่ใดก็ได้บนหน้าเว็บเพื่อบังคับให้เมตริกให้ LCP พิมพ์อีกครั้ง

คลิกโหลดหน้านี้ซ้ำ เพื่อบังคับให้เมตริกสำหรับ CLS และ INP พิมพ์อีกครั้ง

เท่านี้ก็เรียบร้อย คุณวัด Core Web Vitals ของหน้าเว็บแล้ว

4. สำรวจข้อมูล Wi-Fi บนเว็บอย่างละเอียด

สำหรับแต่ละเหตุการณ์ Core Web Vitals ที่คุณกำลังวัด จะมีโฮสต์ของข้อมูลที่อยู่ในข้อมูลกลับมา ซึ่งคุณสามารถใช้เพื่อแก้ไขข้อบกพร่องจุดคอขวดด้านประสิทธิภาพได้ เหตุการณ์ web-vitals แต่ละเหตุการณ์จะมีอาร์เรย์ entries ที่มีข้อมูลเกี่ยวกับเหตุการณ์ที่ส่งผลต่อค่าเมตริกปัจจุบัน

CLS `entries`

หมายเหตุ: onCLS() จะไม่ทริกเกอร์การเปลี่ยนเลย์เอาต์ทุกครั้งโดยค่าเริ่มต้น และคุณอาจขยายเอาต์พุตของเหตุการณ์ที่บันทึกไว้ไม่ได้หลังจากการโหลดหน้าเว็บซ้ำ คุณบังคับให้ onCLS() รายงานทุกครั้งที่ค่า CLS เปลี่ยนแปลงได้ด้วยการอัปเดตโค้ดเป็น onCLS(console.log, true) ซึ่งจะไม่เกิดขึ้นในการเปลี่ยนแปลงเลย์เอาต์ทุกครั้ง แต่จะเฉพาะในกรณีที่การเปลี่ยนเลย์เอาต์เปลี่ยนค่า CLS

การขยายพร็อพเพอร์ตี้ entries ของออบเจ็กต์ที่บันทึกโดย onCLS() จะแสดงรายการ LayoutShift LayoutShift แต่ละรายการจะมีพร็อพเพอร์ตี้ value ที่แสดงถึงคะแนนการเปลี่ยนแปลงของเลย์เอาต์ และอาร์เรย์ sources ที่เราใช้เพื่อดูองค์ประกอบที่มีการเปลี่ยนแปลงได้

ในตัวอย่างนี้ เกิดการเปลี่ยนเลย์เอาต์ 2 รายการ โดยทั้งคู่เป็นการย้ายองค์ประกอบ h1 ในหน้าเว็บ พร็อพเพอร์ตี้ currentRect บอกเราว่าตอนนี้องค์ประกอบอยู่ที่ไหน และองค์ประกอบ previousRect จะบอกให้เราทราบตำแหน่งก่อนหน้านั้น

LCP `entries`

การขยายพร็อพเพอร์ตี้รายการของออบเจ็กต์ที่บันทึกโดย onLCP() จะแสดงให้เราเห็นว่าองค์ประกอบใดเป็นตัวเลือกสำหรับ Largest Contentful Paint ก่อนที่จะมีการรายงานค่าสุดท้าย

ในตัวอย่างนี้ อาร์เรย์ entries มีรายการตัวเลือก LCP ทั้งหมดตามลำดับเวลา ในกรณีนี้ องค์ประกอบ h1 จะแสดงผลก่อน ตามด้วยองค์ประกอบ img img เป็น Largest Contentful Paint องค์ประกอบ LCP ที่รายงานจะเป็นรายการสุดท้ายในอาร์เรย์เสมอ

INP `entries`

เมื่อคุณขยายพร็อพเพอร์ตี้ entries ของออบเจ็กต์ที่บันทึกโดย onINP(), จะแสดงอาร์เรย์ที่มีรายการ PerformanceEventTiming สำหรับการโต้ตอบเพื่อแสดงผลครั้งต่อไปในหน้าเว็บ

พร็อพเพอร์ตี้ name จะบอกให้คุณทราบถึงประเภทของอินพุตของผู้ใช้ที่ทริกเกอร์ตัวจับเวลาความพร้อมใช้งานของเทรดหลัก value ที่ web-vitals รายงานคือความล่าช้าเนื่องจากเป็นพร็อพเพอร์ตี้ duration ของรายการ PerformanceEventTiming ซึ่งแปลงจากไมโครวินาทีเป็นมิลลิวินาที ในกรณีนี้ INP ที่วัดได้คือ 48 มิลลิวินาที

5. จัดเตรียมและส่งข้อมูลกิจกรรมบนเว็บไปยัง 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. ตรวจสอบว่ามีการเติมข้อมูล Wi-Fi บนเว็บใน Google Analytics หรือไม่

วิธีตรวจสอบว่าพร็อพเพอร์ตี้ Google Analytics 4 บันทึกเหตุการณ์

เปิดพร็อพเพอร์ตี้ Google Analytics 4 แล้วไปที่รายงาน

เลือกเรียลไทม์

รีเฟรชหน้าทดสอบ 2-3 ครั้ง และตรวจสอบว่าได้คลิกหน้าเว็บระหว่างการรีเฟรชเพื่อเรียกเหตุการณ์ INP ให้แสดง
มองหาส่วนจํานวนเหตุการณ์ตามชื่อเหตุการณ์ใน UI ภาพรวมแบบเรียลไทม์ คุณควรเห็นเหตุการณ์ LCP, INP และ CLS

คลิกชื่อเหตุการณ์ใดก็ได้เพื่อดูพารามิเตอร์ที่ส่งพร้อมกับเหตุการณ์เหล่านั้น

คลิกคีย์พารามิเตอร์เหล่านั้นเพื่อดูสรุปค่าที่ Google Analytics ได้รับ

คุณอาจต้องการเพิ่มข้อมูลอื่นๆ ลงในข้อมูลการแก้ไขข้อบกพร่อง เช่น ชื่อเทมเพลตหน้าเว็บหรือเหตุการณ์อื่นๆ ในหน้าเว็บที่เกี่ยวข้องกับ INP ที่กล่าวถึงก่อนหน้านี้ใน Codelab เพียงแก้ไขคำสั่ง return ในฟังก์ชัน getDebugInfo()

เมื่อคุณพอใจกับข้อมูลที่มาจากหน้าทดสอบของคุณแล้ว ให้ปรับใช้โค้ด GA ใหม่ในการใช้งานจริงบนเว็บไซต์และไปยังขั้นตอนต่อไป

7. ค้นหาข้อมูลใน BigQuery

เมื่อโค้ด Google Analytics ทำงานเป็นเวลา 2-3 วันแล้ว คุณจะเริ่มค้นหาข้อมูลใน BigQuery ได้ ก่อนอื่นให้ตรวจสอบว่าข้อมูลกำลังโอนไปยัง BigQuery

เปิดคอนโซล Google Cloud แล้วเลือกโปรเจ็กต์จากเมนูแบบเลื่อนลงที่ด้านบนของหน้าจอ
คลิก BigQuery ในส่วนหัวของ Analytics จากเมนูการนำทาง ที่ด้านซ้ายบนของหน้าจอ
ในแผงExplorer ให้ขยายโปรเจ็กต์เพื่อดูชุดข้อมูล Google Analytics ชื่อของชุดข้อมูลคือ analytics_ ตามด้วยรหัสพร็อพเพอร์ตี้ Google Analytics 4 (เช่น analytics_229787100)
ขยายชุดข้อมูล แล้วคุณจะเห็นตาราง events_ ตัวเลขในวงเล็บคือจำนวนวันที่สามารถค้นหาได้

การค้นหาย่อยเพื่อเลือกเฉพาะเหตุการณ์ CWV

หากต้องการค้นหาชุดข้อมูลที่มีเฉพาะเหตุการณ์ CWV ให้เริ่มต้นด้วยการค้นหาย่อยที่เลือกเหตุการณ์ LCP, CLS และ INP ในช่วง 28 วันที่ผ่านมา วิธีนี้จะหาค่าที่รายงานล่าสุดสำหรับรหัสเหตุการณ์ web-vitals แต่ละรายการโดยใช้คีย์ metric_id เพื่อให้แน่ใจว่าคุณไม่ได้นับเหตุการณ์ CWV เดียวกันมากกว่า 1 ครั้ง

# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
 SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
 (
   SELECT *
   , IF (ROW_NUMBER() OVER (
     PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
     ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
   ) = 1, true, false) AS is_last_received_value
   # Make sure to update your project ID and GA4 property ID here!
   FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
   WHERE event_name in ('CLS', 'INP', 'LCP') AND
     _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
  )
  WHERE is_last_received_value
)

ซึ่งเป็นพื้นฐานของคำค้นหาทั้งหมดในชุดข้อมูลนี้ การค้นหาหลักของคุณจะทำงานเทียบกับตารางชั่วคราว web_vitals_events

วิธีจัดโครงสร้างเหตุการณ์ GA4

ข้อมูลเหตุการณ์ Google Analytics 4 แต่ละรายการจะอยู่ในคอลัมน์ STRUCT คอลัมน์ event_params พารามิเตอร์เหตุการณ์แต่ละรายการที่คุณส่งไปยัง GA4 ในเว็บไซต์จะแทนด้วยคีย์ของพารามิเตอร์ และค่าคือ STRUCT ที่มีคีย์สําหรับข้อมูลแต่ละประเภทที่เป็นไปได้ ในตัวอย่างข้างต้น คีย์ metric_value อาจมี int_value หรือ double_value ดังนั้นจึงมีการใช้ฟังก์ชัน COALESCE() หากต้องการดูdebug_targetที่คุณสอบผ่านก่อนหน้านี้ ให้เลือกคีย์ string_value ในdebug_target

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

ค้นหาหน้าเว็บและองค์ประกอบที่มีประสิทธิภาพต่ำสุด

debug_target เป็นสตริงตัวเลือก CSS ที่สอดคล้องกับองค์ประกอบในหน้าเว็บที่เกี่ยวข้องกับค่าเมตริกมากที่สุด

เมื่อใช้ CLS ตัวเลข debug_target จะแสดงองค์ประกอบที่ใหญ่ที่สุดจากการเปลี่ยนเลย์เอาต์ที่ใหญ่ที่สุดที่ส่งผลต่อค่า CLS หากไม่มีการเลื่อนองค์ประกอบ ค่า debug_target จะเป็น null

หน้ารายการคำค้นหาต่อไปนี้จากแย่ที่สุดไปดีที่สุดตาม CLS ที่เปอร์เซ็นไทล์ที่ 75 จัดกลุ่มตาม debug_target

# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
  COUNT(1) as page_views
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
    *
  FROM web_vitals_events
  WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a 
# minimum number of pageviews to reduce noise in your reports. 
# HAVING page_views > 50
ORDER BY metric_p75 DESC

หากคุณทราบว่าองค์ประกอบใดในหน้าเว็บกำลังขยับขึ้น ก็น่าจะช่วยให้ระบุและแก้ไขต้นตอของปัญหาได้ง่ายขึ้นมาก

โปรดทราบว่าองค์ประกอบที่รายงานที่นี่อาจไม่ใช่องค์ประกอบเดียวกับที่คุณเห็นว่ามีการเปลี่ยนแปลงเมื่อแก้ไขข้อบกพร่องในหน้าเว็บในเครื่อง ด้วยเหตุนี้คุณจึงต้องรวบรวมข้อมูลนี้ตั้งแต่แรก การแก้ไขสิ่งที่คุณไม่ทราบว่าเป็นปัญหานั้นเป็นเรื่องที่ยากมาก

แก้ไขข้อบกพร่องของเมตริกอื่นๆ

การค้นหาด้านบนแสดงผลลัพธ์สําหรับเมตริก CLS แต่คุณจะใช้เทคนิคเดียวกันเพื่อรายงานเป้าหมายการแก้ไขข้อบกพร่องสําหรับ LCP และ INP ได้ เพียงแทนที่อนุประโยค WHERE ด้วยเมตริกที่เกี่ยวข้องเพื่อแก้ไขข้อบกพร่อง ดังนี้

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. แสดงภาพผลการค้นหาใน Data Studio

BigQuery ช่วยให้คุณแสดงผลการค้นหาผ่าน Data Studio ได้อย่างรวดเร็ว Data Studio เป็นเครื่องมือแสดงข้อมูลเป็นภาพและแดชบอร์ดที่ใช้งานฟรี หากต้องการแสดงภาพผลการค้นหาหลังจากเรียกใช้การค้นหาใน BigQuery UI ให้คลิกสํารวจข้อมูล แล้วเลือกสํารวจด้วย Data Studio

สำรวจด้วยตัวเลือก Data Studio ใน BigQuery

การดำเนินการนี้จะสร้างลิงก์โดยตรงจาก BigQuery ไปยัง Data Studio ในมุมมองสำรวจ ในมุมมองนี้ คุณสามารถเลือกฟิลด์ที่ต้องการแสดงภาพ เลือกประเภทแผนภูมิ ตั้งค่าตัวกรอง และสร้างแผนภูมิเฉพาะกิจสำหรับการวิเคราะห์ภาพอย่างรวดเร็ว คุณสร้างแผนภูมิเส้นนี้เพื่อดูแนวโน้มของค่า LCP เมื่อเวลาผ่านไปได้จากผลการค้นหาข้างต้น

แผนภูมิเส้นของค่า LCP รายวันใน Data Studio

การลิงก์โดยตรงระหว่าง BigQuery และ Data Studio นี้จะช่วยให้คุณสร้างแผนภูมิด่วนจากการค้นหาใดก็ได้และทำการวิเคราะห์ด้วยภาพ แต่หากต้องการทําการวิเคราะห์เพิ่มเติม คุณอาจต้องดูแผนภูมิต่างๆ ในแดชบอร์ดแบบอินเทอร์แอกทีฟเพื่อดูมุมมองแบบองค์รวมมากขึ้น หรือเจาะลึกข้อมูลก็ได้ การมีแดชบอร์ดที่มีประโยชน์ทำให้คุณไม่ต้องเขียนคำค้นหาและสร้างแผนภูมิด้วยตนเองทุกครั้งที่คุณต้องการวิเคราะห์เมตริก

คุณสร้างหน้าแดชบอร์ดใน Data Studio ได้โดยใช้เครื่องมือเชื่อมต่อ BigQuery แบบเนทีฟ โดยไปที่ datastudio.google.com สร้างแหล่งข้อมูลใหม่ เลือกเครื่องมือเชื่อมต่อ BigQuery แล้วเลือกชุดข้อมูลที่ต้องการใช้งาน

การใช้เครื่องมือเชื่อมต่อเริ่มต้นของ BigQuery ใน Data Studio

9. ทำให้ข้อมูล Web Vitals เป็นรูปธรรม

เมื่อสร้างแดชบอร์ดของข้อมูลเหตุการณ์ Web Vitals ตามที่อธิบายไว้ข้างต้น การใช้ชุดข้อมูลการส่งออกของ Google Analytics 4 โดยตรงจะไม่มีประสิทธิภาพ เนื่องจากโครงสร้างของข้อมูล GA4 และการประมวลผลล่วงหน้าที่จำเป็นสำหรับเมตริก Web Vitals ทำให้ส่วนต่างๆ ของคำค้นหาทำงานหลายครั้ง ซึ่งทำให้เกิดปัญหา 2 ข้อ ได้แก่ ประสิทธิภาพของหน้าแดชบอร์ดและค่าใช้จ่ายของ BigQuery

คุณสามารถใช้โหมดแซนด์บ็อกซ์ของ BigQuery ได้ฟรี ระดับการใช้งานฟรีของ BigQuery ทำให้ข้อมูลการค้นหาที่ประมวลผล 1 TB แรกต่อเดือนใช้งานได้ฟรี สำหรับวิธีการวิเคราะห์ที่กล่าวถึงในโพสต์นี้ นอกจากคุณจะใช้ชุดข้อมูลขนาดใหญ่มากหรือสืบค้นข้อมูลชุดข้อมูลจำนวนมากอยู่เป็นประจำ คุณควรสามารถใช้ขีดจำกัดการใช้งานฟรีนี้ทุกเดือน แต่หากคุณมีเว็บไซต์ที่มีการเข้าชมสูงและต้องการตรวจสอบเมตริกต่างๆ เป็นประจำโดยใช้หน้าแดชบอร์ดแบบอินเทอร์แอกทีฟที่รวดเร็ว เราขอแนะนำให้ประมวลผลล่วงหน้าและทำข้อมูล Vitals ของ 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 จากชุดข้อมูล GA4 เดิมเท่านั้น
ข้อมูลรหัสเซสชัน ประเภทผู้ใช้ (ใหม่เทียบกับผู้ใช้ที่กลับมา) และข้อมูลการมีส่วนร่วมในเซสชันจะมีให้ใช้โดยตรงในคอลัมน์
ตารางจะแบ่งพาร์ติชันตามวันที่และคลัสเตอร์ตามชื่อเมตริก ซึ่งโดยปกติแล้วจะช่วยลดจำนวนข้อมูลที่ประมวลผลสำหรับการค้นหาแต่ละครั้ง
เนื่องจากคุณไม่จำเป็นต้องใช้ไวลด์การ์ดในการค้นหาตารางนี้ ผลการค้นหาจึงได้รับการแคชไว้เป็นเวลาถึง 24 ชั่วโมง ซึ่งจะช่วยลดต้นทุนจากการที่ต้องทำการค้นหาซ้ำ
หากใช้ BigQuery BI Engine คุณจะเรียกใช้ฟังก์ชันและโอเปอเรเตอร์ SQL ที่เพิ่มประสิทธิภาพในตารางนี้ได้

คุณค้นหาตารางที่เป็นรูปธรรมนี้ได้โดยตรงจากภายใน BigQuery UI หรือใช้ใน Data Studio โดยใช้เครื่องมือเชื่อมต่อ BigQuery

ใช้งาน Materialize ที่สม่ำเสมอ

หากคุณเรียกใช้การค้นหาด้านบนโดยไม่มีช่วงวันที่ การค้นหาจะทำงานกับชุดข้อมูล Google Analytics ทั้งหมดของคุณ คุณไม่ควรดำเนินการนี้ทุกวัน เนื่องจากต้องประมวลผลข้อมูลประวัติปริมาณมากอีกครั้ง คุณอัปเดตการค้นหาให้ต่อท้ายเฉพาะข้อมูลของวันสุดท้ายเท่านั้น โดยนำคำสั่ง CREATE or REPLACE TABLE ออกเมื่อเริ่มต้นคำค้นหา และเพิ่มเกณฑ์อื่นลงในข้อความ WHERE ในคำค้นหาย่อยในตาราง events_intraday_

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
  # The _TABLE_SUFFIX replaces the asterisk (*) in the table name
  # 
  AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)

การค้นหานี้จะแสดงเฉพาะข้อมูลจากเมื่อวาน จากนั้นก็ใช้คอนโซล BigQuery เพื่อตั้งเวลาให้การค้นหาทำงานแบบรายวันได้

10. แสดงข้อมูลใน Google Data Studio ผ่านภาพ

Google Data Studio รองรับการอ่านข้อมูลจาก Google BigQuery มาตั้งแต่ต้น เมื่อมีข้อมูล web-vitals จาก Google Analytics 4 ที่ป้อนข้อมูลใน BigQuery แล้ว คุณก็สามารถใช้เครื่องมือเชื่อมต่อ BigQuery ของ Data Studio เพื่ออ่านตารางที่เป็นรูปธรรมได้โดยตรง

ใช้เครื่องมือเชื่อมต่อ Web Vitals

เนื่องจากการสร้างหน้าแดชบอร์ดใหม่ตั้งแต่ต้นนั้นใช้เวลานาน เราจึงพัฒนาโซลูชันแบบแพ็กเกจที่สร้างแดชบอร์ดเทมเพลตขึ้นมาสำหรับคุณ ก่อนอื่นให้ตรวจสอบว่าคุณได้ทำตาราง Web Vitals เป็นรูปธรรมโดยใช้คำค้นหาข้างต้นแล้ว จากนั้นเข้าถึงเครื่องมือเชื่อมต่อ Web Vitals สำหรับ Data Studio โดยใช้ลิงก์ goo.gle/web-vitals-connector

หลังจากระบุการให้สิทธิ์แบบครั้งเดียวแล้ว คุณจะเห็นหน้าจอการกำหนดค่าต่อไปนี้

หน้าจอการให้สิทธิ์เครื่องมือเชื่อมต่อ Web Vitals

ระบุรหัสตาราง BigQuery ที่เป็นรูปธรรม (ตารางเป้าหมาย) และรหัสโปรเจ็กต์การเรียกเก็บเงิน BigQuery หลังจากคลิกเชื่อมต่อ Data Studio จะสร้างแดชบอร์ดที่มีเทมเพลตใหม่และเชื่อมโยงข้อมูลของคุณเข้ากับหน้าแดชบอร์ด คุณสามารถแก้ไข ปรับเปลี่ยน และแชร์หน้าแดชบอร์ดได้ตามต้องการ หากสร้างหน้าแดชบอร์ดเพียงครั้งเดียว คุณไม่จำเป็นต้องไปที่ลิงก์เครื่องมือเชื่อมต่ออีกครั้ง เว้นแต่คุณต้องการสร้างหน้าแดชบอร์ดหลายหน้าจากชุดข้อมูลที่แตกต่างกัน

ไปยังส่วนต่างๆ ในหน้าแดชบอร์ด

เมื่อไปยังส่วนต่างๆ ของแดชบอร์ด คุณจะดูแนวโน้มรายวันของเมตริก Web Vitals และข้อมูลการใช้งานบางอย่างสำหรับเว็บไซต์ เช่น ผู้ใช้และเซสชันได้ในแท็บสรุป

ในแท็บการวิเคราะห์ผู้ใช้ คุณสามารถเลือกเมตริกและดูรายละเอียดของเปอร์เซ็นไทล์ของเมตริกและจำนวนผู้ใช้ตามเมตริกการใช้งานและธุรกิจที่แตกต่างกันได้

แท็บการวิเคราะห์เส้นทางหน้าเว็บช่วยให้คุณระบุส่วนที่เป็นปัญหาในเว็บไซต์ของคุณ ในส่วนนี้ คุณสามารถเลือกตัวชี้วัดเพื่อดูภาพรวม แต่คุณจะเห็นแผนที่กระจายของเส้นทางหน้าเว็บทั้งหมดที่มีค่าเปอร์เซ็นไทล์บนแกน y และจำนวนเรคคอร์ดบนแกน x แผนที่กระจายสามารถช่วยระบุหน้าที่มีค่าเมตริกต่ำกว่าที่คาดไว้ เมื่อเลือกหน้าเว็บแล้ว คุณสามารถเจาะลึกพื้นที่ที่เป็นปัญหาเพิ่มเติมได้ด้วยแผนภูมิกระจายของตารางเส้นทางหน้าเว็บ หรือจะดูตารางเป้าหมายการแก้ไขข้อบกพร่องก็ได้

แท็บการวิเคราะห์รายได้เป็นตัวอย่างของวิธีที่คุณสามารถตรวจสอบธุรกิจและเมตริกประสิทธิภาพในที่เดียว ส่วนนี้จะแสดงเซสชันทั้งหมดที่ผู้ใช้ทำการซื้อ คุณสามารถเปรียบเทียบรายได้ที่ได้รับกับประสบการณ์ของผู้ใช้ระหว่างเซสชันที่เฉพาะเจาะจงได้

11. แหล่งข้อมูลอื่นๆ

เยี่ยมมากที่ทำ Codelab นี้เสร็จ ตอนนี้คุณควรติดตามประสิทธิภาพของ Core Web Vitals ทั่วทั้งเว็บไซต์ด้วยรายละเอียดในระดับสูงได้แล้ว นอกจากนี้ คุณควรระบุประเภทหน้าเว็บและองค์ประกอบที่เฉพาะเจาะจงในเว็บไซต์ที่ทําให้เกิด CWV สูงเพื่อให้มุ่งเน้นที่การเพิ่มประสิทธิภาพได้

อ่านเพิ่มเติม

web.dev มีบทความและกรณีศึกษามากมายพร้อมกลยุทธ์ในการปรับปรุง Core Web Vitals เริ่มต้นด้วยบทความเกี่ยวกับการเพิ่มประสิทธิภาพสำหรับแต่ละเมตริก ดังนี้

เอกสารอ้างอิง

Codelab นี้จะดึงมาจากบทความ 2 เรื่องของ web.dev ดังนี้
บทความเกี่ยวกับการวัด Web Vitals ภาคสนาม
บทความเกี่ยวกับการใช้ข้อมูล GA4 ของ Web Vitals ใน BigQuery ซึ่งมีตัวอย่างการค้นหาอีกมากมายที่คุณใช้ได้
หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับ GA4 > การผสานรวม BigQuery Export โปรดไปที่ศูนย์ช่วยเหลือของ Google Analytics

วัดประสิทธิภาพด้วย web-vitals.js, Google Analytics และ BigQuery

1. ก่อนเริ่มต้น

สิ่งที่คุณจะต้องทำ

สิ่งที่คุณต้องมี

ก่อนจะเริ่มต้น

2. เพิ่มไลบรารีวิตามินเว็บและ gtag ลงในหน้าเว็บ

basic.html

basic.html

basic.html

3. วัด Core Web Vitals ของหน้าเว็บ

4. สำรวจข้อมูล Wi-Fi บนเว็บอย่างละเอียด

CLS entries

LCP entries

INP entries

5. จัดเตรียมและส่งข้อมูลกิจกรรมบนเว็บไปยัง Google Analytics 4

จัดโครงสร้างข้อมูลการแก้ไขข้อบกพร่องสำหรับ CWV แต่ละรายการ

diagnostics.html

ส่งข้อมูลไปยัง Google Analytics

diagnostics.html

diagnostics.html

6. ตรวจสอบว่ามีการเติมข้อมูล Wi-Fi บนเว็บใน Google Analytics หรือไม่

7. ค้นหาข้อมูลใน BigQuery

การค้นหาย่อยเพื่อเลือกเฉพาะเหตุการณ์ CWV

วิธีจัดโครงสร้างเหตุการณ์ GA4

ค้นหาหน้าเว็บและองค์ประกอบที่มีประสิทธิภาพต่ำสุด

แก้ไขข้อบกพร่องของเมตริกอื่นๆ

8. แสดงภาพผลการค้นหาใน Data Studio

9. ทำให้ข้อมูล Web Vitals เป็นรูปธรรม

ใช้งาน Materialize ที่สม่ำเสมอ

10. แสดงข้อมูลใน Google Data Studio ผ่านภาพ

ใช้เครื่องมือเชื่อมต่อ Web Vitals

ไปยังส่วนต่างๆ ในหน้าแดชบอร์ด

11. แหล่งข้อมูลอื่นๆ

อ่านเพิ่มเติม

เอกสารอ้างอิง

CLS `entries`

LCP `entries`

INP `entries`