जावास्क्रिप्ट

Question

के साथ हीटमैप के लिए उपयोगकर्ता डेटा रिकॉर्डिंग मैं सोच रहा था कि crazyegg.com स्टोर उपयोगकर्ता जैसी साइटें सत्र के दौरान डेटा पर क्लिक करती हैं। जाहिर है कि कुछ अंतर्निहित स्क्रिप्ट है जो प्रत्येक क्लिक डेटा संग्रहित कर रही है, लेकिन फिर वह डेटा डेटाबेस में कैसे पॉप्युलेट किया जाता है? ऐसा लगता है कि सरल समाधान AJAX के माध्यम से डेटा भेजना होगा, लेकिन जब आप मानते हैं कि एक क्रॉस ब्राउज़र पृष्ठ अनलोड लोड सेटअप प्राप्त करना लगभग असंभव है, तो मुझे आश्चर्य है कि मेट्रिक डेटा प्राप्त करने का शायद कुछ अन्य उन्नत तरीका है या नहीं।

मैंने एक ऐसी साइट भी देखी जो प्रत्येक माउस आंदोलन को रिकॉर्ड करता है और मुझे लगता है कि वे निश्चित रूप से उस डेटा को प्रत्येक माउस चाल ईवेंट पर डेटाबेस में नहीं भेज रहे हैं।

तो, संक्षेप में, मेरी साइट पर उपयोगकर्ता गतिविधि की निगरानी करने के लिए मुझे किस प्रकार की तकनीक की आवश्यकता होगी और फिर मीट्रिक डेटा बनाने के लिए इस जानकारी को स्टोर करें? मैं जीए को फिर से बनाने की तलाश नहीं कर रहा हूं, मुझे यह जानने में बहुत दिलचस्पी है कि इस तरह की चीज कैसे की जाती है।

अग्रिम धन्यवाद

Answer 1

कई ट्रैकिंग सिस्टम द्वारा उपयोग किया जाने वाला मौलिक विचार एक 1x1px छवि का उपयोग करता है जिसे अतिरिक्त जीईटी पैरामीटर के साथ अनुरोध किया जाता है। अनुरोध सर्वर लॉग फ़ाइल में जोड़ा गया है, तो कुछ आंकड़े उत्पन्न करने के लिए लॉग फ़ाइलों को संसाधित किया जाता है। तो एक minimalist क्लिक ट्रैकिंग समारोह इस प्रकार दिखाई देंगे:

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

AJAX उपयोगी नहीं होगी, क्योंकि यह एक ही मूल नीति (आप अपने ट्रैकिंग सर्वर से अनुरोध भेजने के लिए सक्षम नहीं होगा) के अधीन है। और आपको अपनी ट्रैकिंग स्क्रिप्ट में AJAX कोड जोड़ना होगा। यदि आप अधिक डेटा (कर्सर आंदोलनों की तरह) भेजना चाहते हैं तो आप निर्देशांक को एक चर में और समय-समय पर मतदान को जीईटी पैरामीटर में अद्यतन पथ के साथ एक नई छवि के लिए संग्रहित करेंगे।

अब वहाँ कई कई समस्याएं हैं:

• क्रॉस-ब्राउज़र संगतता - सभी ब्राउज़रों उस पल में कोई फर्क में ऊपर समारोह काम करने के लिए आप शायद कोड
20 अधिक लाइनों को जोड़ने के लिए होगा
• हो रही उपयोगी डेटा
  • कई पृष्ठों को कर रहे हैं निश्चित-चौड़ाई, केंद्रित है, तो कच्चे एक्स और वाई निर्देशांक जैसे ही आप क्लिक n पेज
  • कुछ पृष्ठों तरल-चौड़ाई तत्व के दृश्य ओवरले बनाना नहीं दूँगा, या min- और अधिकतम ऊंचाई के संयोजन का उपयोग
  • उपयोगकर्ताओं को विभिन्न फ़ॉन्ट का उपयोग कर सकते हैं कि उपयोगकर्ता की कार्रवाई के जवाब में पृष्ठ पर दिखाई देते
  • गतिशील तत्वों आकार
• आदि आदि

जब आपके पास ट्रैकिंग स्क्रिप्ट काम करती है तो आपको केवल एक उपकरण बनाने की आवश्यकता होती है जो कच्चे सर्वर लॉग लेता है और उन्हें चमकदार हीटमैप्स में बदल देता है :)

Answer 2

