Please note: This article was written way back in 2015-07-14 on my own blog. I am moving relevant (interesting) articles over here. I made a few edits now.
Google Analytics can do some pretty awesome stuff, it's a near standard addition to any site. We use it to see how many (or little) people visit our site, from where they come and to where they go. Today's little experiment is all about tracking specific links within a website in a friendly and front-end happy way.
Turns out the Google Analytics API is quite powerful, and you can do a lot with it. When I designed this website I added a whole bunch of Call to Action type of links, and I figured it would be great to see just how valuable they would be to my end strategy. The simplest way for me to do that would be to treat the links as goals, and to track them specifically.
Let's build a reusable event tracker!
The plan is to create the google event tracker in such a way that it's easy to implement within your site, and can be reused as often as we need it to.
The Function
The tracker itself is by no means bulky code, but it's a hassle to rewrite everytime, especially if we can whittle it down to a single line call.
It really is as basic an example as it get's, but it's very useful and can provide a lot of value to your site.
$('.ga-tracker').on('click', function() {
// I want to know on what page the event fired, as my links are on many pages.
var LOCATION = window.location.href
// The category of the event. On my site I have two - general tracker and social trackers.
var CATEGORY = this.data('category')
// The action that takes place. Example: On my social tracker I made it 'share'.
var ACTION = 'Click'
// The label. I add the label we pass in track(); function and add the location.
var LABEL = LOCATION + ' > ' + this.data('label')
// Send data to Google Analytics
ga('send', 'event', CATEGORY, ACTION, LABEL)
})
Implementing this into your HTML
The event tracker above is a very basic one, and simply tracks specific links. Therefore our implementation is equally simple. We simply attach the class we named in the tracker we made in section 'B' of the above gist to the link we want to track:
<a href="#" class="ga-tracker" data-category="General" data-label="Link #1">This is my tracked link</a>
That really is it. If you click the link a few times you will see the results in Google Analytics under:
- Reporting > Behaviour > Events
Where to go from here
This is a tiny little function that does a tiny bit work. It's basic. So what can we do with:
- The actual data
- Get more useful data
Working with the data
The first thing I noticed was that the event data is cool, but not very friendly and quite hidden. I created a custom dashboard, and that was cool, but not really all that exciting to me. It didn't tell me all that much.
So I set up Goals, which basically turns those events into conversions, which is really what you want to do. Now you can look at the events being fired as people doing what you want them to do. If that number is high, then good stuff! If it's low against your page views and unique visits, then you have a great opportunity to go figure out what you are doing wrong!
That is SO beyond the scope of this article though, so let's get back to code speak.
Get more useful data
My example tracks links. Simple as that. But there are so many other things people do on websites that we can track. Imagine the possibilities of knowing when people scroll?
In terms of UX Design we can track how valuable that fancy carousel feature really is.
There is so much we can do, so I guess a little bit of experimentation is called for. Stay tuned!
Testing
Since Google Analytics are generally delayed a bit with their reporting, testing can be a bit of a pain in the ass. There is a Chrome Extention that you can use to check (if you don't mind sifting through console messages). If you do use it you can look for something like this:
Running command: ga("send", "event", "Social", "Share", "Facebook : http://localhost:4000/blog/code/track-events-with-google-analytics/")
The simplest way to test is to simply use Google Analytics live view. It's somewhat dodgey, but does work fairly well.
Top comments (2)
Overview
Events are user interactions with content that can be tracked independently from a web page or a screen load. Downloads, mobile ad clicks, gadgets, Flash elements, AJAX embedded elements, and video plays are all examples of actions you might want to track as Events.
You can also learn Google Analytics here: hackr.io/tutorials/learn-google-an...
If you're unfamiliar with events in Google Analytics you should first read the article About Events in the Analytics Help Center.
Implementation
Event hits can be sent using the send command and specifying a hitType of event. The send command has the following signature for the event hit type:
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
Event fields
The following table summarizes the event fields:
Field Name Value Type Required Description
eventCategory text yes Typically the object that was interacted with (e.g. 'Video')
eventAction text yes The type of interaction (e.g. 'play')
eventLabel text no Useful for categorizing events (e.g. 'Fall Campaign')
eventValue integer no A numeric value associated with the event (e.g. 42)
For a more in-depth description of each of these fields, see Anatomy of an Event in the Analytics Help Center.
Examples:
The following command sends an event to Google Analytics indicating that the fall campaign promotional video was played:
ga('send', 'event', 'Videos', 'play', 'Fall Campaign');
Note that as with all send commands, the fields passed in the convenience parameters may also be specified in the fieldsObject. The above command could be rewritten as:
ga('send', {
hitType: 'event',
eventCategory: 'Videos',
eventAction: 'play',
eventLabel: 'Fall Campaign'
});
For more details, examples, and best practices for sending hits, see the Sending Data to Google Analytics guide. For more details on the calling signature of the send command, see the command queue reference.
Outbound link and form tracking
When a user clicks a link that points to another page on your site, that page typically sends a pageview hit as the user arrives. Because there's a series of pageviews, Google Analytics can figure out on the back end where the user navigated to (and from). But if a user clicks a link or submits a form to an external domain, that action is not captured unless you specifically tell Google Analytics what happened.
Outbound link and form tracking can be accomplished by sending events and specifying the destination URL in one of the event fields. The following event handler function can be used to send outbound link click events to Google Analytics:
function handleOutboundLinkClicks(event) {
ga('send', 'event', {
eventCategory: 'Outbound Link',
eventAction: 'click',
eventLabel: event.target.href
});
}
Tracking outbound links and forms can be tricky because most browsers will stop executing JavaScript on the current page once a new page starts to load. One solution to this problem is to set the transport field to beacon:
function handleOutboundLinkClicks(event) {
ga('send', 'event', {
eventCategory: 'Outbound Link',
eventAction: 'click',
eventLabel: event.target.href,
transport: 'beacon'
});
}
Hey bud,
Not sure I understand your comment? Is something wrong with my post?