You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flagon.apache.org by po...@apache.org on 2019/11/05 02:29:27 UTC
[incubator-flagon-useralejs] branch FLAGON-469 updated:
[FLAGON-467] Adding custom log examples in new UserALE.js example structure
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 <po...@apache.org>
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:
```
-> flagon-userale@2.0.2 example:watch /Users/jpoore/Documents/Apache_Flagon/prod/incubator-flagon-useralejs
+> flagon-userale@2.0.2 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>