หน้านี้ได้รับการแปลโดย 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 Devtals สําหรับผู้ใช้จริงในการใช้งานจริง

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

อย่างไรก็ตาม มีเหตุผลสําคัญ 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) ที่นักพัฒนาซอฟต์แวร์ควรให้ความสนใจ

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