This is an automated email from the ASF dual-hosted git repository.
poorejc pushed a commit to branch FLAGON-469
in repository https://gitbox.apache.org/repos/asf/incubator-flagon-useralejs.git
The following commit(s) were added to refs/heads/FLAGON-469 by this push:
new 51bb0f2 [FLAGON-467] Adding custom log examples in new UserALE.js
example structure
51bb0f2 is described below
commit 51bb0f2f8e83470301d3660e290c32e9bdf90c4e
Author: poorejc <[email protected]>
AuthorDate: Mon Nov 4 21:29:09 2019 -0500
[FLAGON-467] Adding custom log examples in new UserALE.js example structure
---
example/README.md | 21 ++++---------
example/aleAPI.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
example/index.html | 39 +++++-------------------
3 files changed, 99 insertions(+), 48 deletions(-)
diff --git a/example/README.md b/example/README.md
index 5b9d53d..e0f2e96 100755
--- a/example/README.md
+++ b/example/README.md
@@ -37,7 +37,7 @@ Once you've modified the script tag `src` field, save
`index.html`.
Next open index.html in your browser (you can drag it directly into a tab or
double-click it).
-You will see a very simple HTML Webpage with a button labeled, "Click Me!".
+You will see a very simple HTML Webpage with a few interactive features.
On this page, all user events will be captured and sent to the logging server.
See instructions below.
@@ -45,21 +45,10 @@ On this page, all user events will be captured and sent to
the logging server. S
The UserALE.js Example page can be used to test the structure of logs after
instrumentation or UserALE.js src code modification. It can also be used to
experiment with UserALE.js API functions.
-In order to experiment with the `filter` API, simply un-alias the relevant
code snippet hard-coded in the UserALE.js Example Page. Manipulating the
arguments in this code block allows you to experiment with omitting various
event and log types from your UserALE.js data stream. See below:
+In order to experiment with various elements of the UserALE.js API, simply
modify the API examples in `aleAPI.js`.
-```
- <script type="text/javascript">
- window.userale.filter(function (log) {
- var type_array = ['mouseup', 'mouseover', 'dblclick', 'blur', 'focus']
- var logType_array = ['interval']
- return !type_array.includes(log.type) &&
!logType_array.includes(log.logType);
- });
- </script>
-```
-
-Repeat the same steps on the next code block to experiment with the `mapper`
API. Manipulating the arguments in this code block allows you to experiment
with modifying and adding fields in UserALE.js' [data
schema](http://flagon.incubator.apache.org/docs/useralejs/dataschema/).
-NOTE: Each modification of index.html will require that you both save the
modifications and refresh the webpage in your browser.
+NOTE: Each modification of `index.html` or `aleAPI.js` will require that you
both save the modifications and refresh the webpage in your browser.
See the [Flagon website](http://flagon.incubator.apache.org/) for additional
documentation on the
[API](http://flagon.incubator.apache.org/docs/useralejs/API/) and [testing for
scale](http://flagon.incubator.apache.org/docs/stack/scaling/).
@@ -90,12 +79,12 @@ $npm run example:watch
Once started you will see:
```
-> [email protected] example:watch
/Users/jpoore/Documents/Apache_Flagon/prod/incubator-flagon-useralejs
+> [email protected] example:watch
.../Apache_Flagon/prod/incubator-flagon-useralejs
> nodemon -w ./example example/server.js
[nodemon] 1.19.1
[nodemon] to restart at any time, enter `rs`
-[nodemon] watching:
/Users/jpoore/Documents/Apache_Flagon/prod/incubator-flagon-useralejs/example/**/*
+[nodemon] watching:
.../Apache_Flagon/prod/incubator-flagon-useralejs/example/**/*
[nodemon] starting `node example/server.js`
UserAle Local running on port 8000
```
diff --git a/example/aleAPI.js b/example/aleAPI.js
new file mode 100644
index 0000000..87d1a4d
--- /dev/null
+++ b/example/aleAPI.js
@@ -0,0 +1,87 @@
+// 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.
+
+/** Options API
+
+/**Try out the 'Options' function to change UserALE.js params!*/
+const changeMe = "me";
+window.userale.options({
+ "userId": changeMe,
+ "version": "4.2.0",
+ "sessionID": "42"
+});
+
+/**Filter API
+
+/**Try out the 'Filter' API to eliminate the logs that you don't want!*/
+window.userale.filter(function (log) {
+ var type_array = ['mouseup', 'mouseover', 'mousedown', 'dblclick', 'blur',
'focus'];
+ var logType_array = ['interval'];
+ return !type_array.includes(log.type) &&
!logType_array.includes(log.logType);
+});
+
+/**Log Mapping API
+
+/**Play around with the 'Mapping' API to add or modify existing fields in your
logs!*/
+window.userale.map(function (log) {
+ var targetsForLabels = ["button#test_button"];
+ if (targetsForLabels.includes(log.target)) {
+ return Object.assign({}, log, { customLabel: "Click me!" });
+ } else {
+ return log;
+ }
+});
+
+/**'Log' API and Custom Log Functions
+
+/**Check out the 'log' API to generate custom events and add them to the log
queue! The possibilities are endless
+/*You can fully customize your custom logs and define any data schema that
suits you*/
+document.addEventListener('change', function(e) {
+ if (e.target.value === 'goodbye') {
+ window.userale.log({
+ target: window.userale.getSelector(e.target),
+ path: window.userale.buildPath(e),
+ pageUrl: 'userALEtest.com',
+ pageTitle: 'UserAleJS - Example Page',
+ type: 'change',
+ logType: 'custom',
+ userAction: false,
+ detail: 'disinterested user',
+ userId: window.userale.options.userId,
+ toolVersion: window.userale.options.toolVersion,
+ toolName: window.userale.options.toolName,
+ useraleVersion: window.userale.options.useraleVersion,
+ sessionID: window.userale.options.sessionID,
+ customLabel: "no follow up"
+ });
+ }
+});
+
+/**Alternatively, you can use UserALE.js' own packaging function for HTML
events to strive for standardization!*/
+document.addEventListener('change', function(e){
+ if (e.target.value === 'hello') {
+ window.userale.packageLog(e, function(){return "cool user!"});
+ } else {
+ return false
+ }
+});
+/**You can then use the 'Mapping' API function to modify custom logs created
with the packageLog function*/
+window.userale.map(function (log) {
+ var targetsForLabels = ["cool user!"];
+ if (targetsForLabels.includes(log.details)) {
+ return Object.assign({}, log, { logType: 'custom', customLabel:
"follow up" });
+ } else {
+ return log;
+ }
+});
+
diff --git a/example/index.html b/example/index.html
index 5f216d1..2a36ce1 100644
--- a/example/index.html
+++ b/example/index.html
@@ -15,33 +15,20 @@ limitations under the License.
<html>
<head>
<title>UserAleJS - Example Page</title>
+
+ <!-- Load UserALE.js and set logging parameters-->
<script
- src="file:///{Your File Path
Here}/incubator-flagon-useralejs/build/userale-2.0.2.min.js"
+
src="file:///Users/jpoore/Documents/Apache_Flagon/dev/incubator-flagon-useralejs/build/userale-2.0.2.min.js"
data-url="http://localhost:8000/";
data-user="example-user"
data-log-details="true"
data-version="2.0.2"
data-tool="Apache UserALE.js Example"
></script>
- <!--Try out the options function to change UserALE.js params!
- <script type="text/javascript">
- const changeMe = "me";
- window.userale.options({
- "userId": changeMe,
- "version": "4.2.0",
- "sessionID": "42"
- })
- </script>
- -->
- <!--Try out a UserALE.js filter to eliminate the logs that you don't want!
- <script type="text/javascript">
- window.userale.filter(function (log) {
- var type_array = ['mouseup', 'mouseover', 'mousedown', 'dblclick',
'blur', 'focus'];
- var logType_array = ['interval'];
- return !type_array.includes(log.type) &&
!logType_array.includes(log.logType);
- });
- </script>
- -->
+ <!-- Load UserALE.js API calls to modify log stream -->
+ <script
+
src="file:///Users/jpoore/Documents/Apache_Flagon/dev/npmUserAleExample/aleMods.js"
+ ></script>
</head>
<body>
<br>
@@ -51,18 +38,6 @@ limitations under the License.
<div class="container">
<button id="test_button">Click me!</button>
</div>
-<!--Play around with this mapping function to transform your logs!
- <script type="text/javascript">
- window.userale.map(function (log) {
- var targetsForLabels = ["button#test_button"];
- if (targetsForLabels.includes(log.target)) {
- return Object.assign({}, log, { CustomLabel: "Click me!" });
- } else {
- return log;
- }
- });
- </script>
--->
<br>
<br>
<br>
