poorejc commented on a change in pull request #64:
URL:
https://github.com/apache/incubator-flagon-useralejs/pull/64#discussion_r597344992
##########
File path: example/log-label-example/README.md
##########
@@ -0,0 +1,97 @@
+# Custom Log Label Examples
+
+Examples illustrating how to add custom labels to logs generated by `userale`.
Review comment:
I would also add a little more context to the usage.
```
The following are examples illustrating how to add custom labels to log
generated by `UserALE.js`. Custom labels are useful in cases where one would
prefer to use a more descriptive label for an element users interact with than
HTML tags (among other cases).
```
##########
File path: example/log-label-example/README.md
##########
@@ -0,0 +1,97 @@
+# Custom Log Label Examples
+
+Examples illustrating how to add custom labels to logs generated by `userale`.
+
+## Adding Custom Labels to Logs
+
+### Method 1
+
+Consider the following HTML:
+
+```html
+
+<div>
+ <button>New Feature</button>
+</div>
+```
+
+The following code snippet will add a custom field and send a log whenever the
new feature button is clicked:
+
+```js
+document.addEventListener('click', function (e) {
+ if (e.target.innerHTML === 'New Feature') {
+ window.userale.map(log => ({...log, logType: 'custom', customLabel:
'New Feature'}));
Review comment:
window.userale.map is fine for now. Eventually, I think we'll want to
encourage (or promote) more usage of our NPM deployment option (vs script tag).
If including UserALE.js via NPM package, exports do not have to be called as a
window object, e.g., window.userale.map --> userale.map. I think this is fine
for now as it's consistent usage with our "top-level" example (which highlights
script-tag use case).
##########
File path: example/log-label-example/README.md
##########
@@ -0,0 +1,97 @@
+# Custom Log Label Examples
+
+Examples illustrating how to add custom labels to logs generated by `userale`.
Review comment:
should be consistent in naming `userale` --> `useralejs` OR `UserALE.js`
##########
File path: example/log-label-example/README.md
##########
@@ -0,0 +1,97 @@
+# Custom Log Label Examples
+
+Examples illustrating how to add custom labels to logs generated by `userale`.
+
+## Adding Custom Labels to Logs
+
+### Method 1
+
+Consider the following HTML:
+
+```html
+
+<div>
+ <button>New Feature</button>
+</div>
+```
+
+The following code snippet will add a custom field and send a log whenever the
new feature button is clicked:
+
+```js
+document.addEventListener('click', function (e) {
+ if (e.target.innerHTML === 'New Feature') {
+ window.userale.map(log => ({...log, logType: 'custom', customLabel:
'New Feature'}));
+ window.userale.packageLog(e,
window.userale.details(window.userale.options(), e.type));
+ window.userale.map();
+ } else {
+ return false
+ }
+});
Review comment:
+1 For labeling, we should not advocate that users create new event
listeners. Ideally, users should only be creating new events listeners if (1)
the events are not captured by UserALE.js natively, or (2) they want to filter
out everything but custom logs.
##########
File path: example/log-label-example/README.md
##########
@@ -0,0 +1,97 @@
+# Custom Log Label Examples
+
+Examples illustrating how to add custom labels to logs generated by `userale`.
+
+## Adding Custom Labels to Logs
+
+### Method 1
+
+Consider the following HTML:
+
+```html
+
+<div>
+ <button>New Feature</button>
+</div>
+```
+
+The following code snippet will add a custom field and send a log whenever the
new feature button is clicked:
+
+```js
+document.addEventListener('click', function (e) {
+ if (e.target.innerHTML === 'New Feature') {
+ window.userale.map(log => ({...log, logType: 'custom', customLabel:
'New Feature'}));
+ window.userale.packageLog(e,
window.userale.details(window.userale.options(), e.type));
+ window.userale.map();
+ } else {
+ return false
+ }
+});
Review comment:
> if you want to make the code extra compact (not something i am a huge
fan of), you can write it like this:
>
> ```js
> window.userale.map((log, e) => e.type ==='click' && e.target.innerHTML ===
'New Feature'
> ? { ...log, customLabel: 'New Feature', logType: 'custom' }
> : log);
> ```
+1 agree with Rob. Worth being verbose in examples for accessibility and
descriptiveness. If they want to compact our examples, that's not hard.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
