Docs » Create custom events

Create custom events 🔗

Create custom events to capture meaningful metrics about customer journeys and user behavior on your site. Custom events support filtering by tags and the ability to add custom attributes.

How custom events can add value to your organization 🔗

Splunk RUM automatically collects metrics about page loads, errors, and core web vitals. Sometimes, you need custom logic to capture a specific workflow that is important to your organization to understand.

Use case 🔗

Suppose you are an online retailer. A meaningful custom event for your business might be understanding behavior around conversion rates and why users drop off and don’t finish a checkout workflow. You might also want to understand where users are stagnating in your application. You can create a custom event to discover which events precipitate an unsuccessful customer journey. Perhaps users are stopped by an error in your checkout workflow, or are unable to enter a promo code. Custom events provide the opportunity for you to see a unique perspective on your data driven by the questions that matter most to you.

Create a custom event 🔗

To create a custom event, use the OpenTelementry API for JavaScript with the TraceProvider. The following example shows how to create a custom event. To create a custom event you need to first, declare the tracer. Then, you can define the custom event.

Declare the tracer 🔗

You can declare the tracer through either CDN or NPM. You need to declare the tracer only once. For more information on the difference between CDN and NPM, see Choose how you want to instrument and configure Splunk RUM on your application.

Declare the tracer with CDN 🔗

The following code sample shows how to the declare through CDN.

<script>
    const Provider = SplunkRum.provider;
    var tracer=Provider.getTracer('appModuleLoader');
</script>

Declare the tracer with NPM 🔗

The following code sample shows how to the declare through NPM.

import {trace} from '@opentelemetry/api'

Define the custom event 🔗

Then, define the custom event in the start and end span, as in the following code sample:

const span = tracer.startSpan('test.module.load', {
    attributes: {
        'workflow.name': 'test.module.load'
    }
});

//  time passes with custom business logic for example checkout, add to cart etc

span.end();

Advanced configurations 🔗

For more information on advanced configurations, see Manual instrumentation using API in the splunk-otel-js-web library on GitHub.