例子

在第一個例子點擊座標[300，500]可能會被周圍設大猩猩的地方（也許他的鼻孔！=））。

alt text

在這種其它示例具有座標[300點擊。 500]可能會位於主要內容區域之外的某個地方！

alt text

底線：我怎樣才能解決這個問題，這樣我就可以建立一個準確的DIY點擊熱圖？

這將是真正有趣的知道！多謝你們！ =）

來源

2010-07-26 RadiantHex

1）只需傳遞當前主題以及座標。

2）獲取您主要內容區域的relative mouse position。這樣可以避免不同瀏覽器寬度/高度的不同位置問題。

有一個在jQuery docs for Mouse Position一個特殊的部分（如果你使用它）這一點：

（注意，像素值給出的相對於整個文檔如果要計算。一個特定的元素中的位置，或在視口，你可以看看OFFSETY 和OFFSETX，並做一點算術找到相對值。

這裏找到012例特定元素中位置而非頁面：

$("#special").click(function(e){ 
    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 
    $('#status2').html(x +', '+ y); 
});

話雖這麼說，也許是矯枉過正; Google Analytics也具有熱圖功能。

來源

2010-07-26 09:35:06

非常感謝您的回覆！我真的需要找到一種方法來識別使用Javascript的內容包裝，它將有點複雜，不得不強制或找到每個主題的id。只要在每個主題中粘貼一些Javascript代碼就會容易得多。順便說一下，這是我第一次使用以荷蘭語編寫的Google Analytics（分析）！ =） – RadiantHex 2010-07-26 09:53:06

@RadiantHex：以silverbackapp.com爲例，你的內容包裝div有class'content'。如果您使用的是jQuery，您可以使用'.content'（而不是#special）來定位它。 – 2010-07-26 13:55:43

這是我的代碼。它僅在頁面包裝器中記錄點擊（而不是背景）。所以你只能得到相對位置。

$(function(){ 
    var o = $("#wrapperDiv"); // page wrapper div 
    var lf = o.offset().left; // wrapper left position 
    var lt = lf+o.width(); // wrapper right position 
    $(document).click(function(e){ // bind click event to whole page 
    var x = e.pageX; // mouse x position 
    if(x >= lf || x <= lt){ // was the click inside wrapper div? 
     $.get("heatmap.php", { // send ajax request to server width: 
     x: x-lf, // x position of page 
     y: e.pageY, // y position of page 
     url: document.location.href.replace('http://'+document.domain, '') // request uri 
     }); 
    } 
    }); 
});

來源

2010-07-26 09:34:41 Anpher

謝謝！任何聰明的方法，我可以讓Javascript瞭解包裝是什麼div？ – RadiantHex 2010-07-26 09:45:30

@RadiantHex，通過設置其id爲'wrapperDiv'。 – 2010-07-26 09:47:36

@丹尼爾：嗨，丹尼爾，我對你的回覆留了言。 :)如果我能想出一種方法來動態地理解div封裝是什麼，那將會很棒。我認爲有一套固定包裝的方法，例如，文本對齊並將div設置爲內嵌塊。所以我認爲我可以用Javascript來尋找這個，但我相信可能有其他方法來實現這一點，這可能會讓我放慢腳步。 – RadiantHex 2010-07-26 09:56:17

不是爲每次點擊存儲絕對合作夥伴，您可以根據潛在對象（即大猩猩）存儲每次點擊的可靠合作伙伴。

然後，在顯示熱圖時，顯示相對於您的分辨率的每個對象的點擊。

要做到這一點，您只需抓住每次點擊的「目標」對象（這是事件參數的'target'屬性），並從點擊共同點減去它的共同點。

來源

2010-07-26 09:46:05 Toby

有趣和令人耳目一新的想法！我喜歡這個概念，我會考慮它=） – RadiantHex 2010-07-26 09:48:35

這是一個真正的好主意，我相信它也可以被概括一點！例如大猩猩可以作爲一個里程碑，因爲無論如何它都將在內容包裝中，並且所有的點座標都可以與它相關聯。現在的問題是，讓代碼在地標上達成一致！ =） – RadiantHex 2010-07-26 10:15:49

點擊熱圖和鼠標座標！ - Javascript

例子

回答

相關問題