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

วัดและแก้ไขข้อบกพร่องของประสิทธิภาพด้วย Google Analytics 4 และ BigQuery

ดูวิธีส่งข้อมูล Web Vitals ไปยังพร็อพเพอร์ตี้ Google Analytics 4 และส่งออกข้อมูลสำหรับการวิเคราะห์ใน BigQuery และ Looker Studio

Minhaz Kazi

Philip Walton

Google มีเครื่องมือมากมาย เช่น Search Console, PageSpeed Insights (PSI) และรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์สามารถดูว่าเว็บไซต์ของตนมีประสิทธิภาพอย่างไรเมื่อเทียบกับเมตริก Core Web Vitals สำหรับผู้ใช้จริงในวงการ

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

อย่างไรก็ตาม มีเหตุผลสําคัญ 2-3 ข้อที่คุณไม่ควรใช้เครื่องมือเหล่านี้เพียงอย่างเดียวในการวัดประสิทธิภาพของเว็บไซต์

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

ด้วยเหตุนี้ เราจึงขอแนะนําให้เจ้าของเว็บไซต์ทุกรายตรวจสอบเมตริก Core Web Vitals โดยใช้เครื่องมือวิเคราะห์ที่มีอยู่ โพสต์นี้จะอธิบายวิธีใช้เครื่องมือฟรีที่ Google มีให้เพื่อดำเนินการดังกล่าว

เมื่อคุณตั้งค่าทุกอย่างเรียบร้อยแล้ว คุณจะสร้างหน้าแดชบอร์ดได้ในลักษณะนี้

ภาพหน้าจอรายงานของ Web Vitals Connector

ภาพหน้าจอรายงานเครื่องมือเชื่อมต่อ Web Vitals

หากต้องการดูภาพรวมของขั้นตอนทั้งหมดที่ระบุไว้ที่นี่ โปรดดูการบรรยายจาก Google I/O ปี 2021

วัดระยะทาง

การวัดประสิทธิภาพสามารถทำได้เสมอด้วย Google Analytics โดยใช้เมตริกที่กำหนดเอง แต่ Google Analytics 4 (GA4) มีฟีเจอร์ใหม่ 2-3 อย่างที่นักพัฒนาซอฟต์แวร์ควรให้ความสนใจเป็นพิเศษ

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

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

หากต้องการเริ่มต้นวัด Core Web Vitals โดยใช้ Google Analytics 4 และ BigQuery คุณต้องทำ 3 อย่างต่อไปนี้

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

วิเคราะห์

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

SELECT * FROM `my_project_id.analytics_XXXXX.events_*`
WHERE event_name IN ('LCP', 'INP', 'CLS')

ตัวอย่างผลการค้นหาจากข้อความค้นหาดังกล่าวมีดังนี้

ข้อมูลเหตุการณ์ Web Vitals ใน BigQuery

ค้นหาข้อมูล Web Vitals

ก่อนที่จะเริ่มค้นหาข้อมูลเหตุการณ์ Web Vitals คุณควรทำความเข้าใจวิธีรวบรวมข้อมูล

สิ่งสำคัญที่สุดที่ต้องทำความเข้าใจคือ ในบางกรณี อาจได้รับเหตุการณ์หลายเหตุการณ์สำหรับเมตริกเดียวกันในหน้าเดียวกัน ซึ่งอาจเกิดขึ้นได้หากค่าเมตริกเปลี่ยนแปลงและมีการรายงานค่าที่อัปเดต (ซึ่งเกิดขึ้นได้ทั่วไปกับ CLS)

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

# 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
    FROM `bigquery_project_id.analytics_XXXXX.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 ที่คุณอาจต้องการใช้

LCP, INP และ CLS ที่เปอร์เซ็นไทล์ที่ 75% (P75) ทั่วทั้งเว็บไซต์

# 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
    FROM `bigquery_project_id.analytics_XXXXX.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
)
# Main query logic
SELECT
  metric_name,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS p75,
  COUNT(1) as count
FROM (
  SELECT
    metric_name,
    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
)
GROUP BY 1

ค่า LCP แต่ละรายการทั้งหมดจากสูงสุดไปต่ำสุด

# 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
    FROM `bigquery_project_id.analytics_XXXXX.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
)
# Main query logic
SELECT
  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 = 'LCP'
ORDER BY metric_value DESC

คะแนน LCP (p75) ของหน้าเว็บ 10 หน้ายอดนิยม

# 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
    FROM `bigquery_project_id.analytics_XXXXX.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
)
# Main query logic
SELECT
  page_path,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS LCP,
  COUNT(1) as count
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    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 = 'LCP'
)
GROUP BY 1
ORDER BY count DESC
LIMIT 10

หน้าเว็บ 10 อันดับแรกที่มี CLS แย่ที่สุด (P75)

