Setup OpenReplay

Video Tutorial

Watch how to Get Started with OpenReplay

If you don't like reading, you can follow this video tutorial showing you how to get started with OpenReplay in 3 minutes or less

Watch on Youtube

Getting started with OpenReplay is straightforward.

If you’d like to watch a quick tutorial on how to get started, use this YouTube video, otherwise keep reading for more details.

There are 2 ways you can get OpenReplay up and running: using the script or the npm package.

Copy/paste the code snippet directly into the </head> of your web app. The script can be found in OpenReplay dashboard under ‘Preferences > Projects’ and is unique to each project.

If your website supports Google Tag Manager, then you may follow the GTM step-by-step guide.

First install the npm package.

npm i @openreplay/tracker

Then, initialize the package from your codebase entry point and start the tracker. You must set the projectKey option in the constructor. Its value can can be found in your OpenReplay dashboard under ‘Preferences > Projects’.

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.start();

Follow the below snippet if your web app is Server-Side-Rendered (SSR) (i.e. NextJS, NuxtJS). Ensure tracker.start() is called once the app is started (in useEffect or componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
}

If you would like to go further in configuring the tracker, check JavaScript SDK for the list of available options.

If you’re not using OpenReplay inside a bare application, you’re likely to be using a Web Dev framework, like Next.js, Nuxt or something else. Check out our personalized tutorials for each of the supported frameworks:

React

Vue

Angular

NextJS

Nuxt

Now that you have installed the tracker and deployed your web app, session recordings should appear within few minutes. Well done!

In the meantime, you can further in the setup process to get the most out of OpenReplay. The more you capture the better for quickly reproducing and fixing issues:

• Identify a User: Associate your internal user ID with the session being recorded.
• Metadata: Also referred to as traits or user variables, metadata provides additional information about users while recording sessions.
• Custom Events: Add more intelligence by recording domain-specific events alongside session replays.
• Error Reprting: Report errors and exceptions and see them under the ERRORS tab.
• Upload Source-Maps: See the source code context obtained from stack traces in their original form.
• Plugins: Understand what’s happening under the hood by capturing your application’s store and monitoring your HTTP and GraphQL queries.
• Integrations: Plug OpenReplay with your logging tools and sync backend errors with session replays.