docs(user-interaction): update docs to include examples of config opt…

…ions (open-telemetry#1840)

* docs(user-interaction): update docs to include examples of config options

* add example to prevent span creation

* fix lint

* address PR comments

* update link to list of events

* syntax updates

Co-authored-by: Martin Kuba <[email protected]>

---------

Co-authored-by: Martin Kuba <[email protected]>

plugins/web/opentelemetry-instrumentation-user-interaction/README.md

@@ -20,6 +20,8 @@ npm install --save @opentelemetry/instrumentation-user-interaction
 
 ## Usage
 
+### Initialize
+
 ```js
 import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
@@ -82,6 +84,67 @@ function getData(url) {
 
 ```
 
+### Send spans for different events
+
+By default, only `click` events are automatically instrumented. To automatically instrument other events, specify the events that should be captured for telemetry. Most [HTMLElement interface events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#events) are supported.
+
+```js
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+
+// ...general opentelemetry configuration
+
+registerInstrumentations({
+  instrumentations: [
+    new UserInteractionInstrumentation({
+      eventNames: ['submit', 'click', 'keypress'],
+    }),
+  ],
+});
+```
+
+### Prevent spans from recording
+
+```js
+import { UserInteractionInstrumentation } from '@opentelemetryinstrumentation-user-interaction';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+
+
+// ...general opentelemetry configuration
+
+registerInstrumentations({
+  instrumentations: [
+    new UserInteractionInstrumentation({
+      shouldPreventSpanCreation: () => {
+        return true;
+      },
+    }),
+  ],
+});
+```
+
+### Add extra attributes to spans
+
+To attach extra attributes to user interaction spans, provide a callback function to the `shouldPreventSpanCreation` option:
+
+```js
+import { UserInteractionInstrumentation } from '@opentelemetryinstrumentation-user-interaction';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+
+// ...general opentelemetry configuration
+
+registerInstrumentations({
+  instrumentations: [
+    new UserInteractionInstrumentation({
+      shouldPreventSpanCreation: (event, element, span) => {
+        span.setAttribute('target.id', element.id);
+        // etc..
+      }
+    }),
+  ],
+});
+```
+
 ## Example Screenshots
 
 ![Screenshot of the running example](images/main.jpg)