With inline content being loaded via ajax, you are loosing a lot of interesting usage data. These can be tracked using Google Analytics Events or by sending a Pageview.

LETS SHOW IT ALL FIRST

(function($) {
track = { 
   config:{
	pageName	 : "Your Page",
	eventSelector	 : ".trackEvent a, .trackEvent",
	pageviewSelector : ".trackPage a, .trackPage",
   },
 
  init			: function(){	
	  
   $("body").delegate(this.config.eventSelector	,"click", function(){	  
    
	// Navigation / Readmore / Apply / FAQ / Contact / Share
    var cat		= $(this).attr("data-track-cat")    || "Navigation";
    var action  = $(this).attr("data-track-action") || "Click";
    var label   = $(this).attr("data-track-label")  || $(this).text() ;
		
    this.sendEvent(cat, action, label);	 
	  
  });

  $("body").delegate(this.config.pageviewSelector, "click", function(){
	  
   var label =  $(this).text() +" - "+ this.config.pageName		
   var page  =  "/"+label.split(' ').join('-').toLowerCase()+"/";
	  
   this.sendPageview(page,label);	
	  
  });
  
  },
  
  sendEvent: function(cat, action, label){
	   
  ga('send', 'event', {
	'eventCategory'	: cat ,
	'eventAction'	: action,
	'eventLabel'	: label,
	'eventValue'	: 1
  }); 
  },
  
 sendPageview : function(page,label){
	  
  ga('send', {
	'hitType': 'pageview',
	'page'	 : page ,
	'title'	 : label
   });
 }
};

/* INIT */
track.init();

})(jQuery);

(function($) {

track = {

config:{

pageName : "Your Page",

eventSelector : ".trackEvent a, .trackEvent",

pageviewSelector : ".trackPage a, .trackPage",

init : function(){

$("body").delegate(this.config.eventSelector ,"click", function(){

// Navigation / Readmore / Apply / FAQ / Contact / Share

var cat = $(this).attr("data-track-cat") || "Navigation";

var action = $(this).attr("data-track-action") || "Click";

var label = $(this).attr("data-track-label") || $(this).text() ;

this.sendEvent(cat, action, label);

});

$("body").delegate(this.config.pageviewSelector, "click", function(){

var label = $(this).text() +" - "+ this.config.pageName

var page = "/"+label.split(' ').join('-').toLowerCase()+"/";

this.sendPageview(page,label);

});

sendEvent: function(cat, action, label){

ga('send', 'event', {

'eventCategory' : cat ,

'eventAction' : action,

'eventLabel' : label,

'eventValue' : 1

});

sendPageview : function(page,label){

ga('send', {

'hitType': 'pageview',

'page' : page ,

'title' : label

});

}

};

/* INIT */

track.init();

})(jQuery);

The above allows to automate tracking by attaching simple classes and use HTML5 data attributes to assign category, action and label. Direct tracking is also possible. Lets split it up :)

EVENT TRACKING INIT

$("body").delegate(".trackEvent a, .trackEvent","click", function(){	  
    // Navigation / Readmore / Apply / FAQ / Contact / Share
    var cat	= $(this).attr("data-track-cat")    || "Navigation";
    var action  = $(this).attr("data-track-action") || "Click";
    var label   = $(this).attr("data-track-label")  || $(this).text() ;
		
    this.sendEvent(cat, action, label);	 
	  
  });

$("body").delegate(".trackEvent a, .trackEvent","click", function(){

// Navigation / Readmore / Apply / FAQ / Contact / Share

var cat = $(this).attr("data-track-cat") || "Navigation";

var action = $(this).attr("data-track-action") || "Click";

var label = $(this).attr("data-track-label") || $(this).text() ;

this.sendEvent(cat, action, label);

});

This monitors links with the class .trackEVENT attached and fills the event data using HTML5 data attributes. All attributes have default values assigned.

A possible link would look like this:

<a href="#" class=".trackEvent" data-track-cat="Subscribe" data-track-action="View" data-track-label="All my news!">Subscribe to my news!</a>

1	<a href="#" class=".trackEvent" data-track-cat="Subscribe" data-track-action="View" data-track-label="All my news!">Subscribe to my news!</a>

The sendEvent function than sends this to Google Analytics.

PAGEVIEW TRACKING

$("body").delegate(".trackPage a, .trackPage", "click", function(){
	  
   var label =  $(this).text() +" - "+ this.pageName		
   var page  =  "/"+label.split(' ').join('-').toLowerCase()+"/";
	  
   this.sendPageview(page,label);	
	  
});

$("body").delegate(".trackPage a, .trackPage", "click", function(){

var label = $(this).text() +" - "+ this.pageName

var page = "/"+label.split(' ').join('-').toLowerCase()+"/";

this.sendPageview(page,label);

});

Much simpler, this just gets the element text and submits the click as a new Pageview. The label gets the pagename attached and the actual page url is constructed from the label. The sendPageview function than sends this to Google Analytics.

DIRECT USE

track.sendEvent(cat, action, label);

track.sendPageview(page, label);

track.sendEvent(cat, action, label);

track.sendPageview(page, label);

Really simple and effective way within a simple OnePager or a bigger web application. BTW I am using delegation to make sure that also links within AJAX content can be tracked.

Google Analytics Custom Event Tracking – jQuery

LETS SHOW IT ALL FIRST

EVENT TRACKING INIT

PAGEVIEW TRACKING

DIRECT USE

Enjoy coding …

Alexander