Configuration et contrôles de base de la relecture des sessions
Afin de suivre ce tutoriel, vous devez définirdisable_session_recordingàtrueLors de l'initialisation de PostHog. Par exemple, dans une application Next.js, cela ressemble à ceci :
JavaScript
// 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 (
<>
>
)
}
Vous pouvez ensuite utiliser PostHogstartSessionRecording()Méthode permettant de déclencher une relecture de session au bon moment. À titre d'exemple, nous pouvons utiliser l'initialisationloadedméthode pour démarrer une relecture de session lorsque l'environnement n'est pas défini surdevelopment.
JavaScript
//...
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()
}
})
}
//...
Contrôler les enregistrements avec des indicateurs de fonctionnalités
Vous pouvez également utiliser des indicateurs de fonctionnalité pour contrôler les sessions à enregistrer. Cela vous permet de contrôler l'enregistrement des sessions en fonction de :
- propriétés des personnes
- propriétés du groupe
- cohortes
- pourcentages de chacun d'entre eux (ou de tous les utilisateurs)
Par exemple, si vous souhaitez uniquement enregistrer 50 % des sessions des utilisateurs aux États-Unis, configurez un indicateur de fonctionnalité où le code pays est égal à « US » et déployez-le sur 50 % des utilisateurs correspondants comme ceci :
Utilisation des indicateurs de fonctionnalités liées
Vous pouvez ensuite définir cet indicateur pour activer les enregistrements dans votreparamètres d'ingestion de rediffusion.
Les enregistrements sont mis en mémoire tampon sur le client jusqu'à la réception de la réponse de décision. L'enregistrement ne se poursuit que si l'indicateur est activé. Autrement dit, si l'indicateur est désactivé, l'enregistrement s'arrête et aucune donnée n'est transmise à 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, utilisez l'optionusePostHogetuseFeatureFlagEnabledcrochets deposthog-js/reactdans un composant comme celui-ci :
JavaScript
import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react'
export default function Home() {
const posthog = usePostHog()
if (useFeatureFlagEnabled('record-na')) {
posthog.startSessionRecording()
}
return (
<>
Record this page
>
)
}
Évaluation du drapeau lors du chargement
Si vous souhaitez évaluer les indicateurs dès le chargement de PostHog, vous pouvez utiliser leloadeddans les options d'initialisation. Assurez-vous d'utiliser la méthodeonFeatureFlagsméthode pour garantir que les drapeaux sont chargés avant de l'évaluer.
JavaScript
// 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()
})
}
})
}
//...
Remarque : Lors de l'évaluation des indicateurs pour un nouvel utilisateur, les propriétés personnelles ne seront disponibles qu'à l'ingestion. Par conséquent, les indicateurs dépendant des propriétés personnelles ne seront pas évalués correctement s'ils sont utilisés dans la méthode chargée. Les propriétés GeoIP (comme 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 propriétés personnelles fonctionnent ici, utilisez l'amorçage.
Enregistrer sur des pages spécifiques
Vous pouvez démarrer des enregistrements sur des pages spécifiques en appelantstartSessionRecording()lorsque ces pages se chargent pour la première fois.
À l'aide du routeur, vous pouvez vérifier vers quelle page les utilisateurs se dirigent et définir des rediffusions de session pour démarrer une fois qu'ils sont dirigés vers la page souhaitée.
JavaScript
import { useEffect } from "react"
import { usePostHog } from "posthog-js/react"
export default function About() {
const posthog = usePostHog()
useEffect(() => {
posthog.startSessionRecording()
}, []);
return (
<>
Record this page
>
)
}
Remarque : vous pouvez utiliser le routeur, mais next/router (et autres) ne se déclenchent pas au chargement initial de la page. L'enregistrement se déclenche lorsqu'un utilisateur accède à la page via le routeur, mais pas s'il y accède directement.
Enregistrer après un comportement utilisateur spécifique
Enfin, vous pouvez déclencher des enregistrements dès que l'utilisateur effectue une action, comme un clic sur un bouton, une saisie, un survol ou même un défilement. C'est aussi simple qu'un appel.startSessionRecording()lorsqu'un utilisateur effectue ces actions.
JavaScript
import { usePostHog } from 'posthog-js/react'
export default function Home() {
const posthog = usePostHog()
return (
<>
Record this page
>
)
}
Ceci est utile si vous souhaitez enregistrer des parties ou des chemins spécifiques sur une page tels que :
- inscription, entonnoirs de paiement
- fonctionnalités nouvelles ou mises à jour
- composants plus petits et spécifiques au sein d'un composant plus grand.