With many years of experience creating websites and prototypes with HTML and CSS, and a personal fondness for pushing its limits, I became interested in some of the lesser utilized CSS capabilities. One of these capabilities is the ability to trigger server calls based solely on the user's website interactions. With pixel tracking being incredibly popular in the marketing industry, and with javascript being increasingly blocked by users, I connected the dots and decided to submit a patent idea through Tealium's patent program. In doing so, I worked with a fellow engineer to iron out a few technical details and we completed the process together.
The process involved fully documenting the idea, getting it reviewed by Tealium's executive team, and working with patent lawyers to see it through completion. With minimal revisions along the way, the entire process took approximately two years until fully issued and posted to the USPTO website.
The invention entails using CSS in a web-browser to identify elements on a website to be tracked and then making server calls using CSS to track actions. Trackable actions include clicks and other events on web page elements such as links, input fields, divs, spans, and list-items.
The invention covers two scenarios for using CSS for website tracking. The first is for CSS to be used to supplement JavaScript tracking by identifying elements to be tracked. The second is tracking actions with only CSS with no additional scripting needed.
Current web trackers require that a person specify web page elements of a website to be tracked. This is typically implemented by having the user specify element IDs via a proprietary interface or directly using JavaScript.
CSS already has built in selectors which website designers use to define the styles of the website elements. By utilizing the CSS for both defining style attributes and specifying elements to be tracked, the following benefits can be had:
Tracking with CSS selectors requires an attribute associated with tracking to be placed within the CSS. In the example provided, this is marked "tracking marker" The selector will identify the element(s) desired to be tracked. The tracking marker has a value, and this is the tracking ID. The tracking ID is used for tracking purposes to distinguish between multiple elements tracked on a page. For example, when a specific button is pushed, the tracking code would know to send additional data such as page name, form id, etc. back to the server.
Within the HTML markup, CSS styles are applied as usual. JavaScript or other code is then used to parse the CSS, identify the elements to be parsed, and attach javascript calls to the specified elements during run-time.
While Javascript is often available and used for tracking, it may be disabled for a variety of reasons including speed, bandwidth, usability, accessibility, and security.
Web applications, especially those utilizing a large amount of JavaScript loaded from 3rd parties load more slowly. Badly written JavaScript can also consume a lot of extra bandwidth which slows down web page load times and consumes people's bandwidth. These are especially a concern to people in countries with poor internet access or who rely upon a mobile-phone to connect to the internet.
JavaScript may also be disabled for usability and accessibility reasons. People using screen-readers and other accessibility tools, prefer simple non-interactive websites that are easy to read and navigate.
Lastly JavaScript may be disabled for security and reasons. Websites may load malicious JavaScript in the background or use JavaScript to collect browser data.
By utilizing CSS, a component of all modern web browsers, simple websites who desire to reach users opposed to JavaScript can now see how their users are interacting with their webpages. This is beneficial for understanding how websites are being used and how best to optimize them.
Tracking actions with CSS alone, is completed using the html and css loaded on the client-side web browser, and a script running on a server that parses urls requested from it.
The CSS contains style definitions utilizing Tracking URLs that are called upon the desired web page interactions. This type of style definition will be referred to as a Tracker. The URL in the Tracker is composed of a Domain Name, an Account ID, and a Tracking ID. By applying a CSS style to an HTML element, the URL will be called when the user performs the action specified by the Tracker's CSS Selector (eg: ‘active' = a user clicks the element, or ‘hover' when a user hovers their mouse over the element).
Due to the inherent properties of CSS, multiple trackers may be applied to the same HTML element, Trackers may be triggered by nesting HTML elements that have Trackers applied to them.
Trackers can be applied to any HTML element by following it's CSS guidelines including Divisions, Spans, List Items, Form Fields, Anchor Links, etc.
The Server referenced by the URL should be configured to parse the URL into its component pieces. This involves identifying the Account ID and Tracking ID. Once parsed, a log will be kept identifying which Tracker ID was called, which account it was called for and when it was called. From this log, a record of how many times an Account's Tracker ID was called for a given timeframe can be generated. The Server referenced by the URL may also get further details from the HTTP Referral data including the specific server and page making the request, the user's IP address, browser information, and user agent.
Tracker style definitions may be embedded in the HTML file, or be in their own CSS file and included in the web page. This CSS file may also be generated by and hosted through an event tracking service.