[GA4] Thiết lập cấu hình thủ công (Trình quản lý thẻ)

This feature is part of an open beta. Keep in mind that the feature is subject to change.

Đây là hướng dẫn dành cho những quản trị viên và người chỉnh sửa muốn xác định dữ liệu do người dùng cung cấp trên trang web của họ và nhập dữ liệu đó vào Trình quản lý thẻ của Google.

Tổng quan

Bạn nên cập nhật mã trên mọi trang mà bạn thu thập dữ liệu do người dùng cung cấp, chẳng hạn như trang đăng ký, trang tạo khách hàng tiềm năng, trang thanh toán hoặc những trang tương tự. Bạn có thể gửi dữ liệu nhiều lần trong một phiên để đảm bảo rằng dữ liệu đã được gửi đến Analytics.

Trước khi bắt đầu

Hướng dẫn này giả định rằng bạn đáp ứng các điều kiện sau:

• Có quyền truy cập vào vùng chứa Trình quản lý thẻ dành cho trang web của bạn
• Đã kích hoạt tính năng thu thập dữ liệu do người dùng cung cấp và được phép thu thập dữ liệu do người dùng cung cấp
• Đã thiết lập thẻ Google Analytics: Sự kiện GA4 trong vùng chứa Trình quản lý thẻ

 Hướng dẫn

1. Đăng nhập vào Trình quản lý thẻ của Google.
2. Trong thẻ Không gian làm việc, hãy nhấp vào Thẻ ở bên trái.
3. Mở thẻ Google Analytics: Sự kiện GA4 mà bạn dùng để thu thập dữ liệu khách hàng.
4. Chọn Bao gồm dữ liệu do người dùng cung cấp từ trang web của bạn.
   
5. Trong trình đơn thả xuống Dữ liệu người dùng, hãy chọn hoặc tạo một biến Dữ liệu do người dùng cung cấp.
6. Trong biến Dữ liệu do người dùng cung cấp, hãy chọn Cấu hình thủ công.
   
7. Với mỗi trường, hãy mở rộng trình đơn thả xuống rồi chọn một biến.
8. Nếu bạn tạo một biến cho một trường dữ liệu, hãy hoàn tất các bước sau:
   1. Nhấp vào Cấu hình biến > Phần tử DOM.
   2. Nhập tên cho biến ở trên cùng.
   3. Trong trường Phương thức chọn, hãy chọn Bộ chọn CSS.
   4. Trong trường Bộ chọn yếu tố, hãy nhập bộ chọn CSS tham chiếu dữ liệu khách hàng. Tìm hiểu cách xác định bộ chọn CSS cho các trường dữ liệu do người dùng cung cấp.
   5. Để trống trường Tên thuộc tính.
   6. Bỏ qua trường Định dạng giá trị để tránh các vấn đề có thể xảy ra khi thiết lập.
   7. Lưu biến Phần tử DOM.
   8. Lặp lại các bước này cho từng trường mà bạn muốn thu thập.
9. Trong biến Dữ liệu do người dùng cung cấp, hãy bỏ qua trường Định dạng giá trị.
10. Lưu thẻ sự kiện.
11. Ở trên cùng bên phải, hãy nhấp vào Gửi để xuất bản các thay đổi.

Identify CSS selectors for user-provided data fields

To identify the CSS selectors to input into the fields, complete these steps for each field. If you already have unhashed variables in your code, you can select those instead of creating new CSS variables.

Note: If you’re using JavaScript variables, it’s likely easiest to ask your developer which variables should be added to these fields. If you’re using CSS Selectors, you can follow the steps below.

1. Open a Google Chrome browser window.
2. Go to your website, but keep Google Tag Manager open.
3. Identify the customer data you want to send to Google Analytics. For example, if you want to send an email address, identify where the email address is present on the page.
4. Right click the field and select Inspect. For example, if you are trying to capture an email address, make sure you are right clicking the email address.
5. On the Chrome Developer Tools page, you will see a portion of the code highlighted. This code is the page element where you need to extract CSS Selectors for the customer data.
6. Hover your mouse over the highlighted code and right-click it.
7. Scroll down to "Copy", then select Copy Selector.
8. Paste the copied text in the corresponding field in Google Analytics or Tag Manager.
   • The copied text should look something like the following:

     tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > custEmail

Next steps

Validate that user-provided data collection is set up correctly. Show me how.