Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Google Analytics
Webdesign

Cách theo dõi hành vi người dùng bằng Google Analytics Events

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Một cách ngắn gọn; bạn vừa mới thiết kế lại trang web của bạn, và bạn đã áp dụng tất cả các cách làm tốt nhất mà bạn bạn học được. Trang web chạy rất nhanh, và nó hiện trông rất tốt với giao diện mới.

Nhưng bạn đã đánh giá phương pháp đo lường thiết kế mới của bạn chưa? Làm thế nào bạn biết nếu các popup mới mà bạn vừa thêm vào dẫn đến sự thay đổi, hoặc ảnh hưởng đến trải nghiệm? Popup có thường xuyên hiển thị không và làm thế nào mà mọi người bỏ qua nó? Bao nhiêu người dùng điều hướng trang web từ thanh menu off-canvas mà bạn vừa mới thêm vào? Bao nhiêu người xem trình chiếu ảnh của bạn trên trang chủ ngoài tấm đầu tiên? Các câu hỏi thì nhiều và đa dạng.

Trong bài hướng dẫn này, tôi sẽ hướng dẫn bạn cách tận dụng Google Analytics Event Tracking API (tên dài làm sao!) để tìm kiếm các câu trả lời.

Bắt đầu

Nếu bạn chưa phải là một người dùng Google Analytics, hãy tạo một tài khoản và làm theo các bước để tạo một script theo dõi cho trang web của bạn. Thông thường, đoạn code mà bạn có được sẽ trông giống như ví dụ ở dưới với UA-XXXXXX-X là tracking ID của trang web bạn.

Đối với bài tập này bạn cũng sẽ cần cài đặt một Chrome Extension, Google Analytics Debugger, để gỡ lỗi các script Google Analytics trên trang web của chúng ta sau này.

Bật Google Chrome Debugger

Một khi bạn đã thiết lập chúng, chúng ta có thể bắt đầu với ví dụ đầu tiên.

Theo dõi một cú nhấp chuột

Hãy tưởng tượng chúng ta có một vài nút bấm (hoặc các liên kết trong hình dạng của một nút). Chúng ta thêm cái đầu tiên bên trên phần "hero", và cái thứ hai ngay trước footer. Như bạn có thể nhìn thấy dưới đây, mỗi nút trỏ đến cùng một trang, có các lớp phong cách khác nhau và một ID duy nhất. Trong trường hợp này, chúng ta có thể khởi tạo "Event Tracking API" để xem xem nút nào được nhấp nhiều hơn.

Sử dụng Events Tracking là tương đối dễ, vì nó không yêu cầu định nghĩa một sự kiện. Đầu tiên chúng ta cần nối các nút với sự kiện click.

Sau đó chúng ta thêm ga() là một hàm được đưa ra bởi script của Google Analytics mà chúng ta đã thêm trước đó, và là hàm tương tự như chúng ta sử dụng để ghi lại một "pageview". Tương tự, chúng ta theo giõi một sự kiện sử dụng lệnh send với event thiết lập thành đối số hitType cùng với một số tham số được yêu cầu, có tên là:

  • eventAction: thiết lập tương tác người dùng hoặc trạng thái giao diện người dùng ví dụ click, play, pause, vv.
  • eventCategory: xác định đối tượng để theo dõi ví dụ như video, button, pop-up, vv.
  • eventLabel: một nhãn hoặc ID duy nhất của sự kiện. Chúng ta thêm biến này để phân loại nhiều thể hiện của cùng một đối tượng.

Như đã đề cập, Google không thiết lập quy tắc nghiêm ngặt; bạn có thể áp dụng chúng theo bất kỳ cách nào bạn thấy phù hợp trên trang web của bạn. Trong trường hợp của chúng ta, chúng ta thiết lập các biến này như sau:

