Hướng dẫn thu thập Web Analytics chỉ với một dòng HTML và Filasys

Phân tích web là yếu tố then chốt để tối ưu hóa SEO và trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn cách thiết lập hệ thống thu thập dữ liệu cấp độ doanh nghiệp chỉ với một dòng mã HTML đơn giản sử dụng nền tảng Filasys.

Phân tích web (Web Analytics) là một thành phần không thể thiếu khi xây dựng bất kỳ trang web thành công nào. Cho dù mục đích là để tối ưu hóa SEO hay cải thiện trải nghiệm người dùng, các trang web đều cần thu thập dữ liệu để hiểu rõ cách hoạt động, điểm mạnh và những gì cần cải thiện.

Trong hướng dẫn này, chúng ta sẽ khám phá cách bắt đầu thu thập dữ liệu phân tích web cấp độ doanh nghiệp cho một trang web chỉ bằng đúng một dòng mã HTML, với sự hỗ trợ của nền tảng Filasys.

Giao diện trang web mẫu

Trước khi bắt đầu

Trang web được sử dụng trong bài hướng dẫn này là một cửa hàng trực tuyến giả lập, mã nguồn của nó có thể được tìm thấy tại GitHub. Filasys là nền tảng phân tích dữ liệu được xây dựng để tạo ra các báo cáo tùy chỉnh.

Đặc biệt, ví dụ này sẽ sử dụng phương pháp Cookieless tracking (theo dõi không dùng cookie). Điều này có nghĩa là các phiên làm việc (session) sẽ được theo dõi mà không cần sử dụng cookie. Filasys sử dụng một kỹ thuật đặc biệt để tạo ra các ID phiên ẩn danh khi thực hiện theo dõi không dùng cookie.

Để thực hiện theo hướng dẫn này, bạn cần chuẩn bị:

Git
Một tài khoản Filasys để quản lý việc thu thập dữ liệu.

Thiết lập dự án

Để tiết kiệm thời gian, chúng ta đã có một dự án được thiết lập sẵn trên GitHub.

Đầu tiên, chúng ta sẽ clone dự án về bằng cách chạy lệnh sau trong dòng lệnh:

git clone https://github.com/Filasys/web-sdk-starter.git

Ngoài ra, bạn cũng có thể truy cập trang GitHub và tải xuống dự án dưới dạng tệp zip. Nội dung của dự án sẽ bao gồm các tệp như index.html, index.css, index.js và một số hình ảnh minh họa.

Tệp index.html chứa mã HTML của trang web, index.css chứa phần định dạng và index.js giúp trang web trở nên tương tác (tuy nhiên không bắt buộc cho việc thu thập dữ liệu).

Bạn có thể kiểm tra xem dự án có hoạt động hay không bằng cách mở tệp index.html từ trình quản lý tệp vào trình duyệt.

Thu thập dữ liệu

Để thu thập dữ liệu, trước tiên chúng ta cần tạo một dự án trên Filasys để lưu trữ chúng.

Trên bảng điều khiển của Filasys, hãy vào tab "Projects" và tạo một dự án mới. Để tương thích với Web SDK, hãy đảm bảo chọn preset Web Analytics trước khi tạo dự án.

Sau đó, trong phần tổng quan dự án, hãy chọn "Web SDK" dưới mục Integration, đảm bảo rằng tùy chọn "Auto Start" (Tự động bắt đầu) đã được chọn, và sao chép dòng mã HTML bên dưới nó.

Thiết lập Web SDK trên Filasys

Bây giờ, hãy dán dòng mã HTML đó vào phần <head> của tài liệu trong tệp index.html.

Vậy là xong! Khi mở trang, quá trình thu thập thông tin về phiên làm việc và hiệu suất của trang sẽ tự động bắt đầu.

Nếu bạn mở trang, truy cập tab "Events" của dự án, chọn "Session Events" và vào mục "Logs", bạn sẽ bắt đầu thấy các sự kiện xuất hiện (có thể mất từ 1 đến 2 phút để sự kiện hiển thị).

Nhật ký sự kiện phiên

Ngoài ra, nếu vào tab "Dashboards" và truy cập bảng điều khiển "Performance Analytics" hoặc "Session Analytics", bạn có thể bắt đầu quan sát các biểu đồ dữ liệu.

Theo dõi tương tác nâng cao

Web SDK cũng có khả năng theo dõi các tương tác với trang web, cùng với các chi tiết về tương tác đó.

Để làm điều này, chúng ta có thể thêm hai thuộc tính khác nhau vào các nút bấm (button) trong trang web: data-filaction và data-filadetails.

data-filaction: Được sử dụng để mô tả loại tương tác chúng ta đang theo dõi. Ở đây chúng ta sẽ chọn theo dõi tương tác click (nhấp chuột).
data-filadetails: Là tùy chọn và cần được thiết lập cùng với data-filaction. Giá trị của thuộc tính này có thể là bất kỳ thứ gì và sẽ được ghi lại dưới dạng chi tiết tương tác.

Quay lại phần HTML, chúng ta có thể sửa đổi các nút bấm như sau:

<button type="button" class="add-to-cart" id="add-strawberries" data-filaction="click" data-filadetails="add-strawberries">Add To Cart</button>
<!-- ... -->
<button type="button" class="add-to-cart" id="add-oranges" data-filaction="click" data-filadetails="add-oranges">Add To Cart</button>
<!-- ... -->
<button type="button" class="add-to-cart" id="add-lemons" data-filaction="click" data-filadetails="add-lemons">Add To Cart</button>
<!-- ... -->
<button type="button" class="checkout" data-filaction="click" data-filadetails="checkout">Checkout</button>

Bây giờ, việc tương tác với các nút bấm trên trang web sẽ gửi các sự kiện tương tác khớp với cấu hình của các nút đó.

Kết luận

Trong hướng dẫn này, chúng tôi đã chỉ ra cách thiết lập phân tích web chỉ sử dụng HTML. Giờ đây, các sự kiện về hiệu suất và phiên làm việc được thu thập tự động, cũng như các tương tác với trang web.

Nếu bạn muốn tìm hiểu thêm về Web SDK và các sự kiện đang được thu thập, hãy tham khảo tài liệu chính thức của Filasys.