-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
141 lines (117 loc) · 5.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>@hotjar/browser demo</title>
<link rel="icon" href="images/favicon.ico" />
</head>
<body>
<a id="github-link" target="_blank" href="https://github.com/hotjar/hotjar-js"><img src="images/logo_github.png" /></a>
<div id="jumbotron">
<h1>@hotjar/browser</h1>
<p>Bring Hotjar directly to your application</p>
</div>
<div id="content">
<h2>Installation</h2>
<div class="row">
<div class="left">
<p>
Add this package as a dependency in your project, then import the library in your code.
</p>
<p>Check the following demo on how to use this library!</p>
</div>
<div class="right">
<pre class="prettyprint">
<code class="language-js"><span class="nocode">yarn add @hotjar/browser</span>
import Hotjar from '@hotjar/browser'
</code></pre>
</div>
</div>
<h2>Initialize Hotjar</h2>
<div class="row">
<div class="left">
<p>In order for Hotjar to run, it needs to be initialized with your site ID. You can find your site ID on <a href="https://insights.hotjar.com/site/list" target="_blank">this page</a> just before your site name.</a></p>
<p>
You can press the button to initialize Hotjar which will allow to use the rest of the features.
</p>
<button class="button" id="init-hotjar-button">Init Hotjar</button>
<div class="alert alert-danger" id="init-hotjar-alert">Hotjar is not initialized</div>
</div>
<div class="right">
<pre class="prettyprint"><code class="language-js">const siteId = 123;
const hotjarVersion = 6;
Hotjar.init(siteId, hotjarVersion);
// Initializing with `debug` option:
Hotjar.init(siteId, hotjarVersion, {
debug: true
});
</code></pre>
</div>
</div>
<h2>Identify API</h2>
<div class="row">
<div class="left">
<p>One of the main interest of this library is to be able to use <a target="_blank" href="https://help.hotjar.com/hc/en-us/articles/360033640653-Identify-API-Reference">Hotjar Identify API</a>.</p>
<p>
You can fill the form to identify yourself with a name and favorite color.
</p>
<form id="identify-form">
<label for="identify-hotjar-name">Your first name</label>
<input id="identify-hotjar-name" type="text" placeholder="John" />
<label for="identify-hotjar-color">Your favorite color</label>
<input id="identify-hotjar-color" type="text" placeholder="blue" />
<button class="button" id="identify-hotjar-button" type="submit" disabled>Identify</button>
</form>
<div class="alert alert-success hidden" id="identify-hotjar-alert"></div>
</div>
<div class="right">
<pre class="prettyprint"><code class="language-js">const userId = 'abc_123';
const firstName = 'John';
const favoriteColor = 'blue';
Hotjar.identify(userId, {
first_name: firstName,
color: favoriteColor
});
</code></pre>
</div>
</div>
<h2>Events API</h2>
<div class="row">
<div class="left">
<p>You can also track specific actions taken by your users and send that data to Hotjar via the <a target="_blank" href="https://help.hotjar.com/hc/en-us/articles/4405109971095-Events-API-Reference">Hotjar Events API</a>.</p>
<p>
You can press the button to generate an event, you can then filter your Recordings by users who encountered that event during their session.
</p>
<form id="events-form">
<label for="events-hotjar-email">Your email</label>
<input id="events-hotjar-email" type="email" placeholder="[email protected]" />
<button class="button" id="events-hotjar-button" type="submit" disabled>Subscribe</button>
</form>
<div class="alert alert-danger hidden" id="events-hotjar-alert"></div>
</div>
<div class="right">
<pre class="prettyprint"><code class="language-js">const actionName = 'subscribed';
Hotjar.event(actionName);</code></pre>
</div>
</div>
<h2>Manual URL changes</h2>
<div class="row">
<div class="left">
<p>Depending on how your website routing works, you might need to manually instruct Hotjar when a route change has happened. <a target="_blank" href="https://help.hotjar.com/hc/en-us/articles/360034378534">More details about URL changes</a>.</p>
<p>
You can press the button to instruct Hotjar the URL has changed
</p>
<button class="button" id="url-hotjar-button" disabled>Change URL</button>
<div class="alert alert-success" id="url-hotjar-alert">The current page is /</div>
</div>
<div class="right">
<pre class="prettyprint"><code class="language-js">const newPage = '/new';
Hotjar.stateChange(newPage);
</code></pre>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>
</body>
</html>