使用JavaScript記錄熱圖的用戶數據

[英]Recording user data for heatmap with JavaScript


I was wondering how sites such as crazyegg.com store user click data during a session. Obviously there is some underlying script which is storing each clicks data, but how is that data then populated into a database? It seems to me the simple solution would be to send data via AJAX but when you consider that it's almost impossible to get a cross browser page unload function setup, I'm wondering if there is perhaps some other more advanced way of getting metric data.

我想知道像crazyegg.com這樣的網站如何在會話期間存儲用戶點擊數據。顯然,有一些底層腳本存儲每個點擊數據,但這些數據如何填充到數據庫中?在我看來,簡單的解決方案是通過AJAX發送數據但是當你認為幾乎不可能獲得跨瀏覽器頁面卸載功能設置時,我想知道是否有其他更高級的獲取度量數據的方法。

I even saw a site which records each mouse movement and I am guessing they are definitely not sending that data to a database on each mouse move event.

我甚至看到一個記錄每個鼠標移動的網站,我猜他們肯定不會在每次鼠標移動事件中將數據發送到數據庫。

So, in a nutshell, what kind of technology would I need in order to monitor user activity on my site and then store this information in order to create metric data? I am not looking to recreate GA, I'm just very interested to know how this sort of thing is done.

那么,簡而言之,我需要什么樣的技術來監控我網站上的用戶活動,然后存儲這些信息才能創建指標數據?我不打算重新創建GA,我只是很想知道這種事情是如何完成的。

Thanks in advance

提前致謝

5 个解决方案

#1


27  

The fundamental idea used by many tracking systems uses a 1x1px image which is requested with extra GET parameters. The request is added to server log file, then log files are processed to generate some statistics. So a minimalist click tracking function might look like this:

許多跟蹤系統使用的基本思想使用1x1px圖像,該圖像需要額外的GET參數。請求將添加到服務器日志文件中,然后處理日志文件以生成一些統計信息。因此,極簡主義的點擊跟蹤功能可能如下所示:

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

AJAX wouldn't be useful because it is subject to same-origin policy (you won't be able to send requests to your tracking server). And you'd have to add AJAX code to your tracking script. If you want to send more data (like cursor movements) you'd store the coordinates in a variable and periodically poll for a new image with updated path in the GET parameter.

AJAX沒有用,因為它受同源策略的約束(您將無法向跟蹤服務器發送請求)。而且您必須將AJAX代碼添加到跟蹤腳本中。如果要發送更多數據(如光標移動),則將坐標存儲在變量中,並定期輪詢GET參數中具有更新路徑的新圖像。

Now there are many many problems:

現在有很多問題:

  • cross-browser compatibility - to make the above function work in all browsers that matter at the moment you'd probably have to add 20 more lines of code
  • 跨瀏覽器兼容性 - 使上述功能在所有瀏覽器中都能正常運行,此時您可能需要添加20行代碼

  • getting useful data
    • many pages are fixed-width, centered, so raw X and Y coordinates won't let you create visual overlay of clicks n the page
    • 許多頁面都是固定寬度,居中,因此原始的X和Y坐標不會讓您創建頁面點擊的視覺疊加

    • some pages have liquid-width elements, or use a combination of min- and max-height
    • 有些頁面有液體寬度的元素,或者使用最小和最大高度的組合

    • users may use different font sizes
    • 用戶可以使用不同的字體大小

    • dynamic elements that appear on the page in response to user's actions
    • 頁面上顯示的動態元素,用於響應用戶的操作

  • 獲取有用的數據許多頁面是固定寬度的,居中的,因此原始的X和Y坐標不會讓您創建頁面的點擊的視覺疊加,一些頁面具有液體寬度元素,或者使用最小和最大高度的組合用戶可以使用出現在頁面上的不同字體大小的動態元素來響應用戶的操作

  • etc. etc.

When you have the tracking script worked out you only need to create a tool that takes raw server logs and turns them into shiny heatmaps :)

當您完成跟蹤腳本時,您只需要創建一個工具來獲取原始服務器日志並將其轉換為閃亮的熱圖:)

#2


31  

Heatmap analytics turns out to be WAY more complicated than just capturing the cursor coordinates. Some websites are right-aligned, some are left-aligned, some are 100%-width, some are fixed-width-"centered"... A page element can be positioned absolutely or relatively, floated etc. Oh, and there's also different screen resolutions and even multi-monitor configurations.

熱圖分析比僅捕獲光標坐標更復雜。有些網站是右對齊的,有些是左對齊的,有些是固定寬度 - “居中”...頁面元素可以絕對或相對定位,浮動等等哦,還有不同的屏幕分辨率甚至多顯示器配置。

