Analytics provides great features to webmasters to view, analyse web traffic, top links and targeted countries. Analytics provides a feature where we can use goals to setup Google Analytics Events for tracking button clicks, cart and checkout events.

How Event Tracking Works

By binding a click event to link, cart button or checkout button we can track events. Analytics tracks user ip address so multiple clicks from same user treated as single click.

To start tracking link clicks we need to follow three steps:

• Signup for Google Analytics (if not already done) and add the Analytics tracking code to website header.
• Add Goals and Configure events for your desired links or button clicks.
• Add Event tracking code to website and configure links or buttons to work with event tracking code.

We skip the first step which is adding Google Analytics Universal Tracking code to website. Which is basic requirement for adding event tracking to website if its not already done, register one from analytics.google.com

Add Goals from Google Analytics Dashboard

To add goals –

• Open Analytics Dashboard
• Navigate to Admin Page (which is in left sidebar with gear icon, check the screenshot)

• From admin page click on Goals under View as shown in screenshot below

• We can now see the page with all goals (if any added before) and option to add new goal.
• Click on Red Button – NEW GOAL and which opens a new page with form and pre defined options to choose from as shown in below screenshots

• In form while adding a goal choose “Custom” option for Goal setup step as shown in above screenshot
• In next step called Goal Description add goal name of your choice, and then choose “Event” option for Type selection list as shown in below screenshot

• In next step add goals “Category” name, “Action” type which we are going to use exactly same values while adding event tracking code to website. We can ignore “Value” and “Label” fields because we can dynamically populate them later.

Save the goal and thats is all we are now ready to implement event tracking to website.

Adding Event Tracking Code to Website

To add event tracking code to website pages (where ever required), we need to add the following snippet to website header or footer. Tracking code must be inserted after placing universal analytics code.

We will use the example category name and action type we used in this tutorial as shown in above screenshots.

Assume we have a “Contact Owner” button for hotel listing item as shown below:

<a href="/contact_owner?id=hotelId" class="contact_owner" >Contact Owner</a>

We can bind event tracking to the button making sure class name is same for all hotel listing items (in example – “contact_owner”) as shown below:

<script type="text/javascript">
    jQuery(".contact_owner").on("click", function(event){
         event.preventDefault(); /* ignore this line if links are set to open in new window */
        var tragetLink = jQuery(this).attr('href');
         ga("send", { 
             hitType: 'event',
             eventCategory: 'Enquiry',
             eventAction: 'Click',
             eventValue: jQuery.data('hotelid'), //dynamically populated event value
             eventLabel: tragetLink //dynamically populated label
         });
        /* open a target link after event tracked, ignore the following code if links are set to open in new window */
       setTimeout(function(){
          document.location.href = tragetLink;
       }, 250);
      /* open a target link after event tracked, ignore the above code if links are set to open in new window */
    });
</script>

In the above example the eventValue and eventLabel values are optional and not required, you can use whatever you like to show in report.

Whenever user clicks on the link which is bound to event tracking will record a count in analytics dashboard. Events reports are viewable from Left Sidebar -> Behavior -> Events. To see if the event tracking working immediately after adding code, check in Real-Time -> Events of Analytics dashboard Left Sidebar.