Começar a usar o OpenReplay é simples.

Se você quiser assistir a um tutorial rápido sobre como começar, use este vídeo do YouTube; caso contrário, continue lendo para ver mais detalhes.

Há duas maneiras de colocar o OpenReplay em funcionamento: usando o script ou o pacote npm.

Copie e cole o trecho de código diretamente no </head> do seu aplicativo web. O script pode ser encontrado no dashboard do OpenReplay em ‘Preferences > Projects’ e é exclusivo de cada projeto.

Se o seu site oferece suporte ao Google Tag Manager, você pode seguir o guia passo a passo do GTM.

Primeiro, instale o pacote npm.

npm i @openreplay/tracker

Em seguida, inicialize o pacote a partir do ponto de entrada do seu código e inicie o tracker. Você deve definir a opção projectKey no construtor. O valor dela pode ser encontrado no seu dashboard do OpenReplay em ‘Preferences > Projects’.

Você pode usar o tracker como uma instância singleton, que é a forma recomendada de usá-lo. Dessa forma, você pode acessar o tracker de qualquer lugar do seu aplicativo:

import { tracker } from '@openreplay/tracker'

tracker.configure({
	projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
})

tracker.start() // returns a promise with session info (sessionID, sessionHash, userUUID)

Ou você pode usar a classe Tracker diretamente para gerenciar a instância manualmente:

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();

Siga o trecho abaixo se o seu aplicativo web usa Server-Side Rendering (SSR) (por exemplo, NextJS, NuxtJS). Garanta que o tracker seja executado em um ambiente de navegador e que tracker.start() seja chamado depois que o aplicativo for entregue ao cliente (por exemplo, em useEffect ou 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();
  }, []);
}

Se quiser ir além na configuração do tracker, consulte o JavaScript SDK para ver a lista de opções disponíveis.

Se você não está usando o OpenReplay em um aplicativo simples, é provável que esteja usando um framework de desenvolvimento web, como Next.js, Nuxt ou outro. Confira os nossos tutoriais personalizados para cada um dos frameworks compatíveis:

ReactVueAngularNextJSNuxt

Agora que você instalou o tracker e implantou o seu aplicativo web, as gravações de sessões devem aparecer em poucos minutos. Muito bem!

Enquanto isso, você pode avançar no processo de configuração para aproveitar ao máximo o OpenReplay. Quanto mais você capturar, melhor para reproduzir e corrigir problemas rapidamente: