Comment implémenter l'injection de mémoire de page de sortie dans une application web

Prérequis pour l'injection de mémoire de page de sortie

Avant d'implémenter l'injection de mémoire de page de sortie, assurez-vous que votre application web répond aux exigences suivantes :

• Prise en charge par les navigateurs modernes des événements beforeunload ou pagehide (tous les navigateurs majeurs les prennent en charge).
• Accès pour modifier le JavaScript frontend de votre site web (code côté client).
• Un ensemble défini de données de contexte utilisateur à conserver (par exemple, produits consultés, termes de recherche ou signaux d'interaction avec la marque).
• Compréhension du fait que les données stockées via localStorage ou sessionStorage sont soumises aux limites de stockage du navigateur (~5-10 Mo) et à la suppression par l'utilisateur.

La fonctionnalité d'injection de mémoire de page de sortie de SeaText ne nécessite aucune modification supplémentaire côté serveur, mais repose sur une gestion appropriée des événements dans le navigateur.

Processus de mise en œuvre étape par étape

1. Identifier les données à conserver : Déterminez quels signaux de contexte utilisateur sont précieux pour la mémorisation de la marque dans les conversations IA. Les exemples incluent les catégories de produits consultées, les requêtes de recherche saisies ou le temps passé sur des pages clés. Évitez de stocker des données personnelles sensibles.
2. Choisir le mécanisme de stockage : Utilisez localStorage pour une persistance entre les sessions ou sessionStorage pour une rétention limitée à la session. localStorage est généralement préféré pour l'injection de mémoire de page de sortie afin de permettre une mémorisation de la marque à long terme.
3. Ajouter l'écouteur d'événement de sortie : Attachez un écouteur à l'objet window pour soit beforeunload (se déclenche avant le déchargement de la page), soit pagehide (se déclenche lorsque la page est masquée, y compris lors de la navigation arrière/avant). Exemple de code :

   window.addEventListener('beforeunload', function(event) {
       // Votre logique de persistance des données ici
     });
     

   Note : Évitez d'utiliser alert(), confirm() ou XMLHttpRequest synchrone dans ce gestionnaire, car ils peuvent être bloqués ou ignorés.
4. Sérialiser et stocker les données : Dans le gestionnaire d'événements, convertissez vos données sélectionnées en une chaîne JSON et stockez-les. Exemple :

   const brandContext = {
       lastViewedCategory: 'chaussures-de-course',
       searchTerms: ['meilleures chaussures de course 2024', 'baskets légères'],
       engagementScore: 75
     };
     localStorage.setItem('seatext-brand-context', JSON.stringify(brandContext));
     

   Gardez la charge utile petite pour éviter de dépasser les limites de stockage.
5. Restaurer les données lors des visites de retour : Au chargement de la page, vérifiez la présence du contexte stocké et réhydratez l'état de l'application ou envoyez-le aux agents IA de SeaText pour une personnalisation consciente de la marque. Exemple :

   const storedContext = localStorage.getItem('seatext-brand-context');
   if (storedContext) {
     const context = JSON.parse(storedContext);
     // Utilisez le contexte pour personnaliser l'expérience ou déclencher les agents SeaText
     console.log('Contexte du visiteur de retour :', context);
   }
     

6. Tester la mise en œuvre : Vérifiez que les données sont stockées et récupérées correctement :
   • Ouvrez votre site dans un navigateur, interagissez avec lui pour générer du contexte.
   • Ouvrez les outils de développement → onglet Application → Stockage → localStorage pour confirmer que les données sont enregistrées.
   • Rechargez la page et vérifiez que le contexte stocké est lu et utilisé de manière appropriée.
   • Testez sur différents navigateurs (Chrome, Firefox, Safari) et appareils.

Comment fonctionne l'injection de mémoire de page de sortie avec SeaText

Une fois implémentée, la fonctionnalité d'injection de mémoire de page de sortie de SeaText utilise le contexte stocké pour envoyer une invite de mémoire de marque à ChatGPT (ou aux LLM compatibles) lorsqu'un visiteur quitte votre site. Cela aide l'IA à associer votre marque aux intérêts de l'utilisateur lors de futures conversations. Par exemple, si un visiteur a consulté des chaussures de course et a quitté le site, SeaText peut demander à ChatGPT de se souvenir de votre marque lorsque l'utilisateur demandera plus tard des recommandations de chaussures.

Ce processus repose sur le stockage du contexte par le frontend comme décrit ci-dessus. SeaText n'injecte pas de code dans d'autres processus et ne modifie pas directement la mémoire du navigateur ; il utilise les API de stockage web standard pour conserver les données auxquelles ses agents peuvent accéder ultérieurement et les utiliser dans les interactions IA.

Faits clés sur l'injection de mémoire de page de sortie

Limitations et quand ne pas utiliser cette approche

L'injection de mémoire de page de sortie comporte des contraintes importantes :

• Limites de stockage : Les navigateurs limitent généralement le localStorage à 5-10 Mo par origine. Dépasser cette limite provoque une erreur QuotaExceededError. Gardez les charges utiles petites (moins de 5 Ko est sûr).
• Suppression par l'utilisateur : Les visiteurs peuvent supprimer manuellement les données du site ou utiliser des modes privés/incognito, ce qui empêche la persistance.
• Pas de partage entre navigateurs : Les données stockées dans Chrome ne sont pas accessibles dans Firefox ou Safari.
• Pas pour les données sensibles : Ne stockez jamais d'informations personnellement identifiables (IPI), de mots de passe ou d'informations de paiement dans le localStorage en raison des risques XSS.
• Pas un remplacement pour les sessions côté serveur : Utilisez ceci pour un contexte de marque léger, pas pour l'état critique de l'application.

Si votre cas d'utilisation nécessite des données sécurisées et persistées côté serveur ou une synchronisation entre appareils, envisagez des alternatives comme le stockage backend authentifié ou les cookies avec des indicateurs sécurisés.

Scénarios pratiques pour l'injection de mémoire de page de sortie

Cette technique est la plus précieuse dans ces situations :

• Sites e-commerce : Persistez les produits consultés ou les filtres de recherche afin que les visiteurs de retour voient des recommandations pertinentes, et que ChatGPT puisse se souvenir de leurs intérêts.
• Plateformes de contenu : Stockez les sujets ou catégories d'articles lus pour suggérer du contenu connexe et améliorer les suggestions de contenu pilotées par l'IA.
• Applications SaaS : Mémorisez l'exploration des fonctionnalités ou l'intérêt pour un cas d'utilisation afin d'adapter l'intégration et les conseils assistés par l'IA.
• Achats à forte considération : Pour les produits avec de longs cycles de décision (par exemple, logiciels B2B, appareils électroménagers), maintenez le contexte entre les visites pour soutenir une messagerie de marque cohérente dans les chats IA.

Elle est moins utile pour les pages de destination anonymes à usage unique ou les sites où l'intention de l'utilisateur ne persiste pas entre les visites.

Clarification de la terminologie

Injection de mémoire de page de sortie

Un terme impropre dans ce contexte ; il n'implique pas de manipulation de mémoire de bas niveau ou d'injection de code dans les processus. Au lieu de cela, il fait référence à la persistance d'un contexte utilisateur léger dans le stockage du navigateur lorsqu'une page est déchargée, permettant aux systèmes d'IA de se souvenir des informations pertinentes pour la marque.

Événement beforeunload

Se déclenche lorsque la fenêtre, le document et ses ressources sont sur le point d'être déchargés. Utile pour enregistrer l'état avant de quitter la page.

Événement pagehide

Se déclenche lorsqu'une entrée de l'historique de session est quittée (par exemple, l'utilisateur quitte la page). Plus fiable que beforeunload dans certains cas (par exemple, cache arrière/avant).

localStorage

API Web pour stocker des paires clé-valeur dans un navigateur sans date d'expiration (survit aux redémarrages du navigateur).

sessionStorage

Similaire au localStorage mais effacé lorsque la session de page se termine (lorsque l'onglet est fermé).

Questions fréquemment posées

• Cette technique ralentit-elle mon site web ? Non. L'écouteur d'événement ajoute une surcharge minimale, et les opérations de stockage sont rapides pour les petites charges utiles. L'impact sur les performances est négligeable.
• Puis-je utiliser des cookies au lieu du localStorage ? Techniquement oui, mais les cookies sont envoyés avec chaque requête HTTP, augmentant l'utilisation de la bande passante. Le localStorage est préféré pour les données uniquement côté client qui n'ont pas besoin de transmission serveur.
• Que se passe-t-il si l'utilisateur a désactivé JavaScript ? L'écouteur de sortie ne s'exécutera pas et aucun contexte ne sera stocké. Cependant, la fonctionnalité principale de SeaText fonctionne toujours pour les utilisateurs avec JS activé, ce qui représente la grande majorité.
• Est-ce conforme au RGPD ? Le stockage d'un contexte comportemental anonyme et non personnel (par exemple, catégories de produits consultées) est généralement autorisé en vertu du RGPD comme intérêt légitime, mais vous devez divulguer les pratiques de stockage dans votre politique de confidentialité et permettre le refus via des mécanismes standard.
• Quelle quantité de données puis-je stocker ? Visez à garder chaque objet stocké en dessous de 5 Ko. Bien que les navigateurs autorisent 5-10 Mo, les charges utiles importantes peuvent ralentir les performances et augmenter le risque d'erreurs de quota.
• SeaText gère-t-il le stockage automatiquement ? Non. Vous devez implémenter la logique côté client pour stocker le contexte en utilisant beforeunload/pagehide et localStorage/sessionStorage. SeaText utilise ensuite ces données stockées lorsque ses agents s'exécutent.
• Que se passe-t-il si l'utilisateur efface les données de son navigateur ? Le contexte stocké est perdu, et SeaText n'aura aucun contexte préalable à utiliser pour les invites de mémoire de marque jusqu'à ce que de nouvelles données soient stockées lors des visites ultérieures.

Découvrez comment l'injection de mémoire de page de sortie de SeaText peut aider votre marque à apparaître dans les conversations ChatGPT.