Còn nhớ năm ngoái, khi điện thoại thông minh phát triển một cách rầm rộ và kéo theo sự ra đời của cái gọi là responsive web design (thiết kế tùy biến giao diện website). Bắt đầu từ thời điểm đó, webmaster nào có website cũng muốn sở hữu một giao diện tùy biến trên điện thoại để đáp ứng tốt hơn cho người truy cập từ di động. Hơn 500 ngày đã trôi qua và giờ đây chúng ta đang đứng giữa cuộc cách mạng Responsive. Với một vài đoạn mã được xây dựng dựa trên nền tảng Google Analytics, bạn có thể cai quản và tìm hiểu tất cả các sự kiện của người dùng di động.
Analytics.js là một thư viện được Google xây dựng thêm nhằm giúp các nhà phát triển web tự thu thập thêm và cung cấp thêm các dữ liệu cần thiết cho Google Analytics của mình nhằm tìm hiểu thêm về hành vi của người dùng trên website của họ. Việc nắm rõ và sử dụng tốt nó sẽ giúp bạn kiểm soát tốt hơn thông tin về người dùng, nhất là trong giai đoạn Google Analytics ngày càng cung cấp hạn chế hơn thông tin về người dùng của bạn.
Chúng ta sẽ bắt đầu với đoạn mã Event Tracking Snippet trong Analytics.js. Nó sẽ như thế này:
[code lang=”js”] ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’);[/code]
hoặc
[code lang=”js”] ga(‘send’, ‘event’, ‘form’, ‘submitted’, ‘appointment’);[/code]
Nếu bạn chưa hiểu về nó, bạn có thể xem thêm ở đây.
Là một nhà phát triển, bạn sẽ dễ dàng gọi hàm này để tracking một cách đơn giản bằng cách sử dụng một vài dòng lệnh jQuery hoặc sử dụng một nút bấm nào đó để gọi nó. Trong nội dung của bài viết này tôi sẽ không đi sâu về nó, bạn có thể tham khảo thêm các lệnh gọi JQuery. Nhưng trong việc sử dụng lệnh gọi đơn giản này, chúng ta hãy tìm cách đưa những kết quả mà nó theo dõi được vào những phân tích thực để sử dụng như thế nào.
Gửi AJAX Form – rất nhiều trang web hiện nay sử dụng AJAX để gọi PHP hoặc JQuery để thực hiện các thay đổi trên database, gửi email mà vẫn giữ người dùng ở trang hiện tại. Bạn cần đoạn mã trên để kích hoạt quá trình theo dõi của bạn, chỉ cần gắn nó vào trigger .done trong sự kiện Ajax và bạn có thể theo dõi dễ dàng.
Theo dõi chuyển hướng khi click chuột lên Navigation – nếu bạn lặp lại một số liên kết Navigation ở dưới footer, bạn có thể sử dụng một đoạn lệnh để theo dõi <footer> và <nav>. Giống như vầy:
[code lang=”js”] ga(‘send’, ‘event’, ‘link’, ‘clicked’, ‘nav’);[/code]
Calls to Action – bất kỳ một chiến dịch Marketing nào cũng mong muốn có những hành động từ phía người dùng. Nếu bạn cần theo dõi những banner Calls to Action của mình, bạn có thể sử dụng nó với banner, trích dẫn hoặc một liên kết nào đó.
Slider Button – tôi không có bất kỳ một số liệu chính xác nào ở trước mặt. Nhưng tôi khá chắc chắn rằng 90% những trang web được thiết kế trong năm nay đều có phần slider trên trang chủ. Bạn có biết bao nhiêu người click chuột vào banner thứ 4 trên trang, hay những banner cuối cùng trong slider liệu có ai quan tâm hay không ? Đây là cách để bạn có câu trả lời cho câu hỏi trên:
[code lang=”js”] ga(‘send’, ‘event’, ‘slider’, ‘clicked’, ‘slide4’);[/code]
FAQ – người viết FAQ chỉ có thể tiên đoán những câu hỏi người dùng thường quan tâm nhiều nhất, nhưng họ không biết chính xác những câu hỏi nào người dùng thực sự cần đọc. Hãy để họ biết điều đó bằng cách gắn Analytics.js vào các liên kết câu hỏi.
UI Dialog – các nhà phát triển giao diện biết rõ tầm quan trọng của giao diện người dùng đối với website. Người dùng thường click chuột ở đâu, họ quan tâm đến những vị trí nào trên website…Nếu bạn cần thông tin này, hãy sử dụng:
[code lang=”js”]
ga(‘send’, ‘event’, ‘alert’, ‘ok’, ‘X was deleted’);
[/code]
Bây giờ! Hãy kết thúc những gì đã bắt đầu
Có lẽ bạn cảm thấy mơ hồ với những thông tin và hướng dẫn tôi đã cung cấp ở trên. Giờ là lúc chúng ta sử dụng chúng và ứng dụng chúng trên website sao cho phù hợp với tiêu đề bài viết mà tôi đã sử dụng. Tôi đã đề nghị bạn sử dụng Analytics.js cho website để phân tích và đánh giá và đem lại lợi ích cho chính bản thân và công ty của chúng ta.
Hãy bắt đầu theo dõi theo dõi sự kiện trên trình duyệt và lấy độ rộng của trình duyệt như một biến để xác định thiết bị truy cập. Các lập trình viên và nhà thiết kế website rất cẩn trọng tối ưu hóa các thiết kế phiên bản của mỗi thiết bị truy cập khác nhau. Họ thực hiện một loạt các quyết định quan trọng để nâng cao khả năng truy cập của người dùng. Tuy nhiên, rất khó xác định được thiết kế nào mang lại hiệu quả cao hơn những thiết kế khác.
Việc của chúng ta bây giờ là tìm hiểu và đánh giá sự quan tâm của người dùng đối với một thiết kế nhất định nào đó. Chúng ta hãy bắt đầu theo dõi khi dữ liệu trên website đã sẵn sàng cho người dùng sử dụng và bắt lấy độ rộng của màn hình như tôi đã nói ở trên.
[code lang=”js”]
$( window ).resize(function() {
var r_width = $( window ).width();
});
[/code]
Giờ, chúng ta sử dụng độ rộng ấy trong sự kiện của Event Trigger
[code lang=”js”]
ga(‘send’, ‘event’, ‘contact-form’, ‘submitted’, r_width);
[/code]
Dữ liệu này sẽ giúp bạn lọc bỏ phần dữ liệu thừa ở các độ phân giải (hay thiết bị) mà bạn không cần sử dụng đến chúng hoặc không quan tâm đến chúng.Và dĩ nhiên với những dữ liệu này chiến dịch của bạn sẽ có thông tin chính xác hơn rất nhiều so với những thông tin chung chung.
Bạn nghĩ sao về đoạn mã tiếp theo này:
[code lang=”js”]
ga(‘send’, ‘event’, ‘contact-form’, device_name, r_width);
[/code]
Xin tha cho tôi, tôi chưa sử dụng nó :D. Bạn có thể thử và cho tôi kết quả nhé.
Nguồn: speckyboy
Tác giả: Wayne Roddy
Dịch: NhanWeb.COM
hay rất hay >:D<