Get 10 Free 
Remember last year, when mobile-specific sites were hot and everyone wanted that specialized “mobile-tuned” presence online? How quickly things change. Skip ahead 493 days and here we are, smack in the middle of the Responsive Revolution. One site, one code, with one new Analytics to rule them all.
Analytics.js is a new and more flexible way to glean some insights about how users interact with your site. It’s built into Universal Analytics, which itself is designed to give you a lot more control over the entire process.
Let’s start with New Event Tracking Snippet in Analytics.js, which is:
ga('send', 'event', 'category', 'action', 'label');
or
ga('send', 'event', 'form', 'submitted', 'appointment');
[https://developers.google.com/…/analyticsjs/events]
You can call this in a simple jQuery command like .click for a button, or you can do it inline if you prefer. I won’t get into details of that here, as it’s a little outside the scope of this article.
But let’s take this simple event and think of ways to put it to some real analytical use:
AJAX Form Submissions – Lots of sites today use AJAX to call php or jQuery, perform the database or email functions, and keep the user on the page with some pixellated instant gratification. Just call the snippet above on .done to trigger your tracking event.
Navigation Clicks – If you repeat certain key nav links in the footer, you might also want to call a snippet to track <nav> vs <footer>. That would look something like this:
ga('send', 'event', 'link', 'clicked', 'nav');
Calls to Action – Any inbound marketing campaigns worthy of the name has a CTA. And it doesn’t matter if it’s in a block quote, an image banner or contextual deep linking – with Analytics.js, you can track this too.
Slider Buttons – I don’t have any hard numbers in front of me, but anecdotally it sure seems like 90% of the websites designed this year have a home page slider. Ever wonder if slide 4 ever gets anyone to click through to your Services page? Here’s how you get that answer:
ga('send', 'event', 'slider', 'clicked', 'slide4');
FAQ – Let the content writers know which is the most frequently clicked FAQ question or feature in a list.
UI Dialog – Web app developers know the importance of creatively crafted Dialog box. Yes, they’re all jQuery and dynamic functionality, but that’s no reason they can’t also be tracked. Just use this:
ga('send', 'event', 'alert', 'ok', 'X was deleted');
Now for the Grand Finale
At this point, it all might seem a little underwhelming – if we’re being honest with ourselves, there’s not really anything new here so far. That’s true enough, but just stay with me here. Now I’m going to suggest we use Analytics.js to do something truly beneficially for our industry in general, and for all the responsive statistical data wizards toiling away in our companies.
Let’s start tracking these events with the browser width as a variable.
Coders and designers take great care with each different device-optimized version of a site. They make a series of highly-considered decisions that are intended to make sure the user experience is one that drives traffic. But it’s not out of line to suspect that some of these designs might be more effective than others.
As marketers, we want to know which layouts and designs work, and which ones don’t. If you’ve ever wanted a way to track how users respond to content as it changes from one device to another, here it is:
Start by creating a variable when your document is ready:
$( window ).resize(function() {
var r_width = $( window ).width();
});
Now call that on Event Trigger:
ga('send', 'event', 'contact-form', 'submitted', r_width);
This data will help you trim the fat of the standard resolution stats you receive. And I’m all about getting exact event-triggered data to help increase campaign effectiveness – aren’t you?
Please excuse me while I totally blow your mind…
ga('send', 'event', 'contact-form', device_name, r_width);
I’ll leave you with that to ponder future spreadsheet implosions.
Related Topics
Top