ดูวิธีส่งข้อมูล Web Vitals ไปยังพร็อพเพอร์ตี้ Google Analytics 4 และส่งออกข้อมูลสําหรับการวิเคราะห์ใน BigQuery และ Looker Studio
Google มีเครื่องมือมากมาย เช่น Search Console, PageSpeed Insights (PSI) และรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์สามารถดูประสิทธิภาพของเว็บไซต์เทียบกับเมตริก Core Web Vitals สำหรับผู้ใช้จริงภาคสนาม
เครื่องมือเหล่านี้ดีเยี่ยมเพราะช่วยให้คุณเห็นมุมมองระดับสูงเกี่ยวกับประสิทธิภาพจริงของผู้ใช้ของเว็บไซต์ และไม่จำเป็นต้องมีการตั้งค่าใดๆ ในการเริ่มใช้งาน
อย่างไรก็ตาม มีเหตุผลสำคัญอยู่ 2-3 ประการที่ทำไมคุณจึงไม่ต้องการใช้เครื่องมือเหล่านี้เพียงอย่างเดียวในการวัดประสิทธิภาพของเว็บไซต์
- เครื่องมือที่ใช้ CrUX จะรายงานข้อมูลตามรายเดือนหรือ 28 วันก่อนหน้านี้ ซึ่งหมายความว่าหลังจากทำการเปลี่ยนแปลงใดๆ คุณจะต้องรอนานจึงจะเห็นผลลัพธ์
- เครื่องมือแบบ CrUX สามารถแบ่งกลุ่มได้ตามมิติข้อมูลที่จำกัดเท่านั้น เช่น ประเทศ ประเภทการเชื่อมต่อ และหมวดหมู่อุปกรณ์ (เดสก์ท็อปหรืออุปกรณ์เคลื่อนที่) คุณไม่สามารถแบ่งข้อมูลตามมิติข้อมูลที่เฉพาะเจาะจงสำหรับธุรกิจ (เช่น ผู้ใช้ที่มีส่วนร่วม ผู้ใช้ในกลุ่มทดสอบที่เฉพาะเจาะจง ฯลฯ)
- เครื่องมือแบบ CrUX จะบอกได้ว่าประสิทธิภาพของคุณเป็นอย่างไร แต่ก็บอกไม่ได้ว่าเพราะอะไร เครื่องมือวิเคราะห์ช่วยให้คุณส่งข้อมูลเพิ่มเติมเพื่อช่วยติดตามและแก้ไขข้อบกพร่องได้
ด้วยเหตุนี้ เราจึงขอแนะนําให้เจ้าของเว็บไซต์ทุกรายตรวจสอบเมตริก Core Web Vitals โดยใช้เครื่องมือวิเคราะห์ที่มีอยู่ โพสต์นี้อธิบายวิธีใช้เครื่องมือฟรี ที่ Google เสนอเพื่อทำเช่นนั้น
เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้ว คุณจะสร้างหน้าแดชบอร์ดได้ดังนี้
และหากต้องการดูภาพรวมของขั้นตอนทั้งหมดที่ระบุไว้ในบทความนี้ ให้ดูการพูดคุยของเราจาก 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
ก่อนที่จะเริ่มค้นหาข้อมูลเหตุการณ์ 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 แต่คุณก็สามารถใช้เทคนิคเดียวกันนี้ในการรายงานเป้าหมายการแก้ไขข้อบกพร่องสำหรับ 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
การดำเนินการนี้จะสร้างลิงก์โดยตรงจาก BigQuery ไปยัง Looker Studio ในมุมมองสำรวจ ในมุมมองนี้ คุณสามารถเลือกช่องที่ต้องการแสดงภาพ เลือกประเภทแผนภูมิ ตั้งค่าตัวกรอง และสร้างแผนภูมิเฉพาะกิจสำหรับการวิเคราะห์ด้วยภาพอย่างรวดเร็ว จากผลการค้นหาด้านบนนี้ คุณสร้างแผนภูมิเส้นเพื่อดูแนวโน้มของค่า LCP ในช่วงเวลาต่างๆ ได้ดังนี้
การลิงก์โดยตรงระหว่าง BigQuery กับ Looker Studio นี้ช่วยให้คุณสร้างแผนภูมิด่วนจากคำค้นหาและทำการวิเคราะห์ภาพได้ อย่างไรก็ตาม หากต้องการวิเคราะห์เพิ่มเติม คุณอาจต้องดูแผนภูมิหลายรายการในหน้าแดชบอร์ดแบบอินเทอร์แอกทีฟ เพื่อดูภาพรวมที่ครอบคลุมมากขึ้น หรือเจาะลึกข้อมูลได้ การมีหน้าแดชบอร์ดที่เป็นประโยชน์ทำให้คุณไม่ต้องเขียนข้อความค้นหาและสร้างแผนภูมิด้วยตนเองทุกครั้งที่ต้องการวิเคราะห์เมตริก
คุณสร้างหน้าแดชบอร์ดใน Looker Studio ได้โดยใช้เครื่องมือเชื่อมต่อ BigQuery แบบเดิม โดยไปที่ datastudio.google.com จากนั้นสร้างแหล่งข้อมูลใหม่ เลือกเครื่องมือเชื่อมต่อ BigQuery และเลือกชุดข้อมูลที่จะใช้
แสดงข้อมูล 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
หลังจากให้สิทธิ์แบบครั้งเดียวแล้ว คุณจะเห็นหน้าจอการกำหนดค่าต่อไปนี้
ระบุรหัสตาราง 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 ที่ช่วยให้คุณสร้างรายงานในแบบที่ต้องการได้อย่างอิสระ