The New 'Universal' Google analytics script on an AJAX based website

Question

Google analytics now comes in two options: 'Classic' and the new 'Universal' which has more features. (Actually the 'Universal' analytics has been available to paying customers for a while, but now its available for free!)

With the 'Classic' analytics, which looks like this:

<script type="text/javascript">
   var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  _gaq.push(['_trackPageview']);

  (function() { SOME MORE CODE
 })(); 
</script>

I have found from much googling that to track Ajax based websites (i.e. where the pages are loaded by AJAX but the navigation menu remains static and never refreshes), you can add the above code to the main index.html which contains the navigation menu and then add javascript events to the page links in the menu, so that...

<ul>
 <li><a href="contact.html">Contact</a></li>

becomes

<ul>
 <li><a onclick="_gaq.push(['_trackPageview', '/contactpage']);" href="contact.html">Contact</a></li>

(where '/contactpage' is what the page will be called in Analytics - we can choose any title). Now the analytics will start tracking these pages too.

But I can't find a clear guide on how to do the same kind of thing for the 'Universal' analytics which looks like this:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyt...SOME MORE CODE...
  '//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'mydomain.com');
  ga('send', 'pageview');
</script>

Do I make my links look something like this?:

<ul>
 <li><a onclick="ga('send', 'pageview', '/contact');" href="contact.html">Contact</a></li>

Or would this be better?

<ul>
 <li><a onclick="ga('send', 'pageview', {'page': '/contact','title': '/contactpage'});" href="#">Home</a></li>

Can someone please advise? I'm new to Google analytics and therefore still learning the ropes!

Many thanks in advance.

Answer 1

Your last code block looks fine, except the "title" is more for the page friendly tag. In which case I'd advise something like

ga('send', 'pageview', {'page': '/contact','title': 'Contact Page'});

or if you wanted to differentiate contact page clicks from just plain old standard page loads

ga('send', 'pageview', {'page': '/contact','title': 'Contact Page -- Ajax Load'});

Answer 2

To distinguish virtual urls from real urls:

ga('send', 'pageview', {'page': '/virtual-pages/contact', 'title': 'Contact Page--Ajax
Load'});