diff --git a/plugins/web/opentelemetry-instrumentation-user-interaction/README.md b/plugins/web/opentelemetry-instrumentation-user-interaction/README.md index 224ea724e3..c72a693fc8 100644 --- a/plugins/web/opentelemetry-instrumentation-user-interaction/README.md +++ b/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)