Discoveries

How Google Analytic does Beacon Tracking

When all [analytics] 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.

So can run GET requests to images through pure css? It’s a simple but very clever insight into the beacon style of analytics collection.

Basically Krasimir tested and apparently implemented various css statistics using pseudo classes on various elements and simply used the `background-image` property of CSS to send the customized beacon

Examples

Track Button Clicks to Google Analytics in Pure CSS

// buttons
input[type=”button”]:active {
 background-image: url(‘http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
}

Track Input Focus to Google Analytics in Pure CSS

// inputs
input[name=”message”]:focus {
 background-image: url(‘http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
}

Use `content` css property to send beacon toGoogle Analytics

// alternative to background-image
input[value=”female”]:checked {
 content: url(‘http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
}

My Challenge

I challenge any of you to create a sass/less/etc mixin to generate these css properties to integrate with the Google Analytics Track Beacon

Original Article: http://www.smashingmagazine.com/2014/10/16/css-only-solution-for-ui-tracking/