How To Use

HOTJAR
Your Complete Analytical Tools
Heatmaps & Recordings
2016 www.malougumana.com

Warning:
Before you go
on this
tutorial..
2016 www.malougumana.com

Refer to this:
http://malougumana.com/
tutorials/how-to-installhotjar/
2016 www.malougumana.com

To create
Hotjar
account..
2016 www.malougumana.com

And install
Hotjar in
Wordpress.
2016 www.malougumana.com

I assume
you're done
with those
pre-requisites.
2016 www.malougumana.com

Let's move
on
2016 www.malougumana.com

Open your browser

2016 www.malougumana.com

Type Hotjar URL

on the address bar

2016 www.malougumana.com

Press Enter on
your keyboard

2016 www.malougumana.com

10

This webpage
opens

2016 www.malougumana.com

11

Click SIGN IN

2016 www.malougumana.com

12

Fill this out

2016 www.malougumana.com

13

Type your registered

email address

2016 www.malougumana.com

14

Type your password

2016 www.malougumana.com

15

Click Sign In

2016 www.malougumana.com

16

This is Site Dashboard

2016 www.malougumana.com

17

Let's see
how Hotjar
works...
2016 www.malougumana.com

18

Go to your
Wordpress
Dashboard
2016 www.malougumana.com

19

In wordpress, click
Pages

2016 www.malougumana.com

20

Click Add New

2016 www.malougumana.com

21

Click here

2016 www.malougumana.com

22

Type a Page Name

2016 www.malougumana.com

23

Put page contents here

2016 www.malougumana.com

24

Type the contents

2016 www.malougumana.com

25

Click Publish

2016 www.malougumana.com

26

Copy this permalink

(the page URL)

2016 www.malougumana.com

27

Highlight it

2016 www.malougumana.com

28

Right click on
your mouse

2016 www.malougumana.com

29

And click
Copy Link Address

2016 www.malougumana.com

30

Click View Page to

see it LIVE

2016 www.malougumana.com

31

This is it!

2016 www.malougumana.com

32

This is also the same

permalink we just copied

2016 www.malougumana.com

33

Open a note pad

2016 www.malougumana.com

34

And paste the

link there

2016 www.malougumana.com

35

To save it
for
later use.
2016 www.malougumana.com

36

How To Use
Hotjar
HEATMAP
2016 www.malougumana.com

37

In Hotjar Dashboard, click

Heatmaps

2016 www.malougumana.com

38

Click New Heatmap

2016 www.malougumana.com

39

Scroll down

2016 www.malougumana.com

40

Click here

2016 www.malougumana.com

41

Type NAME for heatmap

2016 www.malougumana.com

42

Click here

2016 www.malougumana.com

43

Select here how you will

connect your webpage

2016 www.malougumana.com

44

Click Exact match

2016 www.malougumana.com

45

We need the
webpage link here

2016 www.malougumana.com

46

Go to your note pad

2016 www.malougumana.com

47

Copy-paste the
link here

2016 www.malougumana.com

48

Click Advanced options

2016 www.malougumana.com

49

Put nothing here

2016 www.malougumana.com

50

We don't want
to exclude
elements
2016 www.malougumana.com

51

Click here

2016 www.malougumana.com

52

Paste here the webpage

link from the notepad
(see slide 47)

2016 www.malougumana.com

53

Tick this

2016 www.malougumana.com

54

Click Create Heatmap

2016 www.malougumana.com

55

There's the heatmap

we just created

2016 www.malougumana.com

56

Let's now visit

the webpage

In your browser,
Add New Tab

2016 www.malougumana.com

58

Copy-Paste the
webpage URL here
from your notepad

2016 www.malougumana.com

59

Just scroll, move your

mouse around the page

2016 www.malougumana.com

60

Click anywhere
on the page

2016 www.malougumana.com

61

We're doing
those so that
the heatmap
2016 www.malougumana.com

62

Will record
our
"actions"
2016 www.malougumana.com

63

Go Back to Hotjar window

2016 www.malougumana.com

64

On your
keyboard or
keypad..
2016 www.malougumana.com

65

Press F5 or
CMD+R to
refresh the
page
2016 www.malougumana.com

66

There's the recorded

pageview we've just done

2016 www.malougumana.com

67

Click View Heatmap

2016 www.malougumana.com

68

Click this to see

"Clicks"

2016 www.malougumana.com

69

These are recorded

clicks

2016 www.malougumana.com

70

Use this to gauge

whats HOT

2016 www.malougumana.com

71

Or COLD

2016 www.malougumana.com

72

See here how many

clicks were recorded

2016 www.malougumana.com

73

Click this to see

"Moves"

2016 www.malougumana.com

74

Moves shows
where the mouse
pointer moves
around the page
2016 www.malougumana.com

75

Click this to see

"Scrolls"

2016 www.malougumana.com

76

Scrolls will
tell you if
the visitor
2016 www.malougumana.com

77

Checks until
the bottom
part of your
website
2016 www.malougumana.com

78

This will give you

idea

2016 www.malougumana.com

79

where to put
important
buttons like the
"BUY" button
2016 www.malougumana.com

80

You can also download

the heatmap here

2016 www.malougumana.com

81

Heatmaps are important

to see where your
visitors click

2016 www.malougumana.com

82

This will tell

you what to
enhance on
the site
2016 www.malougumana.com

83

And what to
remove/improve
because nobody
pays attention
2016 www.malougumana.com

84

How To Use
RECORDINGS
2016 www.malougumana.com

85

In Hotjar Dashboard, click

Recordings

2016 www.malougumana.com

86

Click Record Visitors

2016 www.malougumana.com

87

Click this to see

recording options

2016 www.malougumana.com

88

Select here what you

want to be recorded

2016 www.malougumana.com

89

Click Start Recording

2016 www.malougumana.com

90

You can stop

recording here

2016 www.malougumana.com

91

Once someone visits the

site, the recording will
be here

2016 www.malougumana.com

92

You can see how

many pages visited

2016 www.malougumana.com

93

You can apply some

filters here

2016 www.malougumana.com

94

Click Play to
watch recording

2016 www.malougumana.com

95

This is a screenshot of
a recording playing

2016 www.malougumana.com

96

The strokes can be visible also

2016 www.malougumana.com

97

The page visited is

shown here

2016 www.malougumana.com

98

You can skip pauses (for

example visitor is reading)

2016 www.malougumana.com

99

Recordings
can be useful
to see in actual
2016 www.malougumana.com

100

How visitor
navigates
your site
2016 www.malougumana.com

101

This
gives
you
idea

2016 www.malougumana.com

102

What's on
the web that
attracts him
2016 www.malougumana.com

103

You've just seen

the power of
HOTJAR
Heatmaps
2016 www.malougumana.com

104

and Recordings
to understand
your visitors
2016 www.malougumana.com

105

Use it to your
advantage.
2016 www.malougumana.com

106

The aim of marketing is to

know and understand the
customer so well the
product or service
fits him and sells itself.
2016 www.malougumana.com

Peter Drucker

107