It's important to understand what users do in your website. You can use Google Analytics, I use it of course. In this article you will see a CSS-only approach to tracking UI interactions.
The original way
Suppose that you have to develop a website which needs tracking. You want to track user visits and interactions. Google Analytics is a nice approach to do that. The javascript code to track your visits is one like this:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');Do not forget to place it at the bottom of your page.
Then, you can use the Google Analytics functions to send tracking and see it in your dashboard:
ga('send', 'event', 'event-name', 'label', 'description', 1);However, what happens if your user has your javascript disabled in his browser? Or what happens if he or she uses ad block, which blocks Google Analytics? I know people who had to develop a project for a company which blocks javascript in its browsers. For that people we can use CSS to tracking.
The new way
I recommend you to read the Google Analytics tracking code overview, pay attention in "When all this information is collected, it is sent to the Analytics servers in the form of a long list of parameters attached to a single-pixel GIF image request. The data contained in the GIF request is the data sent to the Google Analytics servers, which then gets processed and ends up in your reports. Here is an example of only a portion of a GIF request".
You can send information in a GIF, using javascript, I'll create a image and put the url in the src attribute:
var image = new Image();
image.src = 'http://www.google-analytics.com/__utm.gif?utmwv=4&utmn=769876874...';For users which not have javascript enabled, I use background-image.
background-image: url('http://www.google-analytics.com/__utm.gif?utmwv=4...');This property forces the browser to load an image. Finally, we can use this technique to track user actions.
Tracking user actions
To tracking clicks, it's perfect to use the :active pseudo class.
input[type="submit"]:active {
background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
}Another useful pseudo class is :focus, for example you can track how many users started complete the register form. If you track the submit form click button, you can calculate the conversion easily.
.username:focus {
background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
}Also :checked is a useful pseudo class which you can use.
Finally, media queries help us to track same things in different resolutions:
@media all and (max-width: 480px) {
.some-class {
background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
}
}Conclusions
This approach is very nice to track user actions without javascript, but note that it only tracks the first occurrence of the event. And some pseudo classes are not valid for old browsers (IE8-). However, I like this technique and my intention is to use it in the future.