What You’ll Lose Without Event Tracking (And How to Set it Up)

What will you lose without using Google Analytics to track your visitor's site interaction?

The short answer is that you'll miss out on the journey a potential sale took to contact or not contact you. The more in-depth answer is that you'll lose all the details of that journey. 'Is my call-to-action compelling? Is my phone number visible enough? Is my audience engaged?' Those are just a handful of questions you won't be able to answer.

Even worse than not knowing the answers to those types of questions is assuming that what you're doing is best for conversions. Just because you got a few form submissions or a phone call doesn't mean you're done testing and improving. What if you had the knowledge that one of your call-to-actions outperforms all others two to one? Data like that can make the decision process more informed. One of the biggest marketing and web design hurdles for newer businesses (and old) is actually knowing what's working and what's not. Without information like user event tracking, decisions become all gut and no glory.

Here's How To Do It.

If implementing something like this is outside your comfort zone or you don't have access to do it, just pass along this article to the right person. If you don't have someone like that or that person can't help you out, we certainly can. Shameless plug over. Let's get into it.

Assumptions

The rest of this article assumes a couple of things:

1. You have jQuery installed before running this code.
2. Your document is ready.
3. A function '$' is defined.

Event Tracking

The full documentation for event tracking with Google Analytics can be found here. In short, whenever a user does something you want to know about you can send an "event" to your analytics account. This event can contain some identifying data along with it. The line below is what does this:

ga( 'send', 'event', [eventCategory], [eventAction], [eventLabel] );

I've left off a few arguments this function can accept for simplicity sake, but the code above will do the trick. From left to right the arguments are pretty self-explanatory. We're 'sending' an 'event' to 'ga' (Google Analytics). With that event, we can define a 'category', 'action' and 'label.' Whenever this code runs it sends an event to analytics, so in theory, you could send an event at any time for any reason. I would suggest that you only send events for things that are useful, like clicks and form submissions.

Event Arguments

The three event arguments after 'event' should be used to describe the event in a meaningful way. The first of the three is a category for our action. A click event, for example, would send something like 'button', 'link', 'phone' for a category. The second option, 'eventAction', will be our most basic descriptor. In our examples, it will be 'click' and 'form_submission.' The third argument is optional, but it's really where the magic happens. So far we would only know something like, "a button on our homepage was clicked." The third argument is where we identify which button was clicked. Was it the button in the header, sidebar, footer.

Examples

The most basic event to track is when users click anything that's clickable; links, buttons, phone numbers, etc.

Generic Link Click

This would be a catch-all code snippet that would capture a click event for any 'a tag' with an 'href' attribute:

$( '[href]' ).click( function() {ga( 'send', 'event', 'link', 'click', $( this ).attr( 'href' ) );}

The above code will send a click event whenever an HTML element with an 'href' attribute is clicked. It will also pass the destination of that 'href' along with it so we can easily track separate links.

Phone and Email Clicks

$( '[href*="tel:"]' ).click( function() {ga( 'send', 'event', 'phone', 'click', $( this ).attr( 'href' ) );}
$( '[href*="mailto:"]' ).click( function() {ga( 'send', 'event', 'email', 'click', $( this ).attr( 'href' ) );}


Button Click

$( 'button,input[type=button]' ).click( function() {ga( 'send', 'event', 'button', 'click', $( this ).val() );}


Form Submissions

The code below you would add to the confirmation page of a form submission or the confirmation message of a form submission. You may need to hook into a form submission callback if it's an ajax form. You'll want to replace '[FORM NAME]' with the name of the form. It should be available in some sort of variable present at the time of submission.
<script>if ( typeof(ga) == 'function' ) { ga( 'send', 'event', '[FORM NAME]', 'form_submissions' ); }</script>

Note that the above examples are very basic and you can most certainly extend to add even more information to your events.

The next step is to set up "goals" in Google Analytics based on these events. We'll go over the steps for that in a future post. Sign up below to receive our newsletter and be the first to know when that article comes out.