Page 1
©2016 www.malougumana.com
How To Use HOTJAR
1
Your Complete Analytical Tools Heatmaps & Recordings
Page 2
©2016 www.malougumana.com
Warning: Before you go
on this tutorial..
2
Page 3
©2016 www.malougumana.com
Refer to this: http://malougumana.com/
tutorials/how-to-install-hotjar/
3
Page 4
©2016 www.malougumana.com
To create Hotjar
account..4
Page 5
©2016 www.malougumana.com
And install Hotjar in
Wordpress.5
Page 6
©2016 www.malougumana.com
I assume you're done with those
pre-requisites.6
Page 7
©2016 www.malougumana.com
Let's move on…
7
Page 8
©2016 www.malougumana.com
Open your browser
8
Page 9
©2016 www.malougumana.com
Type Hotjar URL on the address bar
9
Page 10
©2016 www.malougumana.com
Press Enter on your keyboard
10
Page 11
©2016 www.malougumana.com
This webpage opens
11
Page 12
©2016 www.malougumana.com
Click SIGN IN
12
Page 13
©2016 www.malougumana.com
Fill this out
13
Page 14
©2016 www.malougumana.com
Type your registered email address
14
Page 15
©2016 www.malougumana.com
Type your password
15
Page 16
©2016 www.malougumana.com
Click Sign In
16
Page 17
©2016 www.malougumana.com
This is Site Dashboard
17
Page 18
©2016 www.malougumana.com
Let's see how Hotjar
works...18
Page 19
©2016 www.malougumana.com
Go to your Wordpress Dashboard
19
Page 20
©2016 www.malougumana.com
In wordpress, click Pages
20
Page 21
©2016 www.malougumana.com
Click Add New
21
Page 22
©2016 www.malougumana.com
Click here
22
Page 23
©2016 www.malougumana.com
Type a Page Name
23
Page 24
©2016 www.malougumana.com
Put page contents here
24
Page 25
©2016 www.malougumana.com
Type the contents
25
Page 26
©2016 www.malougumana.com
Click Publish
26
Page 27
©2016 www.malougumana.com
Copy this permalink (the page URL)
27
Page 28
©2016 www.malougumana.com
Highlight it
28
Page 29
©2016 www.malougumana.com
Right click on your mouse
29
Page 30
©2016 www.malougumana.com
And click Copy Link Address
30
Page 31
©2016 www.malougumana.com
Click View Page to see it LIVE
31
Page 32
©2016 www.malougumana.com
This is it!
32
Page 33
©2016 www.malougumana.com
This is also the same permalink we just copied
33
Page 34
©2016 www.malougumana.com
Open a note pad
34
Page 35
©2016 www.malougumana.com
And paste the link there
35
Page 36
©2016 www.malougumana.com
To save it for
later use.36
Page 37
©2016 www.malougumana.com
How To Use Hotjar
HEATMAP37
Page 38
©2016 www.malougumana.com
In Hotjar Dashboard, click Heatmaps
38
Page 39
©2016 www.malougumana.com
Click New Heatmap
39
Page 40
©2016 www.malougumana.com
Scroll down
40
Page 41
©2016 www.malougumana.com
Click here
41
Page 42
©2016 www.malougumana.com
Type NAME for heatmap
42
Page 43
©2016 www.malougumana.com
Click here
43
Page 44
©2016 www.malougumana.com
Select here how you will connect your webpage
44
Page 45
©2016 www.malougumana.com
Click Exact match
45
Page 46
©2016 www.malougumana.com
We need the webpage link here
46
Page 47
©2016 www.malougumana.com
Go to your note pad
47
Page 48
©2016 www.malougumana.com
Copy-paste the link here
48
Page 49
©2016 www.malougumana.com
Click Advanced options
49
Page 50
©2016 www.malougumana.com
Put nothing here
50
Page 51
©2016 www.malougumana.com
We don't want to exclude elements
51
Page 52
©2016 www.malougumana.com
Click here
52
Page 53
©2016 www.malougumana.com
Paste here the webpage link from the notepad
(see slide 47)
53
Page 54
©2016 www.malougumana.com
Tick this
54
Page 55
©2016 www.malougumana.com
Click Create Heatmap
55
Page 56
©2016 www.malougumana.com
There's the heatmap we just created
56
Page 57
Let's now visit the webpage
Page 58
©2016 www.malougumana.com
In your browser, Add New Tab
58
Page 59
©2016 www.malougumana.com
Copy-Paste the webpage URL here from your notepad
59
Page 60
©2016 www.malougumana.com
Just scroll, move your mouse around the page
60
Page 61
©2016 www.malougumana.com
Click anywhere on the page
61
Page 62
©2016 www.malougumana.com
We're doing those so that the heatmap
62
Page 63
©2016 www.malougumana.com
Will record our
"actions"63
Page 64
©2016 www.malougumana.com
Go Back to Hotjar window
64
Page 65
©2016 www.malougumana.com
On your keyboard or
keypad..65
Page 66
©2016 www.malougumana.com
Press F5 or CMD+R to refresh the
page66
Page 67
©2016 www.malougumana.com
There's the recorded pageview we've just done
67
Page 68
©2016 www.malougumana.com
Click View Heatmap
68
Page 69
©2016 www.malougumana.com
Click this to see "Clicks"
69
Page 70
©2016 www.malougumana.com
These are recorded clicks
70
Page 71
©2016 www.malougumana.com
Use this to gauge what’s “HOT”
71
Page 72
©2016 www.malougumana.com
Or “COLD”
72
Page 73
©2016 www.malougumana.com
See here how many clicks were recorded
73
Page 74
©2016 www.malougumana.com
Click this to see "Moves"
74
Page 75
©2016 www.malougumana.com
Moves shows where the mouse
pointer moves around the page
75
Page 76
©2016 www.malougumana.com
Click this to see "Scrolls"
76
Page 77
©2016 www.malougumana.com
Scrolls will tell you if the visitor
77
Page 78
©2016 www.malougumana.com
Checks until the bottom part of your
website78
Page 79
©2016 www.malougumana.com
This will give you idea
79
Page 80
©2016 www.malougumana.com
where to put important
buttons like the "BUY" button
80
Page 81
©2016 www.malougumana.com
You can also download the heatmap here
81
Page 82
©2016 www.malougumana.com
Heatmaps are important to see where your
visitors click
82
Page 83
©2016 www.malougumana.com
This will tell you what to enhance on
the site83
Page 84
©2016 www.malougumana.com
And what to remove/improve because nobody
pays attention84
Page 85
©2016 www.malougumana.com
How To Use RECORDINGS
85
Page 86
©2016 www.malougumana.com
In Hotjar Dashboard, click Recordings
86
Page 87
©2016 www.malougumana.com
Click Record Visitors
87
Page 88
©2016 www.malougumana.com
Click this to see recording options
88
Page 89
©2016 www.malougumana.com
Select here what you want to be recorded
89
Page 90
©2016 www.malougumana.com
Click Start Recording
90
Page 91
©2016 www.malougumana.com
You can stop recording here
91
Page 92
©2016 www.malougumana.com
Once someone visits the site, the recording will
be here
92
Page 93
©2016 www.malougumana.com
You can see how many pages visited
93
Page 94
©2016 www.malougumana.com
You can apply some filters here
94
Page 95
©2016 www.malougumana.com
Click Play to watch recording
95
Page 96
©2016 www.malougumana.com
This is a screenshot of a recording playing
96
Page 97
©2016 www.malougumana.com
The strokes can be visible also
97
Page 98
©2016 www.malougumana.com
The page visited is shown here
98
Page 99
©2016 www.malougumana.com
You can skip pauses (for example visitor is reading)
99
Page 100
©2016 www.malougumana.com
Recordings can be useful
to see in actual 100
Page 101
©2016 www.malougumana.com
How visitor navigates your site
101
Page 102
©2016 www.malougumana.com
This gives you idea
102
Page 103
©2016 www.malougumana.com
What's on the web that attracts him
103
Page 104
©2016 www.malougumana.com
You've just seen the power of
HOTJAR Heatmaps
104
Page 105
©2016 www.malougumana.com
and Recordings to understand your visitors
105
Page 106
©2016 www.malougumana.com
Use it to your advantage.
106
Page 107
©2016 www.malougumana.com 107
The aim of marketing is to know and understand the
customer so well the product or service
fits him and sells itself.Peter Drucker