หน้านี้ได้รับการแปลโดย 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

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

วัดระยะทาง

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

พารามิเตอร์เหตุการณ์ที่กำหนดเอง การกำหนดค่าแบบ Zero-config
BigQuery Export ฟรี เพื่อให้คุณค้นหาข้อมูลโดยใช้ SQL

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

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

สร้างพร็อพเพอร์ตี้ Google Analytics 4 และโปรเจ็กต์ BigQuery
เปิดใช้ BigQuery Export ในการกำหนดค่าพร็อพเพอร์ตี้ 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', 'FID', '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', 'FID', '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, FID และ 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', 'FID', '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', 'FID', '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', 'FID', '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', 'FID', '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', 'FID', '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 และ FID ได้ เพียงแทนที่อนุประโยค where ด้วยเมตริกที่เกี่ยวข้องเพื่อแก้ไขข้อบกพร่อง

WHERE metric_name = 'CLS'
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', 'FID', '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', 'FID', '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 เดิม
รหัสเซสชัน ประเภทผู้ใช้ (ผู้ใช้ใหม่เทียบกับผู้ใช้ที่กลับมา) และข้อมูลการมีส่วนร่วมในเซสชันจะอยู่ในคอลัมน์โดยตรง
ตารางนี้จะpartitionedตามวันที่และจัดกลุ่มตามชื่อเมตริก ซึ่งจะช่วยลดปริมาณข้อมูลที่ประมวลผลสำหรับการค้นหาแต่ละครั้ง
เนื่องจากคุณไม่จำเป็นต้องใช้ไวลด์การ์ดในการค้นหาตารางนี้ ระบบจึงอาจแคชผลการค้นหาไว้สูงสุด 24 ชั่วโมง วิธีนี้จะช่วยลดค่าใช้จ่ายจากการใช้คำค้นหาเดิมซ้ำ
หากใช้เครื่องมือ BigQuery BI คุณจะเรียกใช้ฟังก์ชันและโอเปอเรเตอร์ SQL ที่เพิ่มประสิทธิภาพในตารางนี้ได้

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

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

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

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

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

ระบุรหัสตาราง 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 ที่ช่วยให้คุณสร้างรายงานในแบบที่ต้องการได้อย่างอิสระ