-
Notifications
You must be signed in to change notification settings - Fork 26
/
index.js
181 lines (171 loc) · 6.42 KB
/
index.js
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
// 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.
import * as userale from "flagon-userale";
//or use require
//const userale = require('flagon-userale');
/** Options API
*
* the 'options' API allows you to dynamically change UserALE params and set meta data values
* pass in variables or properties into the options object, such as from sessionStorage or localStorage
* NOTE1: if you are using userale in a package bundler, you will need to set options via this API, including
* "url" to tell userale where to send your logs!
* NOTE2: logDetails is set to true (default:false), this will log key strokes, inputs, and change events
* (be careful of your form data and auth workflows!)
*/
const changeMe = "me";
userale.options({
userId: changeMe,
url: "http://localhost:8000/",
version: "2.3.0",
logDetails: true,
toolName: "Apache UserALE Example (Custom)",
logCountThreshold: "1",
transmitInterval: "1000",
});
/**Filter API
/**the 'filter' API allows you to eliminate logs you don't want
* use as a global filter and add classes of events or log types to eliminate
* or use in block scope to surgically eliminate logs from specific elements from an event handler
* The filter below reduces logs to capture click, change, select, scroll and submit events on index.html
* Note that for surgical filters, you may need to clear or reset back to a global filter callback
* the same is true for the 'map' API. See examples below:
*/
userale.addCallbacks({
filter(log) {
var type_array = [
"mouseup",
"mouseover",
"mousedown",
"keydown",
"dblclick",
"blur",
"focus",
"input",
"wheel",
];
var logType_array = ["interval"];
if (type_array.includes(log.type) || logType_array.includes(log.logType)) {
return false;
}
return log;
},
});
/**Log Mapping API
*
* the 'map' API allows you to add or modify new fields to your logs
* this example works with the "Click Me!" button at the top of index.html
*/
document.addEventListener("click", function (e) {
if (e.target.innerHTML === "Click Me!") {
userale.addCallbacks({
map(log) {
return Object.assign({}, log, {
logType: "custom",
customLabel: "map & packageLog Example",
});
},
});
userale.packageLog(e, userale.details(userale.options(), e.type));
/**you'll want to reset the map callback function, or set a conditional (e.g., return log), else
* the callback may be applied to other events of the same class (e.g., click) */
userale.removeCallbacks(["map"]);
} else {
return false;
}
});
/** Alternate Log Mapping API Example
* Build a global mapping function with conditional logic to modify logs for similar events
* this example works with the "Click Me!" button at the top of index.html
* Also, note that specifying log as a return will keep the scope of this callback limited to only the events you want
*/
//userale.map(function (log, e) {
// var targetsForLabels = ["button#test_button"];
// if (targetsForLabels.includes(log.target)) {
// return Object.assign({}, log, { customLabel: e.target.innerHTML });
// } else {
// return log;
// }
//});
/**'Log' API and Custom Log Functions
*
* the 'log' API generate custom events and add them to the log queue
* pass in any keys:values for fully customized logs
* utilize 'options' and other functions to streamline populating custom logs
* type 'log' into the 'API Test Field' to see this custom log sent to our example server
*/
document.addEventListener("change", function (e) {
if (e.target.value === "log") {
userale.log({
target: userale.getSelector(e.target),
path: userale.buildPath(e),
clientTime: Date.now(),
type: e.type,
logType: "custom",
userAction: false,
details: { foo: "bar", bar: "foo" },
customField1: "I can make this log look like anything I want",
customField2: "foo",
userId: userale.options().userId,
toolVersion: userale.options().version,
toolName: userale.options().toolName,
useraleVersion: userale.options().useraleVersion,
sessionId: userale.options().sessionId,
customLabel: "Custom Log Example",
});
}
});
/**you can also use UserALE' own packaging function for HTML events to strive for standardization
* type 'packageLog into the 'API Test Field' to see this custom log sent to our example server
*/
document.addEventListener("change", function (e) {
if (e.target.value === "packageLog") {
/**You can then use the 'Mapping' API function to modify custom logs created with the packageLog function*/
userale.addCallbacks({
changeMap(log) {
var targetsForLabels = ["change"];
if (targetsForLabels.includes(log.type)) {
return Object.assign({}, log, {
logType: "custom",
customLabel: "packageLog Example",
});
} else {
return log;
}
},
});
/**You can also use the details function to package additional log meta data, or add custom details*/
userale.packageLog(e, userale.details(userale.options(), e.type));
} else {
return false;
}
});
/**you can also just add boilerplate UserALE meta data to custom logs with the packageCustomLog function
* type 'packageCustomLog into the 'API Test Field' to see this custom log sent to our example server
*/
document.addEventListener("change", function (e) {
if (e.target.value === "packageCustomLog") {
userale.packageCustomLog(
{
customLabel: "packageCustomLog Example",
customField1: "foo",
customField2: "bar",
},
function () {
return { foo: "bar", bar: "foo" };
},
true
);
} else {
return false;
}
});