-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (116 loc) · 3.33 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
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/freenalytics/[email protected]/connector.min.js"></script>
<script type="text/javascript" src="/analytics.js"></script>
</head>
<body>
<nav class="navbar is-link" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<div class="navbar-item">
<-- Web Example -->
</div>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a href="/" class="navbar-item">
Home
</a>
<a href="/article" class="navbar-item">
Example Article
</a>
<a href="/about" class="navbar-item">
About
</a>
</div>
<div class="navbar-end">
<a href="https://github.com/freenalytics/example-web" class="navbar-item">
Web Example Repo
</a>
<a href="https://github.com/freenalytics/freenalytics-connector-web" class="navbar-item">
Connector Repo
</a>
</div>
</div>
</nav>
<main class="container">
<div class="content my-4">
<h1 class="title is-2">
Web Example
</h1>
<h2 class="title is-3">
Setting-up Your Application
</h2>
<p>
In order to use this connector library, you should use the Official Web Template when creating your application.
This library will follow the following schema
</p>
<pre>
type: object
properties:
page_title:
type: string
url_route:
type: string
user_time_in_page:
type: number
user_scrolled:
type: boolean
user_first_visit:
type: boolean
user_location:
type: string
referrer:
type: string
num_of_clicks:
type: integer
element_clicked:
type: object
properties:
url_route:
type: string
tag_name:
type: string
class_name:
type: string
id:
type: string
page_x:
type: integer
page_y:
type: integer
client_x:
type: integer
client_y:
type: integer
</pre>
<h2 class="title is-3">
Usage
</h2>
<p>
In order to integrate this library with your webpage, add the following tags inside your head tag in your html pages:
</p>
<pre>
<‍script type="text/javascript" src="https://cdn.jsdelivr.net/gh/freenalytics/[email protected]/connector.min.js"></‍script>
<‍script type="text/javascript" src="/script.js"></‍script>
</pre>
<p>
Notice that the second script tag points to a local script named script.js.
In this case, you need to instantiate the client with your information. An example of what this script.js file could look like:
</p>
<pre>
const client = new freenalytics.Client({
apiUrl: 'http://localhost:4000/api',
domain: 'FD-107hpu34tlb7s7mro'
});
client.initialize();
</pre>
<p>
Once you have that set up, the client will automatically send relevant data periodically.
</p>
</div>
</main>
</body>
</html>