UI Tracking - CSS ONLY

1. UI Tracking - CSS ONLY
By Tsvetomir Krastev

2. UI Tracking
● Visits
● UI Feedback
● Problems detecting

3. Tools
● Google Analytics
○ analytics.js
● Clicky
● Piwik

5. Beacon
● new Image().src = ‘stats.gif?’ +
params
● It works everywhere
● Tiny response, the 1x1px GIF Image
could be only 42 bytes

6. UI Tracking - CSS ONLY
input[name="message"]:focus {
background-image: url('http://www.google-analytics.
com/collect?v=1&_v=j23&a=...');
}

7. UI Tracking - CSS ONLY
input[value="female"]:checked {
background-image: url('http://www.google-analytics.
com/collect?v=1&_v=j23&a=...');
}

8. UI Tracking - CSS ONLY
@media all and (max-width: 640px) {
body {
background-image: url('http://www.google-analytics.
com/collect?v=1&_v=j23&a=...');
}
}

9. Drawbacks
● We use brackground-image property
for HTTP request
● Cache
● Antivirus softwares

10. THE END