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!
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.
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: