/
index.html
92 lines (90 loc) · 3.41 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
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<title>UserALE.js - Example Page</title>
<!-- Load UserALE.js and set logging parameters-->
<script
src="../build/userale-2.4.0.min.js"
data-url="http://localhost:8000/"
data-user="example-user"
data-log-details="true"
data-version="2.3.0"
data-tool="Apache UserALE.js Example"
data-threshold="1"
data-interval="1000"
></script>
<!-- Load UserALE.js API calls to modify log stream-->
<script
src="./index.js"
></script>
</head>
<body>
<br>
<p>
This UserALE.js Example Page lets you explore how UserALE.js works, deploys with a script tag, and the data it generates.<br>
By default, you'll see the raw logs UserALE.js generates. We kept this page simple so that its easy to see how things work.
</p>
<p>
To see how our API can be used to shape UserALE.js logs to your needs, uncomment the 'index.js' script tag in index.html.
</p>
<br>
<p>Click the button below to generate targeted click events.</p>
<div class="container">
<button id="test_button">Click Me!</button>
</div>
<br>
<br>
<p>Play around with the form elements below to see a variety of UserALE.js log types:</p>
<p>
Capture changes to fields (and values, when it's safe).
</p>
<p>
With index.js injected into the page, you can use the 'Test Field' below to see the behavior of our API dynamically.<br>
Type in the following UserALE.js function names to see their behavior.
<ul>
<li>"log" - ship a fully customized log, built from scratch</li>
<li>"packageLog" - hijack our own pipeline to modify and ship logs packaged exactly like standard UserALE.js logs</li>
<li>"packageCustomLog" - smash a number of custom fields together with UserALE.js standard metadata</li>
</ul>
<form id="test_text_input">
<label>Test Field: <input type="text"></label>
<br><br>
<button type="submit">Submit form</button>
</form>
<br>
<p>Capture inputs and changes to different types of selections.</p>
<select name="UserALE.js Committers">
<option value="clay">Clay</option>
<option value="rob">Rob</option>
<option value="michelle">Michelle</option>
<option value="josh">Josh</option>
</select>
<br>
<br>
<form id="test_radio_input">
<input type="radio" name="Use Case" value="business analytics" checked> Business Analytics<br>
<input type="radio" name="Use Case" value="HCI"> HCI<br>
<input type="radio" name="Use Case" value="other"> Other
</form>
<br>
<div class="container">
<button id="NonLink Button"> Don't Click Me!</button>
</div>
<br>
<p>Click on the Link to Test Logging with Page Navigation</p>
<a href="http://flagon.incubator.apache.org/"><button id="Linked Button">Link to Flagon Page</button></a>
</body>
</html>