How to track # ajax links in Analytics?
I have basic single page website with the normal Google Analytic code:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-##-##']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
However my links are like bookmarks - they basically slidedown the single page. My links when clicked are essentially pages but within the same template - they slide to reveal elements of content.
<a href="#section-3">about us</a>
Is there a way I can update the Analytics tracker or somehow track links? So in Analytics I will see people spent so much time on a page etc.
Use jQuery for this.
Have the Analytics in your head, notice cleaner code:
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = '//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>
And now place this in your footer where #main-navigation is an example of your UL > LI menu list. It will track all those pages.
jQuery(function($){
$("#main-navigation a[href*='#']").on("click", function(){
var $url = $(this)
_gaq.push(['_trackPageview', $url.attr('href')]);
console.log('_trackPageview', $url.attr('href'));
});
});
Also note that; My code using protocol and cleaner JavaScript is up to 2000x faster. http://jsperf.com/protocol-check-vs-hardcoded-string reference further http://mathiasbynens.be/notes/async-analytics-snippet
Try this. In the HEAD place this:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-##-##']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
In the FOOTER or in any other place - this:
jQuery(function($){
$("a[href*='#']").on("click", function(){
var $url = $(this);
_gaq.push(['_trackEvent', 'ajaxLink', $url.text(), $url.attr('href')]);
console.log('_trackEvent', $url.text(), $url.attr('href'));
});
});
And the HTML should be #Id reference to links. Such as:
<a href="#home-page">Home</a>
<br />
<a href="#about-us-page">About Us</a>
I used this for learn it.
UPD: Here is the example: http://jsfiddle.net/K2PcL/
Thanks.
You should be able to add page tracking to an onclick event. Try changing your links to something like this:
<a href="#section-3" onclick="_gaq.push(['_trackPageview', '/AboutUs']);”>about us</a>
上一篇: 用jQuery改变无序列表中的图像集