Ghi dữ liệu người dùng cho bản đồ nhiệt bằng JavaScript

Question

Tôi đã tự hỏi các trang web như dữ liệu nhấp chuột người dùng cửa hàng crazyegg.com trong một phiên. Rõ ràng có một số tập lệnh cơ bản lưu trữ từng dữ liệu nhấp chuột, nhưng dữ liệu đó sau đó được điền vào cơ sở dữ liệu như thế nào? Dường như với tôi giải pháp đơn giản là gửi dữ liệu qua AJAX nhưng khi bạn cho rằng gần như không thể có được thiết lập chức năng dỡ bỏ trang trình duyệt chéo, tôi tự hỏi liệu có một số cách nâng cao hơn để lấy dữ liệu chỉ số không.

Tôi thậm chí còn thấy một trang web ghi lại từng chuyển động của chuột và tôi đoán họ chắc chắn không gửi dữ liệu đó đến cơ sở dữ liệu trên mỗi sự kiện di chuyển chuột.

Tóm lại, tôi cần loại công nghệ nào để giám sát hoạt động của người dùng trên trang web của mình và sau đó lưu trữ thông tin này để tạo dữ liệu chỉ số? Tôi không tìm cách tái tạo GA, tôi chỉ rất quan tâm để biết làm thế nào loại điều này được thực hiện.

Cảm ơn trước

Answer 1

Ý tưởng cơ bản được nhiều hệ thống theo dõi sử dụng sử dụng hình ảnh 1x1px được yêu cầu với tham số GET bổ sung. Yêu cầu được thêm vào tệp nhật ký máy chủ, sau đó các tệp nhật ký được xử lý để tạo một số thống kê. Vì vậy, một chức năng theo dõi nhấp chuột nhỏ gọn có thể trông như thế này:

document.onclick = function(e){ 
    var trackImg = new Image(); 
    trackImg.src = 'http://tracking.server/img.gif?x='+e.clientX+'&y='+e.clientY; 
} 

AJAX sẽ không hữu ích vì nó phụ thuộc vào chính sách cùng nguồn gốc (bạn sẽ không thể gửi các yêu cầu đến máy chủ theo dõi của bạn). Và bạn phải thêm mã AJAX vào tập lệnh theo dõi của mình. Nếu bạn muốn gửi thêm dữ liệu (như di chuyển con trỏ), bạn sẽ lưu trữ tọa độ trong một biến và định kỳ thăm dò ý kiến ​​cho một hình ảnh mới với đường dẫn được cập nhật trong tham số GET.

Bây giờ có rất nhiều nhiều vấn đề:

• tương thích qua trình duyệt - để làm cho công việc chức năng trên trong tất cả các trình duyệt quan trọng vào lúc này có lẽ bạn sẽ phải bổ sung thêm 20 dòng mã
• nhận được dữ liệu hữu ích
  • nhiêu trang được cố định chiều rộng, tập trung, vì vậy nguyên X và Y tọa độ sẽ không cho phép bạn tạo lớp phủ hình ảnh nhấp chuột n trang
  • một số trang có yếu tố lỏng chiều rộng, hoặc sử dụng một sự kết hợp của min- và max-height
  • người dùng có thể sử dụng phông chữ khác nhau kích thước
  • yếu tố năng động mà xuất hiện trên trang để đáp ứng với những hành động của người dùng
• vv vv

Khi bạn có kịch bản theo dõi làm việc ra bạn chỉ cần tạo một công cụ mà sẽ đưa các bản ghi máy chủ liệu và biến chúng thành bản đồ nhiệt về bóng :)

Answer 2

Không biết các chi tiết thực hiện chính xác như thế nào crazyegg hiện nó, nhưng cách tôi sẽ làm điều đó là để lưu trữ các sự kiện chuột trong một mảng mà anh muốn gửi định kỳ trên AJAX đến backend – ví dụ các sự kiện chuột đã thu thập được thu thập và gửi mỗi 30 giây đến máy chủ. Điều này cho thấy sự căng thẳng của việc tạo ra một yêu cầu cho mọi sự kiện, nhưng nó cũng đảm bảo rằng tôi sẽ chỉ mất 30 giây dữ liệu ở mức tối đa. Bạn cũng có thể thêm gửi đến sự kiện unload để tăng lượng dữ liệu bạn nhận được, nhưng bạn sẽ không phụ thuộc vào nó.