Với phần mở rộng Google Analytics Debugger, chúng ta có thể nhấp vào một trong các nút của chúng ta và tận dụng DevTools Console để xem trình theo dõi có hoạt động hay không:

Google Analytics Log in DevTools Console
Trình theo dõi gởi dữ liệu tới Google Analytics

Và một khi Google Analytics nhận được dữ liệu, nó sẽ được ghi lại ở dưới Real-time > Events và Behaviour > Events.

Event Record in Google Analytics
Từ ảnh chụp màn hình này, chúng ta thấy rằng nút "Buy Now" bên dưới phần "hero" được nhấp nhiều hơn cái trên.

Theo dõi trên một Carousel

Ví dụ thứ hai của chúng ta sẽ liên quan đến một trình chiếu hình ảnh, hay còn gọi là Carousel. Bạn sẽ có thể đã bắt gặp các lý lẽ cho việc ủng hộ và phản đối việc sử dụng carousel trên các trang web; "mọi người không thực sự tương tác với carousel" hoặc "mọi người chỉ tương tác với slide đầu tiên". Nhưng những lý lẽ này có áp dụng cho trang web của bạn không? Nếu không có dữ liệu, thì khó mà nói được.

Hãy kết hợp Google Analytics Events vào trong carousel, mà chúng tôi đã xây dựng sử dụng Slick.js. Plugin jQuery này cung cấp một nhóm các Sự kiện jQuery tuỳ biến, nó là những gì chúng ta cần để chạy Google Analytics Event Tracking. Vui lòng tìm đến tài liệu hướng dẫn của Slick để biết rõ cách xây dựng carousel.

Carousel của chúng ta được tạo ra đơn giản cho mục đích của bản demo.

Carousel của chúng ta chứa năm slide. Tương tự như ví dụ đầu tiên của chúng ta, chúng ta cũng thêm một ID duy nhất cho mỗi slide (ví dụ slide-1, slide-2, slide-3, vv) mà chúng ta sẽ truyền vào trong tham số của eventLabel. Mục tiêu ở đây là để tìm ra:

  1. người dùng có xem carousel ngoại trừ slide đầu tiên không
  2. và để tập hợp số lượng xem cho mỗi slide.

Để làm điều này chúng ta có thể khởi tạo các sự kiện swipeafterChange của Slick.js.

Swipe

Sự kiện swipe, như tên gọi của nó, được kích hoạt khi người dùng duyệt qua carousel bằng hành động vuốt. Trong trường hợp này, chúng ta cũng thiết lập tham số eventAction thành swipe.

afterChanges

afterChanges là sự kiện được kích hoạt khi slide đã thay đổi; nói cách khác, khi người dùng xem slide tiếp theo hoặc trước đó bên trong carousel. Trong trường hợp này, chúng ta thiết lập eventAction thành view cho "slide mới".

Một khi Google Analytics đã thu thập được dữ liệu, chúng ta sẽ sớm tìm ra bao nhiêu người dùng tương tác với carousel của chúng ta, số lượng view mỗi slide nhận được, và cách người dùng vuốt khi sử dụng carousel.

Như chúng ta có thể thấy ở trên, carousel của chúng ta nhận tổng cộng 19 view, 14 trong số đó được thực hiện thộng qua hành động vuốt.

Tiếp theo là gì?

Chúng ta vừa mới thấy hai ví dụ của việc tích hợp Google Analytics Events Tracking vào trong trang web của chúng ta để thu thập dữ liệu tương tác với người dùng. Những con số này cho chúng ta một sự tham khảo đáng tin cậy cho việc đánh giá thiết kế mới có tốt hơn thiết kế cũ hay không, cuối cùng giúp chúng ta cải thiện UX (trải nghiệm người dùng) cho trang web của chúng ta.

Tôi khuyến khích bạn kiểm tra tài liệu hướng dẫn để nâng cao việc sử dụng Google Analytics Events Tracking API của bạn.

Các nguồn tài liệu bổ sung

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.