Google Analytics gives you insights into how visitors use your site, how they arrived on your site, and how you can keep them coming back. Liferay includes built-in support for Google Analytics out of the box, allowing administrators to make use of Google’s tool set for analyzing site traffic data. The Google Analytics functionality can be turned on and off when needed through the liferay Control Panel.

When Google Analytics is turned on, the theme (top_js.jspf) calls the Google Analytics tracking API to create a global object _gaq for asynchronous tracking. The default out of the box functionality tracked by Liferay are page views, via the API call _gaq.push([‘_trackPageview’]);

But what if you want more information in your Reports than just Liferay Page Views? What if you want to track user actions within either the out-of-the-box Liferay portlets or your own custom portlets? Then Event tracking is your answer.

Events are user interactions with content that can be tracked independently from a web page or a screen load. Downloads, ad clicks, gadgets, Flash elements, AJAX embedded elements, and video plays are all examples of actions that you might want to track as Events.

When you set up Event tracking, you can define up to five of the following components, and associate them with individual Events:

Category: The primary divisions of the types of Events you have on your site. Categories are at the root of Event tracking, and should function as a first way to sort Events in your reports. Videos and Downloads are good examples of categories, though you can be as specific or broad as your content requires.

Action: A descriptor for a particular Event Category. You can use any string to define an Action, so you can be as specific as necessary. For example, you could define Play or Pause as Actions for a Video. You could also be more specific, and create an Action called Video almost finished to trigger when the play-back slider on a video reaches the 90% mark.

Label: An optional descriptor that you can use to provide further granularity. You can specify any string for a label.

Value: A numerical variable. You can use explicit values, like 30, or inferred values based on variables you define elsewhere, like downloadTime.

Implicit Count: A count of the number of interactions with an Event Category. Implicit Count does not appear in the standard Google Analytics reports, but you can access this data via API.

Visit the Anatomy of Event tracking section in the Developer Guide for more information on each of these components.

The values for these components display in the Event Reports. The more organized you are about setting them up, the easier it will be to read and interpret your reports. In your reports, the titles of individual Events are based on these component names. For example, Events in the Category Videos, with the Action Play, and the Label Funny will appear as Videos + Play + Funny in your reports.  The API call to generate this Event would be _gaq.push([‘_trackEvent’, ‘Videos’, ‘Play’, ‘Funny’]);

This tracking code can be used in various places in Liferay.  For example, it could be placed in a custom theme to globally track any button pushes on the site.  To do this if you are using Alloy-UI, you could add the following JavaScript to the theme’s main.js file like so:

Liferay.on('allPortletsReady',
  /* This function gets called when everything on the page is loaded, including the portlets. */
  function() {
    // Track any button push
    AUI().all('button').on('click', function(a) {
      _gaq.push(["_setDomainName", "none"]); // used for localhost testing
      _gaq.push(['_trackEvent', 'Buttons', 'Click', a.target.get('id')]);
    });
  }
);

Or say you want to track all the clicks on the ABC Company Announcements Portlet on XTIVIA’s Liferay Demo home page.

Snap-2013-06-27-at-14.55.49

You can add JavaScript to just this single page by going to the Manage dropdown and selecting Page.

Snap-2013-06-27-at-21.53.22

Select the JavaScript option from the Manage Page dialogue.

Snap-2013-06-27-at-21.57.51

Add the following code to the JavaScript window.

Snap-2013-06-27-at-22.05.34

You can use either Alloy UI or JQuery if it is available in your theme or portlet.  Basically you just have to use a CSS selector to find the element you want to associate an event to, add an event handler to capture the user interaction and use the _gaq.push API call to generate the event.
Login into your Google Analytics account and you can see the Events getting tracked via their Real-Time reports option.
Snap-2013-06-27-at-22.26.24
Snap-2013-06-27-at-22.35.24
Share This