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

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

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

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

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

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

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

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

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

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

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

วัดระยะทาง

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

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

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

  1. สร้างพร็อพเพอร์ตี้ Google Analytics 4 และโปรเจ็กต์ BigQuery
  2. เปิดใช้การส่งออก BigQuery ในการกำหนดค่าพร็อพเพอร์ตี้ Google Analytics เพื่อให้ระบบป้อนข้อมูลทั้งหมดที่คุณได้รับในตารางโปรเจ็กต์ BigQuery โดยอัตโนมัติ
  3. เพิ่มไลบรารี 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
# 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 เป็นเครื่องมือแสดงข้อมูลเป็นภาพและหน้าแดชบอร์ดที่ใช้งานได้ฟรี หากต้องการแสดงผลลัพธ์การค้นหาเป็นภาพ ให้คลิกปุ่มสํารวจข้อมูลหลังจากเรียกใช้การค้นหาใน UI ของ BigQuery แล้ว แล้วเลือกสํารวจด้วย 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 เพื่อให้การแสดงข้อมูลเป็นภาพเป็นเรื่องง่ายที่สุด

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

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