# General Translation Integrations: Enregistrer des démonstrations
URL: https://generaltranslation.com/fr/docs/integrations/rrweb/guides/recording-walkthroughs.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment capturer un parcours produit avec gt-rrweb, examiner la session et enregistrer son bundle d'enregistrement.

Enregistrez une seule fois un parcours produit reproductible, puis sauvegardez-le sous forme de bundle que vous pourrez examiner, publier et rejouer.

Ce guide explique comment mener une session de capture efficace. Suivez d'abord le [Quickstart](/docs/integrations/rrweb/quickstart).

## Avant de commencer [#before-start]

Avant d'enregistrer :

* [Configurez le recorder](/docs/integrations/rrweb/guides/configuring-recordings) pour la région du produit et le cadre de lecture dont vous avez besoin.
* Ouvrez le parcours dans le paramètre régional source et réinitialisez-le à un état de départ prévisible.
* Déterminez les paramètres régionaux publiés à inclure. (Consultez [Configurer le replay localisé](/docs/integrations/rrweb/guides/configuring-recordings#localized-replay)).

## Démarrer et arrêter la capture [#capture]

Appelez [`start()`](/docs/integrations/rrweb/reference/recorder#use-recorder) d'abord avec le paramètre régional source, puis avec chaque paramètre régional cible à collecter. Le recorder conserve sa session dans l'état du module : un changement de route qui remonte vos composants n'interrompt donc pas un enregistrement en cours.

```tsx title="src/RecordButton.tsx"
const { start, stop, status } = useRecorder();

await start({ locales: ['en', 'de', 'ja'] });
const bundle = await stop();
```

L'état `status` passe de `preparing` à `recording`, revient à `preparing` pendant la collecte des traductions, puis se termine à `idle`. Un échec du catalog-loader n'affecte que ce paramètre régional ; un échec de collecte plus général n'est pas fatal, et `stop()` se résout malgré tout avec un bundle contenant uniquement le contenu source.

Quitter la page interrompt une session active sans collecter les traductions ni appeler `onComplete`. Arrêtez l'enregistrement avant toute navigation qui décharge l'application.

## Capturer le parcours produit [#product-flow]

Une fois `start()` résolu, déroulez la démonstration dans l'ordre exact où un spectateur doit la voir. Les clics, la navigation, les modifications du DOM, la position de défilement et le contenu visible de la page font partie du flux d'événements.

Gardez la session ciblée :

* Partez d'une page et d'un état de l’application stable.
* Marquez une pause suffisamment longue pour que le contenu asynchrone s'affiche avant d'interagir avec lui.
* Terminez une fois que le spectateur a atteint un état de réussite clair.
* Évitez d'exposer un état de l’application sensible.

Les valeurs saisies dans les formulaires sont masquées et les données de mouvement de souris ne sont pas collectées. Vérifiez l'enregistrement terminé avant de le publier, car les autres textes et états visibles restent présents dans le flux d'événements.

Ajoutez la classe `rr-block` de rrweb aux contrôles réservés à l'opérateur ou à tout autre élément qui ne doit pas apparaître dans l'enregistrement :

```tsx
<div className="rr-block">
  <RecordingControls />
</div>
```

## Piloter les enregistrements depuis une automation [#automation]

Pour scripter un enregistrement depuis un test end-to-end, configurez l&#39;option `expose` du recorder. Le handle `window[name]` obtenu expose les mêmes fonctions `start` et `stop`.

```tsx title="src/RecordingTools.tsx"
<GTRecorder expose="gtRecorder" />
```

```js title="record.spec.js"
await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] }));
// ... déroulez le parcours
const bundle = await page.evaluate(() => window.gtRecorder.stop());
```

## Stocker le bundle [#store-bundle]

Sérialisez le [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle) renvoyé au format JSON et conservez-le avec les assets de votre application ou dans votre propre système de stockage. Le paquet n&#39;envoie aucun enregistrement nulle part.

Vous pouvez stocker le bundle complet ou uniquement `bundle.events`. Les métadonnées de paramètre régional et d&#39;overlay sont intégrées au flux d&#39;événements, ce qui permet au replayer de restituer une lecture localisée lorsqu&#39;un export limité aux événements est ensuite encapsulé sous la forme `{ events }`.

<Callout type="warn">
  Passez en revue un enregistrement avant de le publier. Les valeurs saisies sont masquées, mais le flux d&#39;événements contient toujours le texte visible de la page ainsi que l&#39;état de l&#39;application pendant la session.
</Callout>

## Next steps

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

## Sitemap

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