In the previous blog Getting Started with Google analytics, we have discuss how to track event using Google Analytics.

One of our client ask that we would like to measure goal conversion for certain user actions on our page in order to gauge how effective the user? and marketing messages are. We can easily setup goals that are indicated by loading certain pages (such as a confirmation page), but not for anything else. If possible, we would ask you to set up event tracking for some events. ex:- we are already measuring hits to the page rather than the button of page

With the help of Google Analytics module we can measuring hits to the page, ex:- how many time this page has opened.
Now we are going to show how to track an individual event such as how many times a button was pressed, or how many times a particular item was used in a web game. jQuery is also an invaluable tool for Google Analytics, as it allows us to reliably target clicks on links of a certain type and send some special event to Google Analytics.

Locate elements on your site by classes or id's and use custom variables to add more accurate information to the events as they are tracked in Google Analytics.

Identify the unique ID or class name of the element(s). If you?re not sure what it is, an easy way to identify the ID/class is to inspect it. In this example, I right-clicked on the more blogs button and selected ?Inspect Element?:

And looked at the code that appeared in the inspector:

jQuery code for Google event tracking

jQuery(document).ready(function() { jQuery('.more_blogs a').click(function() { ga('send', 'event', 'button', 'click', 'label'); }); });

Same links on multiple pages

let's say you have the same element on multiple pages and you want to distinguish which page your users are interacting with your content, it would be nice to know what URL they are on when the event is collected in Google Analytics. So let's add a custom variable

jQuery(document).ready(function() { var pathName = window.location.pathname; jQuery('.more_blogs a').click(function() { ga('send', 'event', 'More Blogs link', 'click', pathName); }); });

Now we have added the current page URL to the "Label" section of the event tracking code, "window.location.pathname" grabs the current page URL, and with some handy use of concatenation, we can create a variable named pathName and use it in our event code.

Multiple links in same category

Consider if you have a bunch of links in the same category, in this way you can use the link text to distinguish each one from the others... Another useful variable would be to get the text of the link the user is clicking on

jQuery('.more_blogs a').click(function() { var linkText = jQuery(this).text(); ga('send', 'event', 'More Blogs link', linkText, 'Clicked'); });

In above case we created a variable named linkText to grab the text of the link, just make sure you place it inside the click function and use jQuery(this) or you'll grab all the links on the page that have the class or ID your targeting.

Grabs the title of the current page when interacting with a link.

Another useful piece to collect to distinguish what page your users are on when interacting with a link is grabbing the title tag. then grabs the h1 of the current page.

jQuery(document).ready(function() { var pathName = window.location.pathname; var pageTitle = jQuery('h1').text(); jQuery('.more_blogs a').click(function() { var linkText = jQuery(this).text(); ga('send', 'event', 'pageTitle', 'linkText', pathName); }); });

Place the code on your page, anywhere after the link to jQuery. If you don?t already use jQuery on your page, add this line of code to the page first:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Once you add the code to your page, a great way to immediately test it is by using Real-Time Analytics in Google Analytics - it appears above ?Audience? in the sidebar. Go specifically to the Events section within Real-Time.