Đo lường dữ liệu của trường Chỉ số quan trọng chính của trang web thông qua các chỉ số quảng cáo

1. Trước khi bắt đầu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách đo lường Core Web Vitals bằng một mẫu thẻ Trình quản lý thẻ của Google (GTM) được tạo sẵn và gửi dữ liệu đến một tài sản Google Analytics 4 (GA4). Bạn cũng sẽ tìm hiểu cách lấy dữ liệu từ Google Ad Manager và Google AdSense sang GA4 để tương quan dữ liệu trường Core Web Vitals và các chỉ số hiệu suất quảng cáo với một trang tổng quan được tạo sẵn trong Looker Studio.

Bạn sẽ thực hiện

  • Nhập và thiết lập thẻ vào vùng chứa Trình quản lý thẻ của Google.
  • Đo lường Core Web Vitals của trang web trong GA4.
  • Thiết lập thẻ sự kiện GA4 trong Trình quản lý thẻ của Google.
  • Khám phá dữ liệu về các chỉ số quan trọng của trang web trong dataLayer và trong báo cáo GA4.
  • Liên kết tài sản GA4 với Google Ad Manager và Google AdSense.
  • Tương quan giữa Core Web Vitals và doanh thu từ quảng cáo thông qua trang tổng quan của Looker Studio.

Bạn cần có

  • Một tài khoản Google Analytics và một tài sản web GA4 có quyền chỉnh sửa.
  • Một tài khoản Trình quản lý thẻ của Google và vùng chứa trên web có quyền xuất bản.
  • Một mạng Google Ad Manager và/hoặc tài khoản Google AdSense có quyền quản trị.
  • Tài khoản Looker Studio.

2. Thêm mẫu thẻ từ GitHub vào GTM

Việc đo lường Core Web Vitals thông qua mẫu thẻ GTM dựa trên web-vitals thư viện. Trước tiên, chúng ta sẽ tải mẫu thẻ GTM xuống.

  1. Mở tệp template.tpl
  2. Tải tệp xuống máy tính

Bây giờ, hãy chuyển đến tài khoản Trình quản lý thẻ của Google.

  1. Mở vùng chứa trên web của bạn.
  2. Tạo một không gian làm việc mới và nhập tên (ví dụ: "Đo lường Core Web Vitals").
  3. Chuyển đến phần "Mẫu".
  4. Trong mục "Mẫu thẻ", hãy nhấp vào nút "Mới".

Thêm mẫu thẻ Trình quản lý thẻ của Google.

  1. Nhấp vào trình đơn Thao tác khác rồi chọn Nhập.

Nhập mẫu thẻ Trình quản lý thẻ của Google.

  1. Chọn tệp TPL đã tải xuống trước đó trên máy tính.
  2. Nhấp vào nút "Lưu".

Lưu mẫu thẻ Trình quản lý thẻ của Google.

Bạn đã thêm mẫu thẻ vào vùng chứa Trình quản lý thẻ của Google.

3. Thiết lập thẻ Web Vitals

  1. Trong không gian làm việc của Trình quản lý thẻ của Google, hãy chuyển đến mục "Thẻ".
  2. Thêm thẻ Web Vitals bằng cách nhấp vào "Mới", sau đó nhấp vào "Cấu hình thẻ" rồi chọn thẻ "Web Vitals" trong mục "Tuỳ chỉnh".
  3. Bước tiếp theo là định cấu hình các chế độ cài đặt. Tất cả các chế độ cài đặt đều được giải thích trong kho lưu trữ GitHub. Để lớp học lập trình này và trang tổng quan cuối cùng hoạt động, bạn chỉ cần thiết lập các chế độ cài đặt sau.

Cấu hình của thẻ.

  1. Áp dụng một trong các điều kiện kích hoạt lượt xem trang, ví dụ: điều kiện kích hoạt "Tất cả các trang".
  2. Ngoài ra, hãy thêm trường hợp ngoại lệ của bộ khởi động nếu cần.
  3. Đặt tên cho thẻ là "Core Web Vitals - Tất cả các trang" rồi lưu thẻ.