Here's how it works in HeatTest (I'm one of the founders, have to reveal that due to the rules):

以下是它在HeatTest中的工作原理(我是其中一位創始人,由於規則必須透露):

  1. JavaScript handles the onClick event: document.onclick = function(e){ } (this will not work with <a> and <input> elements, have to hack your way around)
  2. JavaScript處理onClick事件:document.onclick = function(e){}(這不適用於元素,不得不破解你的方式)

  3. Script records the XPath-address of the clicked element (since coordinates are not reliable, see above) in a form //body/div[3]/button[id=search] and the coordinates within the element.
  4. 腳本以// body / div [3] / button [id = search]的形式記錄單擊元素的XPath地址(因為坐標不可靠,見上文)以及元素內的坐標。

  5. Script sends a JSONP request to the server (JSONP is used because of the cross-domain limitations in browsers)
  6. 腳本向服務器發送JSONP請求(由於瀏覽器中的跨域限制,因此使用JSONP)

  7. Server records this data into the database.
  8. 服務器將此數據記錄到數據庫中。

Now, the interesting part - the server.

現在,有趣的部分 - 服務器。

  1. To calculate the heatmap the server launches a virtual instance of a browser in-memory (we use Chromium and IE9)
  2. 為計算熱圖,服務器在內存中啟動瀏覽器的虛擬實例(我們使用Chromium和IE9)

  3. Renders the page
  4. 呈現頁面

  5. Takes a screenshot,
  6. 截圖,

  7. Finds the elements' coordinates and then builds the heatmap.
  8. 找到元素的坐標,然后構建熱圖。

It takes a lot of cpu-power and memory usage. A lot. So most of the heatmap-services including both us and CrazyEgg, have stacks of virtual machines and cloud servers for this task.

它需要大量的CPU功耗和內存使用量。很多。因此,包括us和CrazyEgg在內的大多數熱圖服務都有用於此任務的虛擬機和雲服務器堆棧。

#3


6  

Don't know the exact implementation details of how crazyegg does it, but the way I would do it is to store mouse events in an array which I'd send periodically over AJAX to the backend – e.g. the captured mouse events are collected and sent every 30 seconds to the server. This recudes the strain of creating a request for every event, but it also ensures that I will only lose 30 seconds of data at maximum. You can also add the sending to the unload event which increases the amount of data you get, but you wouldn't be dependent on it.

不知道crazyegg如何做到的具體實現細節,但我這樣做的方法是將鼠標事件存儲在一個數組中,我將通過AJAX定期發送到后端 - 例如收集捕獲的鼠標事件,並每30秒發送一次到服務器。這可以減少為每個事件創建請求的壓力,但它也確保我最多只會丟失30秒的數據。您還可以將發送添加到卸載事件,這會增加您獲得的數據量,但您不會依賴它。

Some example on how I'd implement it (using jQuery as my vanilla JS skills are a bit rusty):

關於我如何實現它的一些例子(使用jQuery作為我的vanilla JS技能有點生疏):

$(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);
});

Note that I haven't tested or tried this in any way but this should give you a general idea.

請注意,我沒有以任何方式測試或試過這個,但這應該給你一個大概的想法。

#4


2  

I really don't see why do you think that is impossible to store all click points in one user session to the database?

我真的不明白為什么你認為不可能將一個用戶會話中的所有點擊點存儲到數據庫中?

Their moto is "See Where People Click" Once when you gather enough data it is fairly easy to make heat maps in batch processes.

他們的動機是“查看人們點擊的位置”一旦您收集到足夠的數據,就可以很容易地在批處理過程中制作熱圖。

People are really underestimating databases, indexing and sharding. The only hard thing here is to gather enough money for underlying architecture :)

人們實際上低估了數據庫,索引和分片。這里唯一的難點是為底層架構收集足夠的錢:)

#5


1  

If you're just looking for interaction, you could replace your <input type="button"> with <input type="image">. These are automatically submitted with X,Y coordinates of where the user has clicked.

如果您只是在尋找交互,可以用替換。這些是使用用戶點擊的X,Y坐標自動提交的。

jQuery also has a good implementation of the mousemove even binding that can track the current mouse position. I don't know your desired end result, but you could setTimeOut(submitMousePosition, 1000) to send an ajax call with the mouse position every second or something like that.

jQuery還有一個很好的mousemove甚至綁定實現,可以跟蹤當前的鼠標位置。我不知道你想要的最終結果,但你可以setTimeOut(submitMousePosition,1000)來發送一個每秒鼠標位置的ajax調用或類似的東西。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2010/03/22/72a38c410d8067c60f11d19f78145c98.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com