Hotjar tutorial for Beginners - Part 1

HOTJAR Basics:
Track and analyze
online visitors’
behavior
to improve
your site

Part 1
* short company profile
* app profile
* What is Hotjar’s tracking
code and how to install it
* Hotjar’s Analysis Tools (part 1)
- Heatmaps

Hello!!!
Welcome to your
tutorial.

Let’s start with a
short background…

Hot jar
is an all-in-one
analytics & feedback
tool

that tells you how a
website is being
used

and what users
think about it.

It visually tracks
what visitors do on
your site,

what they are
looking for and
what they think
about it.

Hotjar can do all
these using their
“hot” features.

Instead of using so
many apps/tools

to get feedback
and analyze
customer behavior,

.you can do all this
from one platform –

A big help to users
in consolidating
workflow.

The information
you access from
online visitors’
behavior

is very valuable in
improving your
site’s user
experience,

increasing traffic
and engagement
and

most importantly,
turning visitors to
customers

to make and/or
increase
SALES/LEADS.

is the brainchild of
CEO David Darmanin

and his founding
team of experts.

Headquartered
in the exotic
Mediterranean island
of Malta,

this privately-owned
European start-up
was founded in
January of 2014.

The reception and
interest in the app
was such that
in 3 months’ time

it went from
0 to 60,000
registrations!!!

COOL!!!
Let’s go and check it
out for ourselves!

But before
we sign up,
let’s familiarize
ourselves

with its analytic
and
feedback
tools.

* Heatmap
* Visitor Recordings
*Conversion Funnels
*Form Analytics

A heatmap is a
visual representation

of the clicks, taps and
scrolling behavior

of your site’s
visitors / users.

There are 3 types of
heatmaps:
* Click and Tap
* Move
* Scroll

Recordings allow you to
see how visitors use,

behave and interact
with your site as if

you were looking over
their shoulder.

Funnels pinpoint
at which step or

on which page visitors
leave your site.

They identify your site’s
conversion “blocks”

and enable you to
improve its usability.

This helps you to
identify why your

site visitors do not fill up
/complete your forms.

The report generated
allows you to edit

online form formats and
improve completion rate.

- allows you to
gather data about
your visitors’
reactions

to your site so
you can improve it
and deliver what
they want.

Hotjar’s feedback tools
are:
* Feedback polls
* Surveys
*Recruit User Testers

For this tutorial,
however,
we will only focus on
Hotjar’s
Analysis tools.

Let us now sign up
and try it out.
LET’S GO!!!

Open your web
browser of choice

Type in hotjar.com
in the address bar
and press Enter.

You will see
Hotjar’s homepage.

Scroll all the
way down to see

“snapshots” of how it
consolidated analytics

and feedback, what it
offers, who uses it,

on which platforms
it works and

everything else you
want to know about it.

Now let’s go back
to the top of

Type in your name and
email address

to see the
“password” page.

Fulfill their criteria for
your Hotjar password

and type it in the
space provided.

Click the green button of
the Terms & Conditions

Click the and
select your role

from the dropdown
menu. Click on it

Type in your
organization’s name

Now you can set up
your first site.

and click the red
button to start.

You’re in!! First thing
to do is to install the

Hotjar tracking code
to your website.

Basically, it is a code
that you need to install

on your site to be
able to run Hotjar.

Every site has its very
own tracking code.

You can do the
installation using any

of these platform guides
provided by Hotjar

or do it manually.
For instructions,

Click Help at the upper
rightmost corner

and click the Getting
Started Guide.

Scroll down the page
until you get

to this part.You will be
given a mini crash course

about HTMLs and in
which part you are

to insert the tracking
code to activate Hotjar.

Now… let’s install the
tracking code.

Click and the
tracking code gets

highlighted. Right click
to copy the code

and paste it to the
HTML of all the pages

in your site
you want to track.

Once it has been
properly installed,

this will no longer appear
in your site dashboard.

You will see instead a
notice similar to this.

And on the upper
rightmost corner

you will also see
“tracking active”.

However, if right after
installing you want

to verify if you
did it properly,

Click the green button
in the dashboard

Follow the instructions
to verify installation.

Once your tracking
code is in place,

You can now proceed
to make a heatmap.

