Technology November 24, 2014 Last updated September 18th, 2018 1,755 Reads share

Use CSS Instead Of JS For Google Analytics Tracking

Image Credit:

Today our clients are spending big amounts in responsive web entity development for multiple devices and browsers. They want a definite success so it is duty of web developers to assure their success through frequent and thorough testing and producing statistics based on the website traffic that indicate the success of website.

There are many web traffic and performance analytics available in the market, but Google Analytics is unbeatable, and the most advanced one, free option. Recent improvements in GA are facilitating users more than we expect from free services. However, GA does not represent your traffic data 100% because it is based on JavaScript code and many users disable JS for mostly security reasons.

No doubt, the JavaScript disabled browsers are very few in numbers and only consisting 2% of total users on the web, but they are challenging for the web developers to access 100% data of all users of the website. When you have to deal with the private network users where JavaScript is posing security threats hence it can be disabled. This forces many web developers to lean on other alternatives. Let’s check what is available in the web community at present as a solution of such problems.

Working Mode of Google Analytics

If you have carefully studied the GA documents on Google, you may have noticed that they are describing how GA works technically. At one point, they have written that GA code in the source of website collecting all info regarding the visitors of the website on client devices and sending that information to the Google Analytics server. It is interesting that GA code produces a long list of various parameters on the client devices and attaches it with a single-pixel GIF image before sending to the GA server, not any other format or directly to the server as such.

Solution of Our Problem

This is an awesome part of our alternative search and we can use this modus operandi to penetrate our GA code and collect the info without the help of JS anymore. If we dig technically, we have HTML-CSS at hand to solve our problems of JS disabled browsers for GA tracking. This is a very smart move by Google to track all the browsers without making any Ajax call using HTTP request.

Technically, Google appends all requested parameters to the 1X1 tiny GIF of just 42 bytes called beacon through image URL. Thus, we have a nice clue for collecting tracking info from the JS disabled browsers if we can successfully load such image on the page. Fortunately, some smart web developers and designers have found out the solution using modern CSS properties. If you carefully set the (background-image) property to load the image and attach all the parameters by making it beacon or attach URL using (src), you can win the battle easily.

Not Perfect Solution

Unfortunately, our CSS based UI tracking works only once and on the first occurrence of the event. It never fires info on each click to make subsequent HTTP requests. However, this is a very helpful technique if you want to collect data of first click using (background-image) property to make HTTP requests to the GA server from the JS disabled browsers. Until new solutions come on the sphere for total data collection, we have to rely on this partial solution at the present moment.

Images: ”Ostersund, Sweden – May 30, 2014: Close up of the Google analytics main page on a computer screen. Google Analytics is a service offered by Google that generates statistics about a website’s traffic./ Shutterstock.com

__________________________________________________________________________________

Connect with Tweak Your Biz:

                     

Would you like to write for Tweak Your Biz?

Tweak Your Biz is an international, business advice community and online publication. Today it is read by over 140,000 business people each month (unique visitors, Google Analytics, December, 2013). See our review of 2013 for more information

An outstanding title can increase tweets, Facebook Likes, and visitor traffic by 50% or more. Generate great titles for your articles and blog posts with the Tweak Your Biz Title Generator.

mehul Rajput

mehul Rajput

Read Full Bio