Setting Up Google Analytics Event Tracking

Ever visit the Goals or Events Reports in Google Analytics (GA) and wonder how those got there? Let’s talk through it with the quick demo of how to setup event tracking and goals in GA.

⇜ ⇺ ⇽ ✰ ➳ ➯ ➺ 

Event tracking is helpful in monitoring all sorts of event types.
These include:

  • Destination (did your users make it to a particular page?);
  • Dwell time (how many visitors really stayed on a page long enough to read it or to watch a video?);
  • And the most useful, click event (did they click that button?).

In this demo we’ll setup an onclick event to track and tie that in to a GA goal we setup.

The Markup

There are various attributes we can add to our event, these include (a) label, (b) category, (c) event, and (d) one other.

To initially send the information to GA, we’ll use the following setup:

<!-- Here is the raw language, this will be put it an href -->
onClick="ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value, {‘NonInteraction’: 1});"


<!-- Here's the code from above, but plugged into an href -->
<a href="www.example.com" onClick="ga('send', 'event', 'category', 'action', 'label');">


<!-- Here's something that is more or less ready to use -->
<a href="www.example.com" onClick="ga('send', 'buttonClick', 'specialOffer', 'requestCoupon', 'productA');">
<!-- end -->

Try It Out

With the link above on a page, for instance this one, we should now be able to get into GA and start to see the events being tracked.

TRACK IT

Each time this button is clicked we should see an account of it in the GA Real-Time Reports dashboard in the events area.

google analytics event tracking real-time dashboard test

real-time dashboard test

BUT! Perhaps, you want to do this using jQuery instead. Eh? Alright, let’s do that one too.

Track Click Events in GA Using jQuery

There are a couple of parts.

  1. Include an id or a class on your link(s)
  2. Include jQuery
  3. Send the information to GA

Here we go.

<!-- Draft up a link, or more than one if you like. --->
<a id="link" href="#">LINK</a>
<a id="button" href="#"><button>Button</button></a>
<a id="other-jazz" href="#">Other Jazz</a>


<!-- Be sure you've got jQuery piping through things --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<!-- Call and do all of that JS/JQ weirdness --->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#link').click(function() {
 ga('send', 'event',  'onpage-click', 'linkClick', 'happened');
});
jQuery('#button').click(function() {
 ga('send', 'event',  'onpage-click', 'buttonClick', 'happened');
});
jQuery('#other-jazz').click(function() {
 ga('send', 'event',  'onpage-click', 'otherClick', 'happened');
});
});
</script>

How’s about a little demo? 

LINK

Other Jazz

 

Success!

analytics-w-jquery

This post presumes you’re using Universal Analytics. If you’re using a newer or an older version of GA, you’ll need to have the mark-up that goes along with it. GA is (as of 9/22.17) pushing users to Google Tag Manager. The latest tracking snippets provided by GA include a reference to Google Tag Manager.

Resources:

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

—http://convergeconsulting.org/2014/03/05/event-tracking-in-google-analytics-using-jquery-in-6-steps/

That’s it. Ω

Leave a Reply

Your email address will not be published. Required fields are marked *