By Robert Norman

We love JavaScript, but sometimes we like to track user interactions outside of our lovely, warm, browser-based comfort-zone and sometimes users just prefer to have JavaScript disabled in their browser (they’re missing out, by the way). Either way, don’t let the lack of JavaScript get you down, as we’ll show you how we can implement some basic GA Event Tracking when you only have access to HTML/CSS.

  • Analytics

Back to blog home

Setting the Scene

So, you’ve been playing around with some of the cooler pseudo-selectors of CSS (such as :checked and :hover) and you’ve built a cool widget that allows for user interactions without JS, much like the interactive button below. The design here is simple, but the ability to dynamically alter page content without JS is very powerful. These selectors could be used in many ways, such as to create a product selector where the content displayed changes based on the state of the button. If their email client supports it, this could be used to deliver some really engaging email content to users!

Credit: http://solarisedesign.co.uk/code-blog/creating-useful-interactive-elements-in-css-checkbox-hack

Let’s give it a go

So, let's dive in. Imagine that a simple widget has been built that consists of one button and a viewable area, much like in the example above. The button triggers new content to be displayed to the user, and we want to know how many users have seen this new content. The button here is actually a nicely formatted input-checkbox. As it’s a checkbox, we can use the :checked pseudo-class to determine the state of the button. We then create a div element beneath the checkbox to contain our viewable area.

In our CSS stylesheet, we then create two entries: one for input:checked ~ div and one for input ~ div. These selectors now refer to the viewable area in the case where the button is toggled on or off respectively. Here comes the important bit; we can set the 'background-image' for the input:checked ~ div pseudo-selector's style to be a GA Measurement Protocol URL. For this pseudo-selector, the “image” is only loaded when it’s required, which means that our MP hit will only be sent when the user checks the checkbox (i.e. interacts with our element). This allows us to send a one-off event hit on the interaction, despite using no JavaScript!

Test run

Cool, so let’s give it a go. Below is the example above, but with the needed changes to send the MP hit when the button is first switched to the ‘On’ State.


 We’ve clicked the button, so let’s now see if the MP hit reached GA:


Nice, we’ve managed to track an interactive element from a non-JavaScript widget! Note that we didn’t have to use the :checked pseudo-class, others such as :active and :hover can be used in much the same way.

It’s a pretty niche and novel method of sending GA data for now and has some pretty large restrictions, namely that for the email marketing application there are only some email clients that support the CSS pseudo-class we’ve just used. However, this is a great first step towards more comprehensive marketing analysis in non-JavaScript situations!

Share this article