# General Translation Integrations: Quickstart
URL: https://generaltranslation.com/it/docs/integrations/rrweb/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Installa gt-rrweb, registra una volta sola un tour guidato del prodotto e riproducilo in ogni impostazione regionale a partire dalle traduzioni pubblicate.

`gt-rrweb` trasforma un singolo tour guidato del prodotto registrato in una riproduzione che puoi pubblicare in ogni impostazione regionale. Registra un flusso una sola volta, associa il suo testo ai cataloghi di traduzione esistenti e gli spettatori lo guarderanno nella loro lingua.

## Prima di iniziare [#before-start]

Ti servono:

* React e React DOM 18 o versioni successive. Anche l'entry di replay condivisa richiede questi peer quando ne usi solo l'API DOM.
* Un'applicazione browser che pubblichi i propri cataloghi di traduzione.
* Una funzione che carichi un catalogo pubblicato in base all'impostazione regionale, lo stesso loader usato dalla tua app.

## Quickstart [#quickstart]

### 1. Installa `gt-rrweb`

Installa `gt-rrweb` insieme ai package rrweb che utilizza per la capture e la riproduzione.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>
</Tabs>

### 2. Esporre gli hash di traduzione

Il registratore associa il contenuto [`<T>`](/docs/react/reference/components/t) renderizzato alla relativa traduzione pubblicata tramite l&#39;hash del DOM. Attiva [`_tagIds`](/docs/react/reference/config#tag-ids) nella tua config esistente in modo che questi hash arrivino al DOM.

```json title="gt.config.json"
{
  "_tagIds": true
}
```

### 3. Aggiungere il registratore

Monta [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) una sola volta all&#39;interno del provider di traduzione e passagli il loader del catalogo di traduzione utilizzato dalla tua app. Qualsiasi discendente potrà così controllare la sessione con [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder).

```tsx title="src/RecordingTools.tsx"
'use client';

import { GTRecorder, useRecorder, type RecorderBundle } from 'gt-rrweb';
import loadTranslations from './loadTranslations';

function download(bundle: RecorderBundle) {
  const url = URL.createObjectURL(
    new Blob([JSON.stringify(bundle)], { type: 'application/json' })
  );
  const link = document.createElement('a');
  link.href = url;
  link.download = 'walkthrough.json';
  link.click();
  URL.revokeObjectURL(url);
}

function Controls() {
  const { start, stop, status } = useRecorder();

  return (
    <div>
      <button onClick={() => start({ locales: ['en', 'es', 'fr'] })}>
        Record
      </button>
      <button onClick={stop} disabled={status !== 'recording'}>
        Stop
      </button>
    </div>
  );
}

export default function RecordingTools() {
  return (
    <>
      <Controls />
      <GTRecorder
        harvest={{ loadTranslations, sourceLocale: 'en' }}
        onComplete={download}
      />
    </>
  );
}
```

La prima impostazione regionale che passi a `start()` è quella in cui registri; ogni impostazione regionale successiva viene raccolta dai tuoi cataloghi di traduzione. L&#39;arresto attende il completamento di questa raccolta, chiama `onComplete` con il bundle finito e restituisce lo stesso bundle.

### 4. Registra il tour guidato

Fai clic su **Record**, completa il flusso nell&#39;impostazione regionale sorgente, quindi fai clic su **Stop**. Vengono catturati clic, navigazione, modifiche al DOM, posizione di scorrimento e contenuto della pagina. I valori inseriti nei campi dei moduli vengono mascherati e la telemetria dei movimenti del mouse viene esclusa. Rivedi la registrazione prima di pubblicarla; consulta [Archiviare il bundle](/docs/integrations/rrweb/guides/recording-walkthroughs#store-bundle).

### 5. Riprodurre il bundle

Importa il JSON salvato e renderizza [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) nel punto in cui vuoi che compaia il tour guidato.

```tsx title="src/Walkthrough.tsx"
'use client';

import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

export default function Walkthrough() {
  return <GTReplayer bundle={bundle} style={{ height: '480px' }} />;
}
```

Il player parte dall&#39;impostazione regionale sorgente registrata e mostra i controlli per le impostazioni regionali elencate nel bundle.

L&#39;asserzione di tipo descrive il file JSON prodotto dal registratore; non convalida un file caricato arbitrario. Assegna alle registrazioni senza riquadro un&#39;altezza di riproduzione esplicita, come nell&#39;esempio.

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/recording-walkthroughs
- /docs/integrations/rrweb/guides/replaying-recordings

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.