# General Translation Integrations: Configurer les enregistrements URL: https://generaltranslation.com/fr/docs/integrations/rrweb/guides/configuring-recordings.mdx Docs index: https://generaltranslation.com/llms.txt Description: Comment configurer la capture gt-rrweb, les overlays localisés, les contrôles, l'automatisation et la gestion du bundle. Configurez la manière dont les démonstrations produit sont capturées, localisées à partir de vos catalogues publiés et stockées. Ce guide part du principe que vous avez installé le recorder et activé les hachages de traduction dans le [Quickstart](/docs/integrations/rrweb/quickstart). ## Monter le recorder [#mount] Montez [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) une seule fois à l'intérieur de votre provider de traduction. Les contrôles placés ailleurs dans l'application utilisent [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder) pour démarrer et arrêter cette même session définie au niveau du module. ```tsx title="src/RecordingTools.tsx" 'use client'; import { GTRecorder } from 'gt-rrweb'; import loadTranslations from './loadTranslations'; export default function RecordingTools() { return ( { // Enregistrez ou envoyez le bundle finalisé. console.log(bundle); }} /> ); } ``` Définissez `enabled={false}` lorsque le recorder ne doit ni configurer la capture ni afficher son overlay d'enregistrement. ## Définir la région et le cadre de capture [#capture-region] Le recorder capture l'intégralité du document. `contentSelector` identifie la région du produit délimitée par le cadre lors de la lecture ; sa valeur par défaut est `main, [data-gt-content]`. ```tsx title="src/RecordingTools.tsx" ``` Choisissez un cadre en fonction de l'endroit où vous intégrerez la démonstration : * `frame="none"` laisse la mise en page du document inchangée et rejoue l'intégralité de la fenêtre d'affichage enregistrée. * `frame="16:9"` utilise le cadre de présentation intégré. * `frame={{ aspect: 4 / 3 }}` utilise un rapport largeur/hauteur personnalisé. Utilisez un rapport personnalisé fini et positif. Zéro, les valeurs négatives et `NaN` se comportent comme `none`. **Capture avec cadre :** l'élément sélectionné doit utiliser `position: fixed` avant l'enregistrement. Encadrer un contenu positionné de façon statique peut le déplacer hors de la fenêtre d'affichage. Utilisez `frame="none"` lorsque l'application ne peut pas appliquer cette mise en page. ## Configurer le replay localisé [#localized-replay] `gt-rrweb` ne génère aucune traduction pendant la capture. Commencez par [publier vos traductions](/docs/cli/guides/generating-translations), puis configurez le recorder pour qu'il construise les overlays de paramètres régionaux à partir de ces catalogues. ### Charger les catalogues publiés Passez un loader via la prop `harvest`. Il reçoit un paramètre régional et renvoie le catalogue publié correspondant. ```tsx title="src/RecordingTools.tsx" ``` Le loader peut lire des fichiers locaux, interroger un réseau de diffusion de contenu (CDN) ou utiliser la même source que votre application. Définissez `sourceLocale` sur le paramètre régional visible pendant la capture. Si vous l'omettez, la collecte lit le cookie désigné par `localeCookieName`, lorsqu'il est configuré, puis se replie sur le premier paramètre régional transmis à `start()`. Le paramètre régional source résolu doit être égal à `locales[0]` ; cette première entrée est également intégrée à l'enregistrement comme paramètre régional source pour la relecture. ### Choisir les locales Indiquez d'abord le paramètre régional enregistré, suivi de chaque paramètre régional cible dont le catalogue doit être chargé : ```tsx title="src/RecordButton.tsx" const { start } = useRecorder(); await start({ locales: ['en', 'es', 'fr', 'ja'], }); ``` La collecte ne s'exécute que si `locales` contient au moins deux entrées. Une liste limitée à la source produit malgré tout un enregistrement valide, mais sans overlays localisés. ### Faire correspondre le contenu traduit Activez [`_tagIds`](/docs/react/reference/config#tag-ids) afin que le contenu affiché par [``](/docs/react/reference/components/t) porte le hachage utilisé pour faire correspondre chaque entrée du catalogue. Les variables et les composants d'affichage de valeurs conservent la valeur capturée lors de l'enregistrement source. Les chaînes brutes affichées par `gt()` ou [`useGT()`](/docs/react/reference/hooks/use-gt) nécessitent une fonction `hashMessage` compatible, issue du même pipeline de hachage que le catalogue. Il s'agit d'un point d'intégration avancé : `gt-rrweb` n'exporte pas ce hacheur, une configuration ordinaire doit donc s'appuyer sur les hachages de [``](/docs/react/reference/components/t). Le contenu reste dans le paramètre régional source lorsqu'une traduction est manquante, qu'un Plural ou une branche ne produit pas de forme unique affichée, que le texte traduit présente une structure de nœuds différente, ou qu'une string brute interpolée ne correspond pas au hachage de son source template. Un échec du chargeur de catalogue reste circonscrit à ce paramètre régional : les overlays complétés pour les autres locales restent disponibles. Un échec de collecte plus général n'est pas fatal : le bundle ne contient alors que la source. ## Personnaliser les contrôles d'enregistrement [#controls] L'overlay intégré s'affiche pendant la capture et comprend le contrôle permettant d'arrêter la session. Utilisez `labels` pour remplacer les textes d'enregistrement et d'arrêt. ```tsx title="src/RecordingTools.tsx" ``` La formulation du Runtime est purement visuelle. Votre application peut également afficher ses propres contrôles avec [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder). ## Exposer les contrôles à l'automatisation [#automation] Définissez `expose` lorsqu'un test end-to-end ou un script d'automatisation du navigateur doit piloter la capture. Le recorder ajoute un handle `window[name]` exposant `start` et `stop`. ```tsx title="src/RecordingTools.tsx" ``` ```js title="record.spec.js" await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] })); // Déroulez le parcours produit. const bundle = await page.evaluate(() => window.gtRecorder.stop()); ``` `expose` vaut `false` par défaut. Laissez cette option désactivée lorsque l'automatisation du navigateur n'a pas besoin d'un accès direct. ## Gérer les bundles terminés [#bundles] Passez `onComplete` pour enregistrer ou téléverser chaque enregistrement réussi. Le callback s'exécute une fois les overlays de paramètres régionaux collectés et reçoit le même [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle) que celui renvoyé par `stop()`. Le paquet ne téléverse ni ne conserve les enregistrements. Stockez le bundle sérialisable en JSON avec les assets de votre application ou dans un espace de stockage que vous contrôlez. Passez en revue chaque bundle avant de le publier. Les valeurs saisies dans les formulaires sont masquées, mais le flux d'événements contient toujours le texte visible de la page ainsi que l'état de l'application pendant la session. ## Next steps - /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.