Một số ví dụ về cách tôi muốn thực hiện nó (sử dụng jQuery như kỹ năng JS vani của tôi là một chút gỉ):

$(function() { 

    var clicks = []; 

    // Capture every click 
    $().click(function(e) { 
     clicks.push(e.pageX+','+e.pageY); 
    }); 

    // Function to send clicks to server 
    var sendClicks = function() { 
     // Clicks will be in format 'x1,y1;x2,y2;x3,y3...' 
     var clicksToSend = clicks.join(';'); 
     clicks = []; 
     $.ajax({ 
      url: 'handler.php', 
      type: 'POST', 
      data: { 
       clicks: clicksToSend 
      } 
     }); 
    } 

    // Send clicks every 30 seconds and on page leave 
    setInterval(sendClicks, 30000); 
    $(window).unload(sendClicks); 
}); 

Lưu ý rằng tôi đã không kiểm tra hoặc thử điều này trong bất kỳ cách nào nhưng điều này nên cung cấp cho bạn một ý tưởng chung.

Answer 3

Nếu bạn chỉ đang tìm kiếm tương tác, bạn có thể thay thế <input type="button"> bằng <input type="image">. Chúng được tự động gửi với tọa độ X, Y của nơi người dùng đã nhấp vào.

jQuery cũng có triển khai tốt mousemove even binding có thể theo dõi vị trí chuột hiện tại. Tôi không biết kết quả cuối cùng mong muốn của bạn, nhưng bạn có thể setTimeOut (submitMousePosition, 1000) để gửi một cuộc gọi ajax với vị trí chuột mỗi giây hoặc một cái gì đó như thế.

Answer 4

tôi thực sự không hiểu tại sao bạn nghĩ rằng không thể lưu trữ tất cả nhấp vào các điểm trong một phiên người dùng đến cơ sở dữ liệu?

Ảnh moto của họ là "Xem nơi mọi người Nhấp vào" Khi bạn thu thập đủ dữ liệu, việc tạo bản đồ nhiệt trong quy trình hàng loạt là khá dễ dàng.

Mọi người thực sự đánh giá thấp cơ sở dữ liệu, lập chỉ mục và phân tích. Điều khó khăn duy nhất ở đây là thu thập đủ tiền cho kiến ​​trúc cơ bản :)

Answer 5

Phân tích bản đồ nhiệt hóa ra phức tạp hơn so với việc chỉ chụp tọa độ con trỏ. Một số trang web được căn phải, một số được căn trái, một số là 100%-độ rộng, một số có chiều rộng cố định- "căn giữa" ... Một phần tử trang có thể được định vị hoàn toàn hoặc tương đối, trôi nổi vv. độ phân giải màn hình khác nhau và thậm chí cấu hình đa màn hình.

Sau đây là cách nó hoạt động trong HeatTest (Tôi là một trong những người sáng lập, có tiết lộ rằng do các quy tắc): xử lý

1. Javascript sự kiện onClick: document.onclick = function(e){ } (điều này sẽ không làm việc với <a> và <input> các yếu tố, phải hack theo cách của bạn)
2. Script ghi lại địa chỉ XPath của phần tử được nhấp (vì tọa độ không đáng tin cậy, xem ở trên) ở dạng
3. Tập lệnh gửi yêu cầu JSONP tới máy chủ (JSONP được sử dụng do giới hạn tên miền chéo trong trình duyệt)
4. Máy chủ ghi dữ liệu này vào cơ sở dữ liệu.

Bây giờ, phần thú vị - máy chủ.

1. Để tính Heatmap máy chủ ra mắt một trường hợp ảo của một trình duyệt trong bộ nhớ (chúng tôi sử dụng Chromium và IE9)
2. ám chỉ rằng trang
3. Mất một ảnh chụp màn hình,
4. Finds các yếu tố 'tọa độ và sau đó xây dựng bản đồ nhiệt.

Phải mất rất nhiều công suất sử dụng CPU và bộ nhớ. Rất nhiều. Vì vậy, hầu hết các dịch vụ bản đồ nhiệt bao gồm cả chúng tôi và CrazyEgg đều có các máy ảo và máy chủ ảo cho nhiệm vụ này.