You already know
that it is
a visual image

of your site
visitors’ clicks,
mouse or scroll
movements.

Click Heatmaps to see
the Heatmaps page.

You’ll find a video
recording to help you

It’s advisable to watch
and listen to this

before you make
your first heatmap.

Once done, click on
the green button

The very first thing to do
is name your Heatmap

Second, check the
# of pageviews which,

in this case, has been
predetermined

based on the Hotjar
plan you availed of.

the 3rd item – Page
Targeting.

This is basically setting
your heatmap to

target visitors of a
specific or multiple pages.

Again, this has been pre-
determined based on

Then enter the URL of the
page you want to target.

To avoid mistakes, it is
advisable that you open

the page on your
browser and copy/paste

the URL in the Hotjar
space provided.

For a one-page
target, simply use the

default Simple Match
setting from the dropdown.

For multiple pages, visit
https://docs.hotjar.com/docs/creating-
your-first-heatmap-report

for detailed and step by
step instructions.

Review and Save
your settings.

Fill-in missed details by
clicking on each.

Supply the needed info
for all missed steps.

You know you have done
this when you see

Click Create Heatmap
to start collecting data

and check its status in
your Heatmap list page.

Here’s a sample
Heatmap list.

The green buttons on
the left show the status

of the heatmap data
collection.
----------------------
- Still collecting data
- heatmap complete

A heatmap is complete
when it reaches

the # of pageviews
previously set.

To see the resulting
heatmap, click

Now let’s study the
features in the page.

Hotjar records site visits
according to the device

used to log in –
desktop / laptop,

Click on to see a listing
of these device types.

Also, there are 3 types
of Heatmap report

that Hotjar generates
for its users.

All use a simple color
scale to visually show

you how often
specific areas of a page

or how often visitors
move their mouse/scroll

through different
parts of a page.

Page areas often visited
are “hot” or red.

Now let’s discuss
in detail the…

1) Click & Tap Heatmap
- shows where visitors

are clicking their cursor
on their desktop/laptop

or tapping on their
mobile phones.

Hover your mouse
over a “colored” part

to see the number
of clicks it got.

You will also see
the total number of

clicks recorded for that
particular heatmap report.

Click heatmaps
can give you a better

understanding of what
works in your site

and what doesn’t
based on what your

2) Move Heatmap
- shows where visitors

have moved their
mouse on the screen.

This is only available
in desktop devices.

Move heatmaps allow
you to see which

areas of a page
visitors are looking at.

3) Scroll heatmap
- shows how far down

the page a visitor
scrolls while browsing.

A red color tells you
that all/ almost all

of your site visitors
have seen this part

of the page. As you
scroll down, you will

notice the heatmap
changing colors.

Based on Hotjar’s
heatmap color scale

the colors are
becoming “colder”.

It means that less
visitors have reached
t

this part of the page.
To know the

percentage of visitors
who’ve reached an

exact point on a page,
just move your mouse

over the scroll heatmap
to see a black marker

showing you the
percentage (%) of visits.

From all 3 heatmaps,
you can gather a lot

of insight into user
behavior which you

can utilize to improve
your web/mobile site.

Hotjar can help you
take the steps

to improve or solve
these “kinks”

by going through the
8 quick Heatmap tests

Check this link to
read more about it.
https://www.hotjar.com/heatmaps

Downloading /
Sharing
Heatmaps

You can download a
heatmap and save it

to your file by clicking
on the button

in the site’s heatmap
report page.

Choose an option
and click OK.

There you go!
We’ve just finished
with Heatmaps.

Now you know how
powerful and
relevant

Hotjar heatmaps
can be in
enhancing

your site’s user
experience by
getting first hand

data of your
visitor’s online
activity behavior.

That’s it for
Part 1
of our
tutorial.

Stick around for
Part 2
so we can

learn about the other
Analysis Tools that
make

Hotjar tutorial for Beginners - Part 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Hotjar tutorial for Beginners - Part 1

Similar to Hotjar tutorial for Beginners - Part 1 (20)

More from Ma. Jocerie (Ching) Aragon-Martinez

More from Ma. Jocerie (Ching) Aragon-Martinez (8)

Recently uploaded

Recently uploaded (20)

Hotjar tutorial for Beginners - Part 1