# 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
    FROM `bigquery_project_id.analytics_XXXXX.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
)
# Main query logic
SELECT
  page_path,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS CLS,
  COUNT(1) as count
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    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
HAVING count > 50 # Limit to relatively popular pages
ORDER BY CLS DESC
LIMIT 10

แก้ไขข้อบกพร่อง

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

การทราบระดับคะแนนของคุณจะไม่มีประโยชน์หากคุณไม่สามารถดำเนินการและแก้ไขปัญหาได้

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

ตัวอย่างคำค้นหา

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

องค์ประกอบหลักที่ทำให้เกิด CLS

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

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

คําค้นหาต่อไปนี้จะแสดงหน้าเว็บจากแย่ที่สุดไปจนถึงดีที่สุดตาม CLS ที่เปอร์เซ็นต์ไทล์ 75 โดยจัดกลุ่มตาม debug_target

# 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
    FROM `bigquery_project_id.analytics_XXXXX.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
)
# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS CLS,
  COUNT(1) as count
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
HAVING count > 50 # Limit to relatively popular pages
ORDER BY CLS DESC

ผลการค้นหาองค์ประกอบหลักที่ส่งผลต่อ CLS

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

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

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

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

WHERE metric_name = 'INP'
WHERE metric_name = 'LCP'

โปรดดูวิธีการรวบรวมและส่งข้อมูลการแก้ไขข้อบกพร่องสำหรับเมตริก Core Web Vitals แต่ละรายการในหัวข้อแก้ไขข้อบกพร่องเกี่ยวกับประสิทธิภาพในช่อง

แสดงด้วยภาพ

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

# 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
    FROM `bigquery_project_id.analytics_XXXXX.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
)
# Main query logic
SELECT
  event_date,
  metric_name,
  APPROX_QUANTILES(ROUND(metric_value, 2), 100)[OFFSET(75)] AS p75
FROM
  (
    SELECT
      event_date,
      metric_name,
      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 = 'LCP'
  )
GROUP BY
  1, 2
ORDER BY event_date

จากผลการค้นหาเหล่านี้ การพิจารณาแนวโน้มหรือค่าเบี่ยงเบนมาตรฐานเพียงดูที่ข้อมูลอย่างเดียวนั้นทําได้ยาก

ผลการค้นหาค่าเมตริกรายวัน

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

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

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

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

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

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

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

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

การใช้เครื่องมือเชื่อมต่อ BigQuery แบบเนทีฟใน Looker Studio

แสดงข้อมูล Web Vitals

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

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

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

# Materialize Web Vitals metrics from GA4 event export data

# Replace target table name
CREATE OR REPLACE TABLE bigquery_project_id.ga4_demo_dev.web_vitals_summary
  PARTITION BY DATE(event_timestamp)
  CLUSTER BY metric_name
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
              `bigquery_project_id.analytics_XXXXX.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 ที่เพิ่มประสิทธิภาพในตารางนี้ได้

คุณสามารถค้นหาตารางที่แสดงผลนี้จาก UI ของ BigQuery ได้โดยตรง หรือจะใช้ใน Looker Studio โดยใช้เครื่องมือเชื่อมต่อ BigQuery ก็ได้

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

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

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

หน้าจอการให้สิทธิ์ของ Web Vitals Connector

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

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

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

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

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

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

การใช้งานขั้นสูง

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

ตั้งค่าการค้นหาที่กำหนดเวลาไว้ใน BigQuery เพื่อรับข้อมูลที่อัปเดต การค้นหาที่แสดงผลเป็นชิ้นงานที่เราเรียกใช้ก่อนหน้านี้จะจับภาพข้อมูลของคุณ ณ ขณะนั้นเท่านั้น หากต้องการอัปเดตแดชบอร์ดด้วยข้อมูลใหม่อยู่เสมอ คุณสามารถเรียกใช้การค้นหาที่กำหนดเวลาไว้ซึ่งจะทํางานทุกวันและเพิ่มข้อมูลใหม่ต่อท้ายตารางที่แสดงผล
รวมข้อมูลจากบุคคลที่หนึ่ง (เช่น CRM) เพื่อดูข้อมูลเชิงลึกทางธุรกิจ ในตารางที่แสดงผล คุณสามารถเพิ่ม user_id เป็นคอลัมน์แยกต่างหากได้ ซึ่งจะช่วยให้คุณผนวกข้อมูลจากบุคคลที่หนึ่งได้ หากข้อมูลจากบุคคลที่หนึ่งยังไม่ได้อยู่ใน BigQuery คุณจะโหลดข้อมูลหรือใช้แหล่งข้อมูลแบบรวมศูนย์ก็ได้
รายงานเวอร์ชันเว็บไซต์หรือแอปเป็นพารามิเตอร์ในข้อมูลที่คุณส่งให้ Google Analytics และเพิ่มเป็นคอลัมน์ในตารางที่เป็นรูปธรรม จากนั้นคุณสามารถเพิ่มข้อมูลเวอร์ชันนั้นๆ เป็นมิติข้อมูลในแผนภูมิเพื่อให้เห็นผลกระทบของการเปลี่ยนแปลงเวอร์ชันต่อประสิทธิภาพได้ง่ายขึ้น
หากคาดว่าจะมีการใช้งานชุดข้อมูลอย่างหนักผ่านการค้นหาโดยตรงหรือแดชบอร์ด ให้ลองใช้ BigQuery BI Engine เวอร์ชันที่มีค่าใช้จ่าย

สรุป

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

สรุปสําคัญจากโพสต์นี้

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