Question

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.

Answer 1

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