Configuration et commandes de relecture de session de base
Pour suivre ce tutoriel, vous devez remplacer disable_session_recording par true dans l'initialisation de PostHog. Par exemple, dans une application Next.js, cela donne :
JavaScript
Vous pouvez ensuite utiliser la méthode `startSessionRecording()` de PostHog pour déclencher une relecture de session au moment opportun. À titre d'exemple simple, nous pouvons utiliser la méthode d'initialisation `loaded` pour démarrer une relecture de session lorsque l'environnement n'est pas défini sur `development`.
JavaScript
Contrôler les enregistrements avec des indicateurs de fonctionnalités
Vous pouvez également utiliser des indicateurs de fonctionnalités pour contrôler les sessions à enregistrer. Cela vous permet de contrôler l'enregistrement des sessions en fonction de :
// pages/_app.js
import posthog from "posthog-js"
import { PostHogProvider } from 'posthog-js/react'
if (typeof window !== 'undefined') {
posthog.init('phc_HVcGJdGDtkcvV1qUuz5bDrMf987gskGUpFH1nV6ufov', {
api_host: 'https://us.i.posthog.com',
defaults: '2025-05-24',
disable_session_recording: true,
})
}
export default function App({ Component, pageProps }) {
return (
<>
<PostHogProvider client={posthog}>
<Component {...pageProps} />
</PostHogProvider>
</>
)
}
//...
if (typeof window !== 'undefined') {
posthog.init('phc_HVcGJdGDtkcvV1qUuz5bDrMf987gskGUpFH1nV6ufov', {
api_host: 'https://us.i.posthog.com',
defaults: '2025-05-24',
disable_session_recording: true,
loaded: (posthog) => {
if (process.env.NODE_ENV != 'development') posthog.startSessionRecording()
}
})
}
//...
- propriétés des personnes
- propriétés de groupe
- cohortes
- pourcentages de chacun de ces (ou de tous les utilisateurs)
Par exemple, si vous souhaitez enregistrer seulement 50 % des sessions des utilisateurs situés aux États-Unis, configurez un indicateur de fonctionnalité où le code pays est égal à « US » et déployez-le auprès de 50 % des utilisateurs correspondants comme ceci :
Utilisation des indicateurs de fonctionnalités liés
Vous pouvez ensuite activer cette option pour activer les enregistrements dans vos paramètres d'ingestion de relecture .
L'enregistrement est mis en mémoire tampon côté client jusqu'à réception de la réponse de décision. Il ne reprend que si l'option correspondante est activée. Autrement dit, si cette option est désactivée, l'enregistrement s'arrête et aucune donnée n'est transférée hors de l'appareil du client.
Manuellement dans votre code
Vous pouvez également vérifier cet indicateur après avoir initialisé PostHog et démarrer un enregistrement s'il est actif pour l'utilisateur actuel. Pour garantir l'exactitude des informations relatives à l'utilisateur et à l'indicateur, vous pouvez utiliser les hooks usePostHog et useFeatureFlagEnabled de posthog-js/react dans un composant comme celui-ci :
JavaScript
Évaluation du drapeau sur la charge
Si vous souhaitez évaluer les options dès le chargement de PostHog, vous pouvez utiliser la méthode `loaded` dans les options d'initialisation. Veillez à utiliser la méthode `onFeatureFlags` pour garantir le chargement des options avant leur évaluation.
JavaScript
Remarque : lors de l’évaluation des indicateurs pour un nouvel utilisateur, les propriétés de la personne ne seront disponibles qu’après l’ingestion. Par conséquent, les indicateurs dépendant des propriétés de la personne ne seront pas évalués correctement s’ils le sont dans la méthode chargée. Les propriétés GeoIP (telles que le code continent, le pays et le nom de la ville) fonctionneront car elles ne dépendent pas de l’ingestion. Pour que les indicateurs avec des propriétés de la personne fonctionnent dans ce cas, utilisez l’amorçage.
import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react'
export default function Home() {
const posthog = usePostHog()
if (useFeatureFlagEnabled('record-na')) {
posthog.startSessionRecording()
}
return (
<>
<p>Record this page</p>
</>
)
}
// pages/_app.js
if (typeof window !== 'undefined') {
posthog.init('phc_HVcGJdGDtkcvV1qUuz5bDrMf987gskGUpFH1nV6ufov', {
api_host: 'https://us.i.posthog.com',
defaults: '2025-05-24',
disable_session_recording: true,
loaded: (posthog) => {
posthog.onFeatureFlags((flags) => {
if (posthog.isFeatureEnabled('record-na')) posthog.startSessionRecording()
})
}
})
}
//...
Inscrire sur des pages spécifiques
Vous pouvez démarrer des enregistrements sur des pages spécifiques en appelant startSessionRecording() lors du premier chargement de ces pages.
En utilisant le routeur, vous pouvez vérifier quelle page les utilisateurs consultent et configurer les relectures de session pour qu'elles démarrent une fois qu'ils accèdent à la page souhaitée.
JavaScript
Remarque : vous pouvez utiliser le routeur, mais les fonctions next/router (et autres) ne se déclenchent pas au chargement initial de la page. L’enregistrement se déclenchera lorsqu’un utilisateur accède à la page via le routeur, mais pas s’il y accède directement.
Enregistrement après un comportement spécifique de l'utilisateur
Enfin, vous pouvez déclencher l'enregistrement à chaque action de l'utilisateur : clics sur des boutons, saisies, survol de la souris, voire défilement. Il suffit pour cela d'appeler la fonction startSessionRecording() lorsque l'utilisateur effectue ces actions.
JavaScript
Ceci est utile si vous souhaitez enregistrer des parties ou des chemins spécifiques sur une page, tels que :
import { useEffect } from "react"
import { usePostHog } from "posthog-js/react"
export default function About() {
const posthog = usePostHog()
useEffect(() => {
posthog.startSessionRecording()
}, []);
return (
<>
<p>Record this page</p>
</>
)
}
import { usePostHog } from 'posthog-js/react'
export default function Home() {
const posthog = usePostHog()
return (
<>
<p>Record this page</p>
<button onClick={() => posthog.startSessionRecording()}>
Start recording
</button>
</>
)
}
- tunnels d'inscription et de paiement
- nouvelles fonctionnalités ou mises à jour
- Des composants plus petits et spécifiques à l'intérieur d'un composant plus grand.