Tài liệu này dành cho những nhà phát triển muốn đo lường số lượt xem trang trên ứng dụng trang đơn bằng Google Analytics.
Ứng dụng một trang (SPA) là những trang web tải tài liệu HTML một lần và tìm nạp mọi nội dung bổ sung bằng API JavaScript.
Ví dụ: Giả sử bạn có một biểu mẫu để thu nạp một số khách hàng tiềm năng. Biểu mẫu này có 3 màn hình: > * Màn hình đầu tiên để thu thập thông tin khách hàng. * Màn hình thứ hai nơi khách hàng cho biết họ quan tâm đến một số dịch vụ nhất định. * Trang màn hình thứ ba để đăng ký tham gia hội thảo trực tuyến liên quan đến mối quan tâm của khách hàng.
Chìa khoá để đo lường chính xác số lượt xem trang từ SPA là tính số lượt xem trang cho mỗi màn hình mà người dùng tương tác và lấy đúng người giới thiệu trang, nhờ đó, bạn có thể theo dõi chính xác hành trình của người dùng.
Trước khi bắt đầu
Trang này giả định rằng bạn đã có:
Tài khoản và tài sản Google Analytics cho trang web của bạn. Tìm hiểu cách Thiết lập Google Analytics.
Thẻ Google được triển khai trên trang web của bạn và kích hoạt khi trang tải lần đầu. Tìm hiểu cách Thiết lập thẻ Google.
Triển khai tính năng đo lường ứng dụng một trang
Để triển khai tính năng đo lường chính xác cho SPA, hãy sử dụng một trong các phương thức sau để kích hoạt một lượt xem trang ảo mới:
Thay đổi nhật ký trình duyệt (nên dùng): Nếu SPA của bạn sử dụng API Nhật ký, cụ thể là phương thức
pushState()vàreplaceState()để cập nhật màn hình, hãy sử dụng lựa chọn này.Sự kiện tuỳ chỉnh: Nếu trang web của bạn sử dụng đối tượng
DocumentFragmentđể hiển thị nhiều màn hình, hãy sử dụng lựa chọn này.
Triển khai thay đổi nhật ký duyệt web
Nếu SPA của bạn sử dụng API Nhật ký, bạn có thể bật tính năng đo lường nâng cao trong Google Analytics để tự động theo dõi lượt xem trang dựa trên các sự kiện trong nhật ký duyệt web.
Bật tính năng đo lường nâng cao trong Google Analytics
Cách tự động đo lường page_views dựa trên nhật ký duyệt web:
Trên trang Quản trị, trong mục Thu thập và sửa đổi dữ liệu, hãy nhấp vào Luồng dữ liệu > Web.
Trong mục Đo lường nâng cao, hãy trượt nút gạt sang chế độ Bật để bật tất cả tuỳ chọn.
Nhấp để chỉnh sửa từng lựa chọn. Trong phần Lượt xem trang, hãy nhấp vào Hiển thị chế độ cài đặt nâng cao. Hãy nhớ bật cả Lượt tải trang và Thay đổi trang dựa trên các sự kiện trong nhật ký duyệt web.
Lưu thay đổi.
Xác minh chế độ thiết lập tính năng đo lường
Cách xác minh rằng ứng dụng trang đơn của bạn đo lường lượt xem trang chính xác:
Bật chế độ gỡ lỗi cho mọi thẻ trong chế độ thiết lập tính năng đo lường SPA. Tìm hiểu cách Theo dõi các sự kiện trong DebugView.
Nhấp vào ứng dụng trang đơn của bạn. Khi nhấp vào một màn hình ảo mới, bạn sẽ thấy một sự kiện
page_viewmới trong DebugView. So sánh các tham số sự kiệnpage_viewvới sự kiệnpage_viewtrước đó để kiểm tra xem trang giới thiệu và vị trí trang đã được cập nhật chính xác hay chưa.
Những điểm khác cần cân nhắc đối với SPA
Bên cạnh việc gửi sự kiện page_view, hãy cân nhắc các khía cạnh bổ sung sau đây để tích hợp SPA hiệu quả với Google Analytics và mang lại trải nghiệm tốt hơn cho người dùng:
Quản lý vị trí cuộn
Khi người dùng di chuyển giữa các chế độ xem trong SPA, trình duyệt thường giữ lại vị trí cuộn hiện tại. Điều này có thể khiến người dùng không nhìn thấy phần đầu của trang ảo mới và có thể ảnh hưởng đến việc theo dõi chiều sâu cuộn.
Đề xuất: Đặt lại vị trí cuộn theo phương thức lập trình về đầu trang hoặc vùng chứa nội dung chính sau mỗi lần chuyển đổi trang ảo.
// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);
// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);
Với thay đổi này, người dùng sẽ bắt đầu ở đầu nội dung mới, cho phép tính năng theo dõi thao tác cuộn của Google Analytics đo lường mức độ tương tác trên trang ảo mới một cách chính xác.
Đảm bảo khả năng hỗ trợ tiếp cận nội dung cho các tính năng của trình duyệt
Nếu người dùng báo cáo vấn đề về các tính năng của trình duyệt như tính năng tìm kiếm trên trang (Ctrl+F) không hoạt động sau khi tải trang ảo, thì điều này có thể cho biết cách SPA cập nhật DOM.
Đề xuất: Đảm bảo rằng khung SPA và logic định tuyến của bạn cập nhật hoàn toàn và đồng bộ các phần liên quan của DOM bằng nội dung của trang mới. Nội dung hiển thị chậm hoặc nội dung bị ẩn khỏi cây DOM chính có thể không được lập chỉ mục ngay bằng chức năng tìm kiếm của trình duyệt. Kiểm tra tính năng tìm kiếm trên trang sau khi điều hướng ảo để xác nhận khả năng truy cập nội dung.
Tác động đến sự kiện tự động
Nếu bạn triển khai đúng cách tính năng đo lường lượt xem trang ảo trong SPA, thì Google Analytics sẽ xử lý các sự kiện tự động khác một cách thích hợp. Nếu lượt xem trang ảo không được ghi lại cho các thay đổi về màn hình, thì Google Analytics sẽ coi SPA là một trang duy nhất, dẫn đến các chỉ số bị sai lệch.
Ví dụ: sự kiện user_engagement đo lường thời gian người dùng tích cực hoạt động trên một trang. Nếu không có lượt xem trang ảo, tất cả thời gian tương tác sẽ được tính cho lượt tải trang ban đầu, khiến bạn không thể phân tích thời gian dành cho từng màn hình.
Khi bạn triển khai đúng cách tính năng đo lường lượt xem trang ảo:
- Sự kiện
user_engagementđược gửi khi người dùng chuyển từ trang ảo này sang trang ảo khác. - Thời gian tương tác cho trang ảo trước đó được tính toán và gửi cùng với sự kiện
user_engagement, thường là ngay trước khi sự kiệnpage_viewcho trang ảo mới được xử lý. - Các sự kiện khác, chẳng hạn như lượt nhấp hoặc lượt cuộn, được liên kết với
page_locationcủa trang ảo mà người dùng đang xem.
Nhờ đó, bạn có thể phân tích mức độ tương tác của người dùng và các chỉ số khác cho từng màn hình hoặc phần trong SPA, giúp bạn hiểu rõ hơn về hành trình của người dùng.