[GitHub] [incubator-flagon-useralejs] confusingstraw commented on a change in pull request #64: Custom labels docs

[GitBox <gi...@apache.org>]

confusingstraw commented on a change in pull request #64:
URL: https://github.com/apache/incubator-flagon-useralejs/pull/64#discussion_r597152859



##########
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:
       this works, but i think it relies a bit on the implementation details of `map`/`packageLog`. the intended usage is captured in the (non-highlighted) example in the main `README.md`.
   
   when we call the `userale.map` function, it keeps the function you pass it around until it gets re-assigned. the given function gets called for _every_ log that the library receives. with that in mind, there is no need to setup your own event listener, as that is what userale is for. all you need to 
   
   here is how i'd imagine the above code would be implemented:
   ```js
   // no need to set up a separate listener
   window.userale.map((log, e) => {
       // determine whether we want to modify the log
       if (e.target.innerHTML !== 'New Feature') {
           return log; // return the log if we don't care about this event
       }
   
       // return the log with any changes we want
       return {
           ...log,
           customLabel: 'New Feature',
           logType: 'custom',
       };
   });
   ```




-- 
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:
users@infra.apache.org