How to create more “observable” webpages? Part one.

Let’s travel in time a bit and go back a few years in the history of building websites. As you probably remember, back in the day simple actions like switching between subpages would cause the entire page to reload. Doing that would also affect the URL address of the website (keep that in mind for later). For many reasons, this was not an ideal situation for internet users. Especially users with slower internet connection for whom showing full content on the page could take a while.

Fast forward to the present day, we are currently building pages that not only work faster but also only parts of them are reloaded, to prevent any lag in content loading. Creating these so-called single-page applications, we lost somehow the possibility of customizing the URL, which was important to us along the way. Why is this so important? Well, because the basic, simplest and fastest analytics (even the one in Google Analytics) are based on observing how the URLs change while customers navigate our website.

Going back to times when pages were reloaded with a URL change, the analysis was simple. Google Analytics was easily able to draw the users’ paths based on these changes. Nowadays, in the era of single pages (and no change of addresses, despite changes in content), analytical tools do not receive any information that would indicate switching by the user from one page to another.

But hey, there is nothing to worry about. There are ways to face this challenge, have an analytics-friendly website and be able to further monitor customer behavior. One of them are events that we can send to an analytical tool. But … first of all, we have to ask developers for help in scripting these events. Secondly, we must ensure that we take into account every – literally EVERY – action that a customer can possibly perform on our website. The worst thing, however, is that we do these event scripting for a specific analytical tool. If at some point it turns out that we want to change the tool, then all the work we did with developers goes to waste ☹.

Relax, there are better ways to analyze websites. Let me get straight to the first important rule.

The URL address has to change

If the webpage content changes, it should automatically imply a change to a unique URL. And this solution is also possible to implement as part of a single-page! Ok, you might ask, if it is possible, why is this not happening? The answer is simple: when designing a page, the topic of variable URLs is usually not the most important thing to implement. This issue usually arises at a much later stage, when the analyst wants to observe the client’s path and finds out that this is impossible using the variable URLs. That’s why it is crucial to put this topic on the list of tasks from the very beginning of designing the analytics-friendly website!

Remember!

• The whole URL address doesn’t have to change, only its fragments, which are responsible for the relevant content.
• Variable URLs can be implemented both for sites with a small number of subpages and for huge e-commerce websites.
• The construction of the URLs is important. Let’s ensure their consistency, let the respective fragments of the URL always be presented in the same order.
• Let all the actions on your site trigger a new, unique link in your browser – your analyst will be grateful for this for the rest of his life, really!

Code matters

The page code is another important topic that we need to take care of so that our pages can be easily measured and analyzed. The page code consists of several layers: we have HTML that defines the structure of the page and styles that describe how it all looks. Usually, what happens is that we don’t keep any class record scheme (a real-life example would be an inconsistently looking BUY NOW button throughout an online shopping page).

While building a website we can easily describe it in code. So: if we have a form on the page, it is usually unique (i.e. the contact form on each of the subpages will look the same) and we can give it an individual ID by which we can recognize it and without any problems analyze how customers use it.

Now you know that when building websites, you should try to code them in the most transparent and understandable way, giving the code accurate descriptions, not only classes defining the appearance, but also unique identifiers and variable URLs for an analytics-friendly website. This, in turn, will help you create much more observable pages, and might even impact whether you can do this kind of analysis at all.

If you have any concerns or need some advice feel free to contact cux.io CTO – Kamil – he is your guy if it comes to building easily observable websites.