How to start collecting web analytics using only HTML and Filasys.

Web analytics is a critical component in building any successful website.

Whether for SEO purposes or improving user experience, websites need to collect data in order to see how it performs, what works well, and what can be improved.

In this tutorial, we will see how we can start collecting enterprise-level web analytics in a website using only one (and we mean 1) line of html in a website.

Before we begin

The website used in this tutorial is a mock online shop used solely for the purpose of this tutorial. Its source code code can be found here.

Filasys is a data-analytics platform build for creating custom analytics.

Cookieless tracking will be used for this example. This means that sessions will be tracked without the use of cookies. Filasys uses a special technique to generate anonymized session ids when doing cookieless tracking.

For this tutorial, we will need:

• Git
• A Filasys account to manage data collection.

Setting up the project

In order to save time, we have a pre-made project set up on github.

We start by cloning the project by running the following command in the command line:

git clone https://github.com/Filasys/web-sdk-starter.git

Alternatively, we can also visit the github page and download the project as a zip file:

The contents of the project should be as follow:

- index.css
- index.html
- index.js
- lemons.jpg
- logo-icon.png
- oranges.jpg
- readme.md
- strawberries.jpg

The index.html file contains the html code for the website, index.css the styling and index.js is here to make the website reactive (not necessary for collecting data).

The various images are here to make the website more interesting than just showing text.

We can ensure that the project works by opening index.html from a file explorer into a browser. The following page should be on display:

Collecting data

In order to collect the data, we first need to create a project on Filasys to store it.

On the filasys console, we go to the "Projects" tab, a create a new project. In order to match the Web SDK, we need to make sure to select the Web Analytics preset before the project creation.

Then, in the project overview, we select "Web SDK" under Integration, make sure that "Auto Start" in selected, and copy the line of html under it.

We can then paste the line of HTML into the head of our document in index.html.

And we are done! Now opening the page will start collection session and performance information about the page. (Make sure to reload the page for the changes to apply)

If we open the page, visit the "Events" tab of the project, select "Session Events" and go to "Logs", you will start seeing some events (It may take a minute or two for the events to appear):

Additionally, if we go to the "Dashboards" tab, and visit the "Performance Analytics" or "Session Analytics" dashboard, we can start observing some charts:

Going the extra mile

The Web SDK can also track interactions with the website, alongside some details for the interaction.

To that effect, we can add two different attributes to buttons in our website: data-filaction and data-filadetails.

• data-filaction is used to describe the kind of interaction we are tracking. We will choose to track click interactions.
• data-filadetails is optional and needs to be set together with data-filaction. The value for this attribute can be anything and will be recorded as the interaction details.

Going back to the HTML, we can modify the buttons as follows:

<button type="button" class="add-to-cart" id="add-strawberries" data-filaction="click" data-filadetails="add-strawberries">Add To Cart</button>
<!-- ... -->
<button type="button" class="add-to-cart" id="add-oranges" data-filaction="click" data-filadetails="add-oranges">Add To Cart</button>
<!-- ... -->
<button type="button" class="add-to-cart" id="add-lemons" data-filaction="click" data-filadetails="add-lemons">Add To Cart</button>
<!-- ... -->
<button type="button" class="checkout" data-filaction="click" data-filadetails="checkout">Checkout</button>

Now interacting with the buttons on the web page will send some interaction events matching the configuration of the buttons.

Conclusion

In this tutorial, we've shown how to set up web analytics using only HTML. Now performance events and session events are automatically collected, as well as interactions with the website.

If you want to learn more about the Web SDK and the events being collected, you can check out our documentation.