What is your most versatile do-anything bit of code?

Adrian Kirsten — Mon, 19 Jun 2017 12:47:55 +0000

That bit of code that you almost depend upon to save your ass in just about any situation, and carry with you in your developer's toolbox.

Let me begin

This piece of code has travelled with me for at least the last 4 years. It's changed a bit here and there, but the overall structure & purpose has remained the same throughout.

jQuery(document).ready(function($) {
  $(".c-reveal").click(function(e) {
    var target = $(this).attr('href');
    $('c-toggle').addClass('c-inactive');
    if (!$(target).hasClass('c-inactive')) {
      $(target).addClass('c-inactive');
    } else {
      $(target).removeClass('c-inactive');
    }
    e.preventDefault();
  });
});

The most simple use case for demonstration would be to simply show and hide a div. Let's look at the HTML below:

<a href="#my-div-name" class="c-reveal">Show / hide this div</a>
<div id="my-div-name" class="c-inactive">
    This is mind-blowing div contents
</div>

In css I have several helper classes, one of which is .c-inactive {} which basically removes the attached element off screen. Add to this some transitions and you have a pretty robust thing.

That simple bit of Jquery can power pretty much anything:

Show / hide divs
Modal windows
Accordion types
Etc

Tracking Events with Google Analytics

Adrian Kirsten — Tue, 13 Jun 2017 11:50:08 +0000

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.

DEV Community: Adrian Kirsten