Điều kiện kích hoạt tuỳ chỉnh cho thẻ Web Vitals.

4. Khám phá dữ liệu Web Vitals trong dataLayer

Để xem thẻ hoạt động, hãy chuyển sang chế độ xem trước của Trình quản lý thẻ của Google. Tag Assistant sẽ mở ra và yêu cầu bạn cung cấp một URL để xem trước và gỡ lỗi chế độ thiết lập. Cung cấp URL cho một trang đã triển khai vùng chứa Trình quản lý thẻ của Google rồi nhấp vào "Kết nối". Một thẻ riêng có URL được cung cấp sẽ mở ra.

  1. Tương tác với trang bằng cách di chuyển và nhấp vào các phần tử hoặc khoảng trống.
  2. Sau đó, hãy chuyển về thẻ có Tag Assistant và chế độ xem trước của Trình quản lý thẻ của Google.
  3. Ở bên trái, bạn sẽ thấy các sự kiện khác nhau được chuyển vào dataLayer.
  4. Trước tiên, bạn nên kiểm tra xem thẻ Web Vitals có được kích hoạt trên điều kiện kích hoạt lượt xem trang mà bạn đã chọn hay không.

Kiểm tra xem thẻ Web Vitals có kích hoạt hay không.

  1. Bạn cũng sẽ thấy 3 sự kiện "web_vitals", trong đó mỗi sự kiện đại diện cho một Chỉ số quan trọng chính của trang web: LCP, INP và CLS.

3 sự kiện Web Vitals trong dataLayer.

  1. Nhấp vào mục đầu tiên rồi mở thẻ "API Call" (Lệnh gọi API) ở bên phải. Tại đây, bạn sẽ thấy dữ liệu được đẩy từ mẫu thẻ vào dataLayer.

Dữ liệu do thẻ đẩy vào dataLayer.

  1. Ngoài ra, hãy kiểm tra các mục khác của sự kiện "web_vitals". Hãy sử dụng web-vitals.js tài liệu làm tài liệu tham khảo cho các kiểu dữ liệu khác nhau.

5. Gửi dữ liệu Web Vitals đến GA4

Để lấy dữ liệu Core Web Vitals từ dataLayer và gửi dữ liệu đó đến GA4, bạn phải:

  • Tạo điều kiện kích hoạt cho thẻ GA4
  • Tạo các biến để kéo dữ liệu từ dataLayer
  • Tạo thẻ sự kiện GA4

Tạo điều kiện kích hoạt

  1. Trong không gian làm việc của Trình quản lý thẻ của Google, hãy chuyển đến "Điều kiện kích hoạt".
  2. Thêm điều kiện kích hoạt mới bằng cách nhấp vào "Mới", sau đó nhấp vào "Cấu hình điều kiện kích hoạt" rồi chọn "Sự kiện tuỳ chỉnh" trong mục "Khác".
  3. Đặt "web_vitals" trong trường Tên sự kiện, đặt tên cho điều kiện kích hoạt và lưu.

Cấu hình điều kiện kích hoạt cho thẻ GA4.

Tạo các biến dataLayer

  1. Trong không gian làm việc của Trình quản lý thẻ của Google, hãy chuyển đến mục "Biến".
  2. Tạo một biến mới do người dùng xác định thuộc loại "Biến lớp dữ liệu".
  3. Đặt "webVitalsData.name" trong trường tên biến Lớp dữ liệu, đặt tên cho biến (ví dụ: "DLV – webVitalsData.name") rồi lưu.

Cấu hình cho biến dataLayer đầu tiên.

  1. Lặp lại các bước này cho 4 biến lớp dữ liệu bắt buộc còn lại. Tạo "webVitalsData.value".

Cấu hình cho biến dataLayer thứ hai.

  1. Tạo một biến khác có trường tên là "webVitalsData.id".

Cấu hình cho biến dataLayer thứ ba.

  1. Tạo "webVitalsData.rating".

Cấu hình cho biến dataLayer thứ tư.

  1. Tạo "webVitalsData.delta".

Cấu hình cho biến dataLayer thứ năm.

  1. Bạn sẽ có các biến dataLayer do người dùng xác định sau đây:

Tổng quan về tất cả các biến dataLayer.

Tạo thẻ sự kiện GA4

Trước khi tạo thẻ sự kiện GA4, hãy đảm bảo rằng bạn đã thiết lập thẻ Google.

  1. Trong không gian làm việc của Trình quản lý thẻ của Google, hãy chuyển đến mục "Thẻ".
  2. Thêm thẻ sự kiện GA4 bằng cách nhấp vào "Mới", sau đó nhấp vào "Cấu hình thẻ" rồi chọn thẻ "Google Analytics: Sự kiện GA4" trong mục "Google Analytics".
  3. Nhập Mã đo lường của bạn vào trường tương ứng.

Trường nhập mã đo lường GA4.

  1. Đối với trường nhập dữ liệu "Tên sự kiện", hãy chọn biến dataLayer "DLV – webVitalsData.name" trong bước đã tạo trước đó.

Trường cho tên sự kiện GA4.

  1. Thêm các biến dataLayer khác làm thông số sự kiện như trong ảnh chụp màn hình. Ngoài ra, hãy nhớ thêm thông số "event_category" có giá trị như "Web Vitals" để nhóm các sự kiện Core Web Vitals.

Cấu hình thông số sự kiện trong thẻ GA4.

  1. Đăng ký các thông số sự kiện này dưới dạng phương diện tuỳ chỉnh trong giao diện người dùng GA4.
  2. Áp dụng các chế độ cài đặt bổ sung dựa trên yêu cầu thiết lập GA4.
  3. Đặt sự kiện tuỳ chỉnh "web_vitals" làm điều kiện kích hoạt cho thẻ GA4.
  4. Ngoài ra, hãy thêm trường hợp ngoại lệ của bộ khởi động nếu cần.

Cấu hình của điều kiện kích hoạt cho thẻ GA4.

6. Kiểm tra dữ liệu trong GA4

Để xác thực luồng dữ liệu đến GA4, hãy chuyển lại sang chế độ xem trước của Trình quản lý thẻ của Google. Cung cấp một URL cho Tag Assistant rồi nhấp vào "Kết nối".

  1. Tương tác với trang bằng cách di chuyển và nhấp vào các phần tử hoặc khoảng trống.
  2. Sau đó, hãy chuyển về thẻ có Tag Assistant và chế độ xem trước của Trình quản lý thẻ của Google.
  3. Ở bên trái, hãy nhấp vào từng mục "web_vitals" và xác nhận rằng thẻ Core Web Vitals của GA4 đang kích hoạt.

Kiểm tra xem thẻ GA4 có kích hoạt hay không.

  1. Mở thẻ GA4 bằng cách nhấp vào thẻ để xác thực rằng dữ liệu được lấy chính xác từ dataLayer. Đảm bảo hiển thị các biến dưới dạng giá trị.

Dữ liệu được gửi thông qua thẻ GA4.

  1. Bây giờ, hãy chuyển sang tài sản GA4 của bạn và mở báo cáo Theo thời gian thực.
  2. Trong thẻ "Số lượng sự kiện theo tên sự kiện", bạn có thể xác thực xem các sự kiện Core Web Vitals có được thu thập thành công hay không.

Kiểm tra dữ liệu đến trong báo cáo theo thời gian thực của GA4.

  1. Nếu một lượng lớn dữ liệu được xử lý trong báo cáo theo thời gian thực, thì có thể bạn sẽ không dễ dàng xác định được các sự kiện. Trong trường hợp đó, hãy sử dụng báo cáo debugview. Báo cáo này cho phép bạn xem dữ liệu của một thiết bị cụ thể.

Kiểm tra dữ liệu đến trong báo cáo DebugView của GA4.

7. Xuất bản chế độ thiết lập

Sau khi thử nghiệm thành công chế độ thiết lập, bạn có thể phát hành không gian làm việc.

  1. Mở không gian làm việc của bạn trong Trình quản lý thẻ của Google.
  2. Ở trên cùng bên phải trong giao diện người dùng, hãy nhấp vào "Gửi".
  3. Cung cấp tên phiên bản và nội dung mô tả phiên bản, đồng thời chuyển chế độ thiết lập sang trạng thái hoạt động bằng cách nhấp vào "Xuất bản".

