# General Translation Integrations: Configurare le registrazioni URL: https://generaltranslation.com/it/docs/integrations/rrweb/guides/configuring-recordings.mdx Docs index: https://generaltranslation.com/llms.txt Description: Come configurare la cattura di gt-rrweb, gli overlay localizzati, i controlli, le automazioni e la gestione del bundle. Configura come i tour guidati del prodotto vengono catturati, localizzati a partire dai cataloghi pubblicati e archiviati. Questa guida presuppone che tu abbia installato il registratore e abilitato i translation hash nella [Quickstart](/docs/integrations/rrweb/quickstart). ## Montare il registratore [#mount] Monta [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) una sola volta all'interno del tuo provider di traduzione. I controlli presenti in altre parti dell'applicazione usano [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder) per avviare e interrompere la stessa sessione a livello di modulo. ```tsx title="src/RecordingTools.tsx" 'use client'; import { GTRecorder } from 'gt-rrweb'; import loadTranslations from './loadTranslations'; export default function RecordingTools() { return ( { // Salva o carica il bundle completato. console.log(bundle); }} /> ); } ``` Imposta `enabled={false}` quando il registratore non deve configurare la cattura né renderizzare il proprio overlay di registrazione. ## Impostare la region e il riquadro di cattura [#capture-region] Il registratore cattura l'intero documento. `contentSelector` identifica la region del prodotto inquadrata durante la riproduzione e per impostazione predefinita vale `main, [data-gt-content]`. ```tsx title="src/RecordingTools.tsx" ``` Scegli un riquadro in base a dove incorporerai il tour guidato: * `frame="none"` lascia invariato il layout del documento e riproduce l'intero viewport registrato. * `frame="16:9"` utilizza il riquadro di presentazione integrato. * `frame={{ aspect: 4 / 3 }}` utilizza un rapporto larghezza-altezza personalizzato. Utilizza un rapporto personalizzato finito e positivo. Zero, valori negativi e `NaN` si comportano come `none`. **Cattura con riquadro:** l'elemento selezionato deve utilizzare `position: fixed` prima della registrazione. Inquadrare contenuti con posizionamento static può spostarli fuori dal viewport. Utilizza `frame="none"` quando l'applicazione non può applicare quel layout. ## Configurare il replay localizzato [#localized-replay] `gt-rrweb` non genera traduzioni durante la cattura. Per prima cosa [pubblica le tue traduzioni](/docs/cli/guides/generating-translations), quindi configura il registratore per creare gli overlay delle impostazioni regionali a partire da quei cataloghi. ### Caricare i cataloghi pubblicati Passa un loader tramite la prop `harvest`. Riceve un'impostazione regionale e restituisce il catalogo pubblicato per quell'impostazione regionale. ```tsx title="src/RecordingTools.tsx" ``` Il loader può leggere file locali, effettuare richieste a una content delivery network (CDN) o usare la stessa sorgente della tua applicazione. Imposta `sourceLocale` sull'impostazione regionale visibile durante la cattura. Se la ometti, la raccolta legge il cookie indicato da `localeCookieName`, quando configurato, e poi ricade sulla prima impostazione regionale passata a `start()`. L'impostazione regionale sorgente risolta deve essere uguale a `locales[0]`; quella prima voce viene inoltre incorporata come impostazione regionale sorgente della registrazione per il replay. ### Scegliere le impostazioni regionali Passa per prima l'impostazione regionale registrata, seguita da tutte le impostazioni regionali di destinazione il cui catalogo deve essere caricato: ```tsx title="src/RecordButton.tsx" const { start } = useRecorder(); await start({ locales: ['en', 'es', 'fr', 'ja'], }); ``` La raccolta viene eseguita solo quando `locales` contiene almeno due entries. Un elenco con la sola sorgente produce comunque una registrazione valida, ma senza overlay localizzati. ### Corrispondenza del contenuto tradotto Abilita [`_tagIds`](/docs/react/reference/config#tag-ids) affinché il contenuto renderizzato da [``](/docs/react/reference/components/t) includa l'hash usato per associare ogni entry del catalogo. Le variabili e i componenti che renderizzano valori mantengono il valore catturato durante la registrazione sorgente. Le stringhe semplici renderizzate da `gt()` o [`useGT()`](/docs/react/reference/hooks/use-gt) richiedono una funzione `hashMessage` compatibile, proveniente dalla stessa pipeline di hashing del catalogo. Si tratta di un punto di integrazione avanzato; `gt-rrweb` non esporta tale funzione di hashing, quindi un setup ordinario dovrebbe basarsi sugli hash di [``](/docs/react/reference/components/t). Il contenuto rimane nell'impostazione regionale sorgente quando manca una traduzione, quando un Plural o un branch non ha un'unica forma renderizzata, quando il testo tradotto ha una struttura dei nodi diversa oppure quando una stringa semplice interpolata non corrisponde all'hash del suo source template. Un errore del loader del catalogo resta isolato a quell'impostazione regionale, quindi gli overlay completati per le altre impostazioni regionali restano disponibili. Un errore di raccolta più ampio non è fatale e lascia il bundle con la sola sorgente. ## Personalizzare i controlli di registrazione [#controls] L'overlay integrato compare durante la cattura e include il controllo che interrompe la sessione. Usa `labels` per sostituirne i testi di registrazione e di arresto. ```tsx title="src/RecordingTools.tsx" ``` La formulazione a runtime è puramente visiva. La tua applicazione può anche renderizzare i propri controlli con [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder). ## Esporre i controlli all'automazione [#automation] Imposta `expose` quando un test end-to-end o uno script di automazione del browser deve controllare la cattura. Il registratore aggiunge un handle `window[name]` con `start` e `stop`. ```tsx title="src/RecordingTools.tsx" ``` ```js title="record.spec.js" await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] })); // Esegui il flusso del prodotto. const bundle = await page.evaluate(() => window.gtRecorder.stop()); ``` Il valore predefinito di `expose` è `false`. Lascialo disattivato quando l'automazione del browser non richiede l'accesso diretto. ## Gestire i bundle completati [#bundles] Passa `onComplete` per salvare o caricare ogni registrazione riuscita. La callback viene eseguita dopo la raccolta degli overlay delle impostazioni regionali e riceve lo stesso [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle) restituito da `stop()`. Il package non carica né conserva le registrazioni. Archivia il bundle serializzabile in JSON insieme alle risorse della tua applicazione o in uno spazio di archiviazione sotto il tuo controllo. Rivedi ogni bundle prima di pubblicarlo. I valori inseriti nei moduli sono mascherati, ma il flusso di eventi contiene comunque il testo visibile della pagina e lo stato dell'applicazione durante la sessione. ## 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.