2011-03-15 18 views
10

मैं अपनी साइट के लिए एचटीएमएल 5 इतिहास का उपयोग कर रहा हूं, इसलिए, जिन उपयोगकर्ताओं के ब्राउज़र इसका समर्थन करते हैं, उनके लिए लिंक पर क्लिक करने से पूरे पृष्ठ को पुनः लोड नहीं किया जाता है, बल्कि केवल मुख्य क्षेत्र।एचटीएमएल 5 इतिहास के साथ गूगल एनालिटिक्स का उपयोग कैसे करें?

Google Analytics इन आंशिक पृष्ठ लोड को ट्रैक नहीं करता है। मैं इसे ट्रैक करने के लिए कैसे प्राप्त कर सकता हूं जैसे कि यह उन उपयोगकर्ताओं के लिए करता है जिनके पास HTML 5 इतिहास समर्थन नहीं है?

उत्तर

17

आपको अपनी नई सामग्री लोड होने पर हर बार _trackPageview फ़ंक्शन को कॉल करके अतिरिक्त पृष्ठदृश्य पंजीकृत करने की आवश्यकता है। इसे 'वर्चुअल पेजव्यू' कहा जाता है लेकिन वास्तविक रूप में Google Analytics में पंजीकृत है। पृष्ठ के पथ को सेट करने के लिए आपको फ़ंक्शन में अतिरिक्त पैरामीटर जोड़ने की आवश्यकता है:

 _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); 
     _gaq.push(['_trackPageview', '/new/content']); 
+0

प्रत्येक बार सामग्री लोड होने पर मैं इसे कैसे कॉल करूं? क्या मैं पूरी स्क्रिप्ट को AJAX के माध्यम से वापस आने वाले '/ new/content' को प्रतिस्थापित करने वाले नए यूआरएल के साथ पुनः लोड करूं? – paulruescher

+0

बस इसे यहां वर्णित विंडो.popstate पर कॉल करें जैसे https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate - यदि आप history.js का उपयोग करते हैं https://github.com/balupton/History .js/(अनुशंसित) आपने अपने 'स्टेटचेंज' ईवेंट कॉलबैक में डाल दिया है। Google ने अपनी 'पुश' विधि लागू की है - जो हैशबैंग्स का उपयोग करते समय अपने कस्टम डेटा – con

6

यह नवीनतम सार्वभौमिक ट्रैकिंग कोड के लिए है।

हाल ही में, मुझे एक नई परियोजना के लिए अपना जवाब दोबारा बदलना पड़ा। मैंने कुछ मुद्दों पर ध्यान दिया कि मुझे साफ करना चाहिए।

प्रोग्रामेटिक रूप से पृष्ठदृश्य भेजने के लिए, आप केवल पथ और क्वेरी जैसे ही भेजना चाहते हैं। http://example.com/path/to/resource?param=1 के लिए हम /path/to/resource?param=1 भेजेंगे।

कुछ एसपीए अपने यूआरएल के लिए हैशबैंग्स (#!) का उपयोग करते हैं। तो हमें हैशबांग के बाद कुछ भी भेजने की जरूरत है। जैसे http://example.com#!path/to/resource हम /path/to/resource?param=1 भेज देंगे।

मेरे समाधान का पहला संस्करण गलत था और यूआरएल में हैश के सभी यूआरएल के लिए असफल हो जाएगा। साथ ही, जैसा कि मैं jQuery + History.js प्लगइन का उपयोग कर रहा था, मेरा समाधान statechange सुनने के साथ था।

पृष्ठदृश्य भेजने के लिए इस नए कोड का उपयोग करें। यह अधिक लचीला है और हैशबैंग और इतिहास दोनों के लिए प्रदान करता है।

var loc = window.location, 
     hashbang = "#!", 
     bangIndex = location.href.indexOf(hashbang), 
     page = bangIndex != -1 ? loc.href.substring(bangIndex).replace(hashbang, "/") : loc.pathname + loc.search; 

    ga('send', 'pageview', page); 

आप Hashbangs विशेष रूप से उपयोग नहीं करते हैं, तो बस मैच के लिए जैसे hashbang = "#!", बदल hashbang = "#@",


यूआरएल में परिवर्तन होने पर इसका दूसरा भाग पता लगा रहा है। इसके लिए, आपको जो भी लाइब्रेरी आप उपयोग कर रहे हैं, उसके दस्तावेज़ों से आपको पता लगाना होगा।

jQuery + History.js प्लगइन के लिए, नीचे दिए गए कोड काम करता है

$(window).on('statechange', function() { 
    //put code here 
}); 

अधिक जानकारी https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications


$(window).on('statechange', function() { 
    var loc = window.location, 
    page = loc.hash ? loc.hash.substring(1) : loc.pathname + loc.search; 
    ga('send', 'pageview', page); 
}); 

में पाया जा सकता 0
0

जैसा कि ईवान पहले से ही कहा गया है, आपको window.popstate ईवेंट में एनालिटिक्स में पृष्ठदृश्य भेजना चाहिए। तो, सादे जावास्क्रिप्ट में, आप कहा जाता है यदि:

history.pushState({'statedata':''}, 'title', '/new/page/url'); 

आप बस जोड़ना चाहिए:

window.addEventListener('popstate', function(event) { 
    ga('send', 'pageview'); 
}); 
असल

नई यूनिवर्सल ट्रैकिंग कोड स्वत: वर्तमान URL हो जाता है, वास्तव में जरूरत है ताकि आप नहीं है अतिरिक्त पैरामीटर पास करने के लिए।

+0

को प्रेषित करने के लिए पृष्ठभूमि में Google पर एक पृष्ठ को कॉल करता है। – frostymarvelous

संबंधित मुद्दे