This guide assumes that you're using Elastic Cloud and want to analyze a React
application. If your setup is different or you get stuck on any step, please
refer to the main APM RUM
documentation.
On the deployment page click Edit in the left menu.
Find the Integrations Server section.
If you already have Integrations server enabled, go to the next step.
If don't — click "Add capacity" and choose the size of the server.
Checking server status
Go to the main Kibana page of your deployment.
Click Observability.
On the Observability overview page, find and click the button "Install RUM Agent".
In the tab "Elastic APM in Fleet" find "Check APM Server status" button and click it. You should see a confirmation that APM Server is working.
Adding APM RUM to your application
On the same page scroll down and find "RUM (JS)" tab and click it.
Copy the code snippet and paste it into your application. Put it before the react .render() call, so APM RUM would already be initialized when React starts rendering the application.
Update the serviceName to the name of your application.
Replace the value of environment field to process.env.NODE_ENV to separate analytics from development and production environments.
Add the APM RUM dependency to your application: npm install @elastic/apm-rum.
Check that the events are sent by opening your browser dev tools and looking at the network tab. You should see the events request being sent after each search request.
That's it! Once the above steps are done, open the search page, do a couple searches to generate analytics events and head to Observability -> Dashboard to see your analytics data.