8. Kết nối GA4 với Google Ad Manager hoặc Google AdSense

Sau khi thu thập dữ liệu về Core Web Vitals trong GA4, bạn cũng cần có các chỉ số liên quan đến quảng cáo trong GA4 để trang tổng quan hoạt động. Kết nối Google Ad Manager và Google AdSense với GA4 hoặc chỉ kết nối một trong các giải pháp quảng cáo này. Xin lưu ý rằng bạn phải có quyền chỉnh sửa (hoặc cao hơn) trong GA4 và quyền quản trị viên trong Google Ad Manager và Google AdSense để liên kết.

Kết nối GA4 với Google Ad Manager

  1. Chuyển đến mạng Google Ad Manager của bạn.
  2. Nhấp vào "Quản trị" -> "Cài đặt chung" -> "Cài đặt mạng".
  3. Trong phần "Cài đặt báo cáo", hãy bật tính năng "Báo cáo tài sản Google Analytics 4 trong báo cáo Ad Manager".

Bật Báo cáo tài sản GA4 trong báo cáo Ad Manager.

  1. Xem lại các điều khoản và điều kiện rồi nhấp vào "Xác nhận".
  2. Lưu nội dung cập nhật.
  3. Chuyển đến mục "Quản trị" -> "Tài khoản được liên kết" -> "Google Analytics 4".
  4. Nhấp vào "Đường liên kết tài sản Google Analytics 4 mới".
  5. Tìm và chọn tài sản GA4 mà bạn muốn liên kết.
  6. Nhấp vào Lưu là xong.

Kết nối một tài sản GA4 với Ad Manager.

Kết nối GA4 với Google AdSense

  1. Truy cập vào tài khoản Google AdSense của bạn.
  2. Nhấp vào "Tài khoản" -> "Truy cập và uỷ quyền" -> "Tích hợp Google Analytics".
  3. Nhấp vào "+Đường liên kết mới".

Kết nối tài sản GA4 với AdSense.

  1. Tìm và chọn tài sản GA4 mà bạn muốn liên kết.
  2. Nhấp vào "Tạo đường liên kết".

9. Trực quan hoá dữ liệu bằng Looker Studio

Để trình bày trực quan dữ liệu Core Web Vitals cùng với các chỉ số về quảng cáo, bước này liên quan đến việc thiết lập một Trang tổng quan Looker Studio. Vui lòng làm theo các bước sau để liên kết Core Web Vitals và doanh thu từ quảng cáo.

  1. Mở mẫu trang tổng quan này của Looker Studio
  2. Sao chép trang tổng quan.
  3. Cập nhật nguồn dữ liệu bằng cách chọn tài sản GA4 trong danh sách thả xuống.
  4. Xong

Xin lưu ý rằng để Trang tổng quan hoạt động và hiển thị dữ liệu chính xác, dữ liệu phải tuân theo cú pháp và quy ước đặt tên trong lớp học lập trình này.

Trang đầu tiên của trang tổng quan sẽ cho bạn biết hiệu suất Core Web Vitals trong quá khứ:

Trang 1 của Bảng tổng quan Core Web Vitals.

Trên trang thứ hai, bạn có thể tương quan Core Web Vitals với doanh thu từ quảng cáo của Google Ad Manager và/hoặc Google AdSense:

Trang 2 của Bảng tổng quan Core Web Vitals.

Trang thứ ba cho phép bạn phân tích hiệu suất của Core Web Vitals ở cấp đường dẫn trang cùng với các chỉ số liên quan đến quảng cáo:

Trang 3 của Bảng tổng quan Chỉ số quan trọng của trang web.

10. Kết luận

Xin chúc mừng! Bạn đã tìm hiểu cách đo lường và báo cáo Core Web Vitals bằng GA4 và các chỉ số hiệu suất quảng cáo từ Google Ad Manager và Google AdSense.

Tìm hiểu thêm