कैसे crazyegg यह होता है, लेकिन जिस तरह से मैं इसे करना होगा जो मैं करने के लिए AJAX से अधिक समय-समय पर भेजना चाहते हैं एक सरणी में माउस की घटनाओं स्टोर करने के लिए है की सही कार्यान्वयन विवरण पता नहीं बैकएंड – उदाहरण के लिए कैप्चर किए गए माउस ईवेंट एकत्र किए जाते हैं और सर्वर पर हर 30 सेकंड भेजे जाते हैं। यह हर घटना के लिए अनुरोध बनाने के तनाव को याद करता है, लेकिन यह भी सुनिश्चित करता है कि मैं अधिकतम 30 सेकंड डेटा खो दूंगा। आप अनलोड ईवेंट में भी भेजना जोड़ सकते हैं जो आपके द्वारा प्राप्त डेटा की मात्रा को बढ़ाता है, लेकिन आप इस पर निर्भर नहीं होंगे।

मैं इसे कैसे लागू (jQuery का उपयोग कर के रूप में मेरे वेनिला जे एस कौशल थोड़ा जंग लगी हैं) हैं, उन पर कुछ उदाहरण:

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

ध्यान दें कि मैं परीक्षण नहीं किया या किसी भी तरह से इस कोशिश की, लेकिन यह चाहिए आपको एक सामान्य विचार देते हैं।

Answer 3

यदि आप केवल बातचीत की तलाश में हैं, तो आप के साथ अपने <input type="button"> को प्रतिस्थापित कर सकते हैं। ये स्वचालित रूप से एक्स, वाई निर्देशांक के साथ सबमिट किए जाते हैं जहां उपयोगकर्ता ने क्लिक किया है।

jQuery में भी mousemove even binding का एक अच्छा कार्यान्वयन है जो वर्तमान माउस स्थिति को ट्रैक कर सकता है। मुझे आपका वांछित अंत परिणाम नहीं पता है, लेकिन आप प्रत्येक दूसरे या कुछ ऐसा माउस स्थिति के साथ अजाक्स कॉल भेजने के लिए टाइममूट (सबमिटमोउसपोजिशन, 1000) सेट कर सकते हैं।

Answer 4

मैं वास्तव में नहीं देखता कि आपको क्यों लगता है कि सभी को स्टोर करना असंभव है डेटाबेस में एक उपयोगकर्ता सत्र में अंक क्लिक करें?

उनके मोटो एक बार जब आपके पास पर्याप्त डेटा यह काफी बैच प्रक्रियाओं में गर्मी नक्शे बनाने के लिए आसान है इकट्ठा "कहाँ लोग क्लिक करें देखें" है।

लोग वास्तव में डेटाबेस, अनुक्रमण और शेडिंग को कम करके आंका रहे हैं। अंतर्निहित वास्तुकला के लिए पर्याप्त धन इकट्ठा करना यहां एकमात्र कठिन बात है :)

Answer 5

हीटमैप विश्लेषिकी कर्सर निर्देशांक को कैप्चर करने से कहीं अधिक जटिल हो जाती है। कुछ वेबसाइटें सही-गठबंधन हैं, कुछ बाएं-गठबंधन हैं, कुछ 100% -विड्थ हैं, कुछ निश्चित-चौड़ाई- "केंद्रित" हैं ... एक पृष्ठ तत्व को पूरी तरह से या अपेक्षाकृत, फ्लोट किया जा सकता है आदि। ओह, और वहां भी है विभिन्न स्क्रीन संकल्प और यहां तक ​​कि बहु-मॉनिटर विन्यास। document.onclick = function(e){ } (इस <a> और साथ काम नहीं करेंगे:

1. जावास्क्रिप्ट onClick ईवेंट संभालता है:

   यह इस प्रकार से HeatTest में काम करता है (मैं संस्थापकों में से एक हूँ, नियमों के कारण है कि प्रकट करने के लिए किया है) है <input> तत्वों, तत्व के भीतर //body/div[3]/button[id=search]और निर्देशांक एक रूप में आगे बढ़ने का तरीका)

2. स्क्रिप्ट रिकॉर्ड क्लिक किया तत्व की XPath-पता (के बाद से निर्देशांक विश्वसनीय नहीं कर रहे हैं, ऊपर देखें) को हैक करने की है।
3. स्क्रिप्ट सर्वर पर JSONP अनुरोध भेजता है (JSONP ब्राउज़र में क्रॉस-डोमेन सीमाओं के कारण उपयोग किया जाता है)
4. सर्वर इस डेटा को डेटाबेस में रिकॉर्ड करता है।

अब, दिलचस्प हिस्सा - सर्वर।

1. हीटमैप सर्वर की शुरूआत की गणना करने के में स्मृति एक ब्राउज़र
2. पेज
3. एक स्क्रीनशॉट ले जाता है रेंडर (हम क्रोमियम और IE9 का उपयोग करें) का एक आभासी उदाहरण,
4. तत्वों ढूँढता 'निर्देशांक और फिर हीटमैप बनाता है।

इसमें बहुत सी सीपीयू-पावर और मेमोरी उपयोग होता है। बहुत। इसलिए हमारे और क्रेजीईग दोनों सहित हीटमैप-सेवाओं में अधिकांश कार्य इस वर्चुअल मशीन और क्लाउड सर्वर के ढेर हैं।