Preparation of the environment

by: Michal Szymanski

Important: the analytics chapter is a natural continuation of the automation chapter. If you have not had the opportunity to familiarize yourself with materials regarding automation, I would like to encourage you to do so. I did not want to translate the same issues in two places, so if you skipped the previous chapter, some things may seem unintelligible, because I do not explain them here.


In this lesson, we'll learn basics of web analytics and behavioral analytics. This is the first step towards big data analysis.

It's important because thanks to this data we can:

  • make our automation algorithms smarter
  • see how the users really use our website
  • check if the UI we build is efficient
  • validate if the website truly help us accomplish business goals of our company

Step 1 - Template, BrandFlow script & Live Server

As always, I've prepared a simple HTML mockup which we'll use for the learning purpose of this lesson.

Of course, if you prefer, you can work directly on your production website. It's completely up to you.

If you want to use the prepared template, click the button below and unzip the downloaded package. Then open the project in the code editor and live server.

Download Analytics template Live preview

Important: If you use the prepared template, remember to place BrandFlow script in the <head> section of the project and to launch the project via Live Server if you work on localhost.

Step 2 - creating an event

We'll start with something very simple.

We'll measure how many times has been clicked.

1) Go to and create new condition with the following parameters:

Condition name : Important Button condition

Folder : Unfiled items

Type : Click ID

Operator : equals

Param : important-button

Note: important-buttonis an ID of . You can check it in the project if you want to make sure.

2) Go to

3) Click on button and create category named "HomePage Clickability"

4) Click on button and create event with the following parameters:

Event action : Important Button

Event label : NewsFeed

Value : 1

Category : HomePage Clickability

5) In the Triggers column click Add button and name the trigger "Important Button trigger"

6) Click on button and set Important Button condition

7) Save everything and publish the changes.

Step 3 - test

1) Refresh your project and click 6 times on

2) Wait around 5 minutes - that's the average time before BrandFlow update the data.

3) Go to and enjoy the first collected data.

Previous post Next post

Spreed the word: Add comment
About author
Author avatar
Michal Szymanski

Co-founder of MDBootstrap and BrandFlow. Entrepreneur, web developer, UI / UX designer, marketer. Dancer and nerd at the same time.

Leave a reply

Sign up to follow your progress and get additional benefits