How to track Google Analytics anchor clicks using Universal Analytics

Question

I'm trying to implement anchor (index.html#anchor) tracking according to this related question: How to track anchor tags with Google Analytics

I use anchors to launch javascript easter eggs upon entering the website and I would like to track all the anchors as they would be a different pages (urls).

So I would have tracked:

link.html                 20 pageviews
link.html#anchor1         5 pageviews
link.html#anchor2         8 pageviews

The javascript easter eggs functions are currently loaded like this:

    $(function () // on page load
    {
      if(window.location.hash.slice(1) != "")
        launchEasterEgg(window.location.hash.slice(1));
    });

    $(window).bind('hashchange', function ()  //hash change detected
    {
      var hash = window.location.hash.slice(1);
      launchEasterEgg(hash);
      return true;
    });

I'm not sure whether I should launch the tracking code on:

• "hash change detected" + "on page load"
• OR add directly to the links like: <a href="#anchor" onclick="eventTrackingFunction()">link</a>
• OR just somehow set: _gaq.push(['_setAllowAnchor', true]); as I did in the previous version of GA code

Also I don't quite understand what type of Google Analytics Event should I track (https://developers.google.com/analytics/devguides/collection/analyticsjs/events)

Apart from the sample question at the top, I'm using Universal Analytics so my tracking code is different:

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXXX-X', 'mydomain.com');
    ga('send', 'pageview');
  </script>

Answer 1

I've managed to get it working by myself: I now track visitors when Easter egg is launched:

function launchEasterEgg(hash)
{
  ga('send', 'pageview', '/#'+hash); // track hash
  // + my function code
}

For tracking visitors that don't launch Easter egg I use:

$(function () // on page load
{
  if(window.location.hash.slice(1) != "")
    launchEasterEgg(window.location.hash.slice(1));
  else
    ga('send', 'pageview'); // track no hash pageview
});

Of course I load the Universal analytics code before (without the "send